:root {
  --green: #0b4a35;
  --green-2: #168a5b;
  --neon: #34d399;
  --dark: #061b15;
  --ink: #111418;
  --text: #39433e;
  --muted: #66746d;
  --line: #dfe8e3;
  --soft: #f4f8f6;
  --white: #ffffff;
  --blue: #1f6fb2;
  --shadow: 0 18px 45px rgba(10, 38, 28, 0.12);
}

/* 2026-05-30 rhythm20: final homepage rhythm and density pass. */
:root {
  --sws-page-black: #020706;
  --sws-green-black: #06170f;
  --sws-deep-green: #092014;
  --sws-blue-black: #06111e;
  --sws-neutral-black: #080909;
  --sws-brand-green: #20e5a3;
  --sws-brand-green-soft: #5dcaa5;
  --sws-title-white: #f5fff9;
  --sws-text-soft: #98c7b2;
  --sws-border-soft: rgba(157, 242, 207, .18);
}

html {
  scroll-behavior: smooth;
}

body {
  background:
    radial-gradient(circle at 18% 0%, rgba(29, 158, 117, .12), transparent 28%),
    radial-gradient(circle at 86% 22%, rgba(30, 87, 148, .10), transparent 32%),
    var(--sws-page-black) !important;
}

.ai-home {
  background: var(--sws-page-black) !important;
}

.ai-section {
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate !important;
}

.ai-section::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
  background-image: radial-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px) !important;
  background-size: 12px 12px !important;
  opacity: .20 !important;
  z-index: -2 !important;
}

.ai-section::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .025), transparent 16%, transparent 82%, rgba(255, 255, 255, .025)),
    radial-gradient(circle at 72% 32%, rgba(32, 229, 163, .12), transparent 34%) !important;
  z-index: -1 !important;
}

#services.ai-origin,
#about.premium-about {
  background:
    radial-gradient(circle at 76% 30%, rgba(29, 158, 117, .18), transparent 30%),
    linear-gradient(180deg, #06160f 0%, #020706 100%) !important;
}

#scenarios.ai-solutions {
  background:
    linear-gradient(125deg, rgba(0, 0, 0, .98) 0%, rgba(4, 13, 10, .98) 47%, rgba(9, 27, 17, .98) 100%) !important;
}

#capability.core-tech-section {
  background:
    radial-gradient(circle at 66% 48%, rgba(31, 95, 154, .16), transparent 38%),
    linear-gradient(180deg, #04111e 0%, #07121b 54%, #04090e 100%) !important;
}

#training.premium-delivery {
  background:
    linear-gradient(180deg, #090909 0%, #10100f 52%, #050706 100%) !important;
}

#resources.premium-resources {
  background:
    radial-gradient(circle at 72% 38%, rgba(29, 158, 117, .16), transparent 35%),
    linear-gradient(180deg, #06150d 0%, #07100d 100%) !important;
}

#services .infrastructure-section,
#scenarios.ai-solutions,
#capability .capability-stage,
#training .delivery-stage,
#resources .resource-stage,
#about .about-stage {
  width: min(1440px, calc(100vw - 112px)) !important;
  margin-inline: auto !important;
}

#services .infrastructure-section {
  min-height: calc(100svh - 84px) !important;
  padding: clamp(58px, 6vh, 76px) 0 clamp(38px, 5vh, 56px) !important;
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
  gap: clamp(22px, 3vh, 32px) !important;
}

#services .infra-hero {
  width: min(780px, 100%) !important;
  margin-inline: auto !important;
  text-align: center !important;
  padding: 0 !important;
}

#services .infra-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  min-height: 36px !important;
  padding: 0 26px !important;
  border: 1px solid rgba(32, 229, 163, .62) !important;
  border-radius: 999px !important;
  background: rgba(1, 20, 12, .52) !important;
  color: #9fe1cb !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  letter-spacing: 1px !important;
}

#services .infra-pill span {
  color: var(--sws-brand-green) !important;
}

#services .infra-hero h2,
#scenarios .solution-hero h2,
#capability .capability-copy h2,
#training .stage-head h2,
#resources .resource-main h2,
#about .about-narrative-center h2 {
  color: var(--sws-title-white) !important;
  font-size: clamp(36px, 3.45vw, 54px) !important;
  font-weight: 650 !important;
  line-height: 1.12 !important;
  letter-spacing: 0 !important;
}

#services .infra-hero h2 {
  margin: 16px 0 10px !important;
}

#services .infra-hero p,
#scenarios .solution-subtitle,
#capability .capability-copy > p,
#training .stage-head p,
#resources .resource-main > p,
#about .about-narrative-center p {
  color: var(--sws-text-soft) !important;
  font-size: 16px !important;
  line-height: 1.8 !important;
  letter-spacing: 0 !important;
}

#services .infra-hero p {
  margin: 0 auto 18px !important;
  max-width: 760px !important;
}

#services .infra-metrics {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 0 !important;
  width: min(520px, 100%) !important;
  margin: 18px auto 0 !important;
  border-top: 1px solid rgba(32, 229, 163, .14) !important;
}

#services .infra-metrics span {
  display: grid !important;
  gap: 4px !important;
  padding: 18px 18px 0 !important;
  color: rgba(152, 199, 178, .72) !important;
  font-size: 12px !important;
  text-align: center !important;
  border-right: 1px solid rgba(255, 255, 255, .10) !important;
}

#services .infra-metrics span:last-child {
  border-right: 0 !important;
}

#services .infra-metrics strong {
  color: var(--sws-brand-green) !important;
  font-size: 30px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
}

#services .infra-showcase {
  align-self: end !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1.06fr) minmax(430px, .94fr) !important;
  grid-template-rows: repeat(3, minmax(126px, 1fr)) !important;
  gap: 18px 22px !important;
  min-height: 432px !important;
  max-height: min(520px, calc(100svh - 360px)) !important;
}

#services .infra-module {
  position: relative !important;
  overflow: hidden !important;
  border: 1px solid rgba(157, 242, 207, .18) !important;
  border-radius: 16px !important;
  background:
    linear-gradient(115deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .014) 36%, rgba(32, 229, 163, .07)),
    rgba(255, 255, 255, .018) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .08),
    0 26px 80px rgba(0, 0, 0, .36) !important;
  backdrop-filter: blur(22px) saturate(1.12) !important;
  transition: transform .36s ease, border-color .36s ease, background .36s ease !important;
}

#services .infra-module:hover,
#services .infra-module:focus-visible {
  transform: translateY(-4px) !important;
  border-color: rgba(32, 229, 163, .62) !important;
}

#services .infra-module:first-child {
  grid-row: 1 / 4 !important;
  display: grid !important;
  grid-template-columns: minmax(0, .60fr) minmax(250px, .40fr) !important;
  align-items: start !important;
  gap: 22px !important;
  padding: clamp(28px, 2.4vw, 38px) !important;
}

#services .infra-copy {
  position: relative !important;
  z-index: 2 !important;
  align-self: start !important;
}

#services .infra-copy span,
#scenarios .solution-card span,
#services .infra-module:not(:first-child) .infra-copy span {
  color: var(--sws-brand-green-soft) !important;
  font-size: 13px !important;
  font-weight: 650 !important;
  letter-spacing: 1px !important;
}

#services .infra-copy h3,
#scenarios .solution-card h3,
#training .delivery-track h3,
#resources .resource-panels h3 {
  color: var(--sws-title-white) !important;
  font-size: clamp(23px, 1.9vw, 34px) !important;
  font-weight: 650 !important;
  line-height: 1.18 !important;
  letter-spacing: 0 !important;
  margin: 14px 0 14px !important;
}

#services .infra-module:first-child .infra-copy h3 {
  font-size: clamp(32px, 3vw, 48px) !important;
}

#services .infra-copy p,
#scenarios .solution-card p,
#training .delivery-track p,
#resources .resource-panels p,
#resources .resource-main p {
  color: var(--sws-text-soft) !important;
  font-size: 15px !important;
  line-height: 1.72 !important;
  margin: 0 !important;
}

#services .infra-copy ul {
  display: grid !important;
  gap: 10px !important;
  padding: 0 !important;
  margin: 28px 0 0 !important;
  list-style: none !important;
}

#services .infra-copy li {
  color: rgba(255, 255, 255, .92) !important;
  font-size: 14px !important;
  line-height: 1.4 !important;
  padding-left: 24px !important;
  position: relative !important;
}

#services .infra-copy li::before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  top: .45em !important;
  width: 9px !important;
  height: 9px !important;
  border-radius: 50% !important;
  border: 2px solid var(--sws-brand-green) !important;
  box-shadow: 0 0 12px rgba(32, 229, 163, .55) !important;
}

#services .infra-module:not(:first-child) {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 130px !important;
  align-items: center !important;
  gap: 20px !important;
  min-height: 0 !important;
  padding: 24px 30px !important;
}

#services .infra-module:not(:first-child) .infra-copy h3 {
  white-space: normal !important;
  word-break: keep-all !important;
  overflow: visible !important;
}

#services .infra-module:not(:first-child) .infra-copy p {
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

#services .infra-visual {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

#services .infra-module:not(:first-child) .infra-visual,
#services .infra-module:not(:first-child) .infra-visual img {
  width: 128px !important;
  height: 128px !important;
  min-width: 128px !important;
  object-fit: contain !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  mix-blend-mode: screen !important;
  filter: brightness(1.12) saturate(1.08) drop-shadow(0 0 18px rgba(32, 229, 163, .26)) !important;
}

#services .infra-visual-base {
  position: absolute !important;
  right: clamp(22px, 3vw, 48px) !important;
  bottom: clamp(20px, 3vw, 44px) !important;
  width: clamp(220px, 21vw, 315px) !important;
  height: clamp(220px, 21vw, 315px) !important;
  pointer-events: none !important;
  overflow: visible !important;
}

#services .infra-visual-base::after {
  content: "" !important;
  position: absolute !important;
  left: 50% !important;
  bottom: 9% !important;
  width: 74% !important;
  height: 18% !important;
  border-radius: 50% !important;
  transform: translateX(-50%) !important;
  background: radial-gradient(ellipse at center, rgba(32, 229, 163, .34), rgba(32, 229, 163, .08) 50%, transparent 72%) !important;
  filter: blur(1px) !important;
  opacity: .72 !important;
  z-index: 1 !important;
}

#services .infra-visual-base::before {
  content: "" !important;
  position: absolute !important;
  left: 50% !important;
  top: 47% !important;
  width: 68% !important;
  height: 68% !important;
  border-radius: 50% !important;
  transform: translate(-50%, -50%) !important;
  background:
    linear-gradient(100deg, transparent 0 38%, rgba(255, 255, 255, .28) 45%, transparent 56%),
    radial-gradient(circle at 32% 28%, rgba(255, 255, 255, .28), transparent 24%) !important;
  mix-blend-mode: screen !important;
  animation: swsOrbLightSweep20 5.8s ease-in-out infinite !important;
  opacity: .72 !important;
  z-index: 4 !important;
}

#services .infra-visual-base img.infra-orb-static {
  display: block !important;
  position: absolute !important;
  left: 50% !important;
  top: 47% !important;
  width: 78% !important;
  height: 78% !important;
  max-width: none !important;
  object-fit: cover !important;
  object-position: 50% 42% !important;
  transform: translate(-50%, -50%) rotate(0deg) !important;
  transform-origin: 50% 50% !important;
  clip-path: circle(45% at 50% 46%) !important;
  mix-blend-mode: screen !important;
  filter: brightness(1.12) saturate(1.12) drop-shadow(0 0 28px rgba(32, 229, 163, .42)) !important;
  opacity: .96 !important;
  z-index: 3 !important;
  animation: swsOrbSurfaceTurn20 17s linear infinite !important;
}

#services .infra-visual-base img.infra-orb-spin {
  display: none !important;
}

@keyframes swsOrbSurfaceTurn20 {
  0% { transform: translate(-50%, -50%) rotate(0deg) scale(1); }
  50% { transform: translate(-50%, -50%) rotate(180deg) scale(1.015); }
  100% { transform: translate(-50%, -50%) rotate(360deg) scale(1); }
}

@keyframes swsOrbLightSweep20 {
  0%, 100% { transform: translate(-84%, -50%) rotate(8deg); opacity: .18; }
  44% { transform: translate(-48%, -50%) rotate(8deg); opacity: .64; }
  72% { transform: translate(-14%, -50%) rotate(8deg); opacity: .22; }
}

#scenarios.ai-solutions {
  width: 100% !important;
  min-height: calc(100svh - 84px) !important;
  padding: clamp(64px, 7vh, 86px) max(44px, calc((100vw - 1440px) / 2 + 56px)) clamp(44px, 5vh, 62px) !important;
  display: grid !important;
  grid-template-columns: minmax(300px, .32fr) minmax(0, .68fr) !important;
  align-items: center !important;
  gap: clamp(36px, 5vw, 72px) !important;
}

#scenarios .solution-hero {
  min-width: 0 !important;
  max-width: 430px !important;
  align-self: center !important;
  padding: 0 !important;
}

#scenarios .solution-badge,
#capability .core-badge,
#resources .section-mark,
#training .section-mark,
#about .section-mark {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  height: 34px !important;
  padding: 0 20px !important;
  border: 1px solid rgba(32, 229, 163, .55) !important;
  border-radius: 999px !important;
  background: rgba(32, 229, 163, .035) !important;
  color: #9fe1cb !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  letter-spacing: .5px !important;
}

#scenarios .solution-badge span,
#capability .core-badge span {
  color: var(--sws-brand-green) !important;
}

#scenarios .solution-hero h2 {
  margin: 28px 0 22px !important;
  max-width: 430px !important;
  font-size: clamp(38px, 4.4vw, 68px) !important;
  line-height: 1.08 !important;
}

#scenarios .solution-subtitle {
  max-width: 400px !important;
  margin: 0 0 28px !important;
}

#scenarios .solution-stats {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px 14px !important;
  margin: 0 !important;
}

#scenarios .solution-stats span {
  display: inline-flex !important;
  align-items: baseline !important;
  gap: 8px !important;
  height: 38px !important;
  padding: 0 16px !important;
  border: 1px solid rgba(32, 229, 163, .28) !important;
  border-radius: 999px !important;
  color: rgba(152, 199, 178, .78) !important;
  background: rgba(255, 255, 255, .018) !important;
}

#scenarios .solution-stats strong {
  color: var(--sws-title-white) !important;
  font-size: 18px !important;
}

#scenarios .solution-divider {
  display: none !important;
}

#scenarios .solution-board {
  display: grid !important;
  grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr)) !important;
  grid-template-rows: repeat(2, minmax(0, 1fr)) !important;
  gap: 16px !important;
  height: min(560px, calc(100svh - 150px)) !important;
  min-height: 500px !important;
}

#scenarios .solution-card {
  position: relative !important;
  min-height: 0 !important;
  padding: 24px !important;
  border-radius: 16px !important;
  border: 1px solid rgba(32, 229, 163, .20) !important;
  background:
    linear-gradient(145deg, rgba(32, 229, 163, .095), rgba(255, 255, 255, .015) 42%, rgba(255, 255, 255, .025)),
    rgba(2, 22, 12, .82) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), 0 18px 50px rgba(0, 0, 0, .30) !important;
  display: flex !important;
  align-items: flex-end !important;
  overflow: hidden !important;
}

#scenarios .solution-card:hover {
  border-color: rgba(32, 229, 163, .58) !important;
  transform: translateY(-4px) !important;
}

#scenarios .solution-card:first-child {
  grid-row: 1 / 3 !important;
  padding: 32px !important;
}

#scenarios .solution-visual {
  position: absolute !important;
  top: 24px !important;
  left: 24px !important;
  width: 74px !important;
  height: 74px !important;
  opacity: .95 !important;
}

#scenarios .solution-card:first-child .solution-visual {
  width: 120px !important;
  height: 120px !important;
}

#scenarios .solution-icon {
  width: 100% !important;
  height: 100% !important;
  fill: none !important;
  stroke: var(--sws-brand-green) !important;
  stroke-width: 4 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  filter: drop-shadow(0 0 16px rgba(32, 229, 163, .36)) !important;
}

#scenarios .solution-card::after {
  content: "" !important;
  position: absolute !important;
  inset: auto -18% -18% auto !important;
  width: 56% !important;
  height: 48% !important;
  background: radial-gradient(circle, rgba(32, 229, 163, .16), transparent 68%) !important;
  pointer-events: none !important;
}

#scenarios .solution-content {
  position: relative !important;
  z-index: 1 !important;
  width: 100% !important;
  padding-top: 98px !important;
}

#scenarios .solution-card:not(:first-child) .solution-content {
  padding-top: 64px !important;
}

#scenarios .solution-content h3 {
  margin: 14px 0 12px !important;
  font-size: clamp(20px, 1.55vw, 26px) !important;
}

#scenarios .solution-content p {
  display: -webkit-box !important;
  -webkit-line-clamp: 3 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

#capability .capability-stage {
  min-height: calc(100svh - 84px) !important;
  padding: clamp(72px, 8vh, 96px) 0 !important;
  display: grid !important;
  grid-template-columns: minmax(420px, .44fr) minmax(0, .56fr) !important;
  align-items: center !important;
  gap: clamp(44px, 5vw, 84px) !important;
}

#capability .capability-copy {
  max-width: 610px !important;
}

#capability .capability-copy h2 {
  margin: 30px 0 26px !important;
  max-width: 610px !important;
  font-size: clamp(38px, 3.9vw, 62px) !important;
  line-height: 1.12 !important;
}

#capability .capability-copy h2 br {
  display: block !important;
}

#capability .capability-copy p {
  max-width: 560px !important;
}

#capability .core-cta {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-top: 34px !important;
  min-width: 178px !important;
  height: 48px !important;
  border: 1px solid rgba(32, 229, 163, .58) !important;
  border-radius: 10px !important;
  color: var(--sws-brand-green) !important;
  text-decoration: none !important;
  background: rgba(32, 229, 163, .03) !important;
}

#capability .tech-console {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 16px !important;
  padding: 22px !important;
  border-radius: 18px !important;
  background:
    radial-gradient(circle at 20% 10%, rgba(32, 229, 163, .12), transparent 28%),
    rgba(3, 18, 28, .72) !important;
  box-shadow: 0 28px 90px rgba(0, 0, 0, .38), inset 0 1px 0 rgba(255, 255, 255, .06) !important;
}

#capability .core-tech-card {
  min-height: 210px !important;
  padding: 28px !important;
  border-radius: 14px !important;
  border: 1px solid rgba(32, 229, 163, .18) !important;
  background: rgba(3, 35, 20, .82) !important;
  overflow: hidden !important;
}

#capability .tech-icon {
  width: 42px !important;
  height: 42px !important;
  color: var(--sws-brand-green) !important;
  stroke: currentColor !important;
  stroke-width: 1.7 !important;
  fill: none !important;
  filter: drop-shadow(0 0 18px rgba(32, 229, 163, .45)) !important;
  margin-bottom: 20px !important;
}

#capability .core-tech-card h3 {
  color: var(--sws-title-white) !important;
  font-size: 22px !important;
  line-height: 1.25 !important;
  margin: 12px 0 10px !important;
}

#capability .core-tech-card p {
  color: var(--sws-brand-green-soft) !important;
  font-size: 14px !important;
  line-height: 1.65 !important;
}

#capability .core-tech-card em {
  display: block !important;
  margin-top: 14px !important;
  padding-top: 14px !important;
  border-top: 1px solid rgba(32, 229, 163, .14) !important;
  color: rgba(139, 191, 170, .60) !important;
  font-size: 13px !important;
  font-style: normal !important;
  line-height: 1.7 !important;
}

#training .delivery-stage {
  min-height: calc(100svh - 84px) !important;
  padding: clamp(74px, 8vh, 104px) 0 !important;
  display: grid !important;
  grid-template-columns: minmax(340px, .40fr) minmax(0, .60fr) !important;
  align-items: center !important;
  gap: clamp(44px, 6vw, 96px) !important;
}

#training .stage-head {
  text-align: left !important;
  max-width: 520px !important;
}

#training .stage-head h2 {
  margin: 28px 0 20px !important;
  max-width: 520px !important;
}

#training .delivery-track {
  position: relative !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 18px !important;
}

#training .delivery-track::before {
  content: "" !important;
  position: absolute !important;
  left: 16px !important;
  top: 26px !important;
  bottom: 26px !important;
  width: 1px !important;
  background: linear-gradient(180deg, transparent, rgba(32, 229, 163, .58), transparent) !important;
}

#training .delivery-track article {
  position: relative !important;
  display: grid !important;
  grid-template-columns: 48px minmax(0, 1fr) !important;
  grid-template-areas:
    "icon no"
    "icon title"
    "icon text" !important;
  column-gap: 22px !important;
  min-height: 112px !important;
  padding: 22px 24px !important;
  border-radius: 14px !important;
  border: 1px solid rgba(255, 255, 255, .10) !important;
  background: linear-gradient(135deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .012)) !important;
}

#training .delivery-icon {
  grid-area: icon !important;
  align-self: center !important;
  width: 42px !important;
  height: 42px !important;
  color: var(--sws-brand-green) !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 1.8 !important;
  filter: drop-shadow(0 0 18px rgba(32, 229, 163, .42)) !important;
}

#training .delivery-track span {
  grid-area: no !important;
  color: var(--sws-brand-green) !important;
  font-size: 13px !important;
  letter-spacing: 2px !important;
}

#training .delivery-track h3 {
  grid-area: title !important;
  margin: 6px 0 !important;
  font-size: 24px !important;
}

#training .delivery-track p {
  grid-area: text !important;
}

#resources .resource-stage {
  min-height: calc(100svh - 84px) !important;
  padding: clamp(74px, 8vh, 104px) 0 !important;
  display: grid !important;
  grid-template-columns: minmax(380px, .40fr) minmax(0, .60fr) !important;
  align-items: center !important;
  gap: clamp(44px, 6vw, 92px) !important;
}

#resources .resource-tabs {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 10px !important;
  margin-top: 34px !important;
}

#resources .resource-tabs button {
  min-height: 42px !important;
  border-radius: 10px !important;
  border: 1px solid rgba(32, 229, 163, .20) !important;
  background: rgba(255, 255, 255, .018) !important;
  color: var(--sws-text-soft) !important;
}

#resources .resource-tabs button.is-active {
  border-color: rgba(32, 229, 163, .64) !important;
  color: var(--sws-brand-green) !important;
  background: rgba(32, 229, 163, .08) !important;
}

#resources .resource-panels {
  display: grid !important;
  gap: 16px !important;
  padding: 22px !important;
  border-radius: 18px !important;
  background: rgba(255, 255, 255, .025) !important;
  border: 1px solid rgba(255, 255, 255, .08) !important;
}

#resources .resource-panels article {
  display: grid !important;
  grid-template-columns: 54px minmax(0, 1fr) !important;
  column-gap: 18px !important;
  align-items: center !important;
  min-height: 114px !important;
  padding: 24px !important;
  border-radius: 14px !important;
  border: 1px solid rgba(255, 255, 255, .10) !important;
  background: rgba(3, 27, 17, .62) !important;
  opacity: .68 !important;
}

#resources .resource-panels article.is-active {
  opacity: 1 !important;
  border-color: rgba(32, 229, 163, .52) !important;
  background: rgba(7, 45, 27, .78) !important;
}

#resources .resource-icon {
  grid-row: 1 / 4 !important;
  width: 44px !important;
  height: 44px !important;
  color: var(--sws-brand-green) !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 1.8 !important;
}

#about .about-stage {
  min-height: calc(100svh - 84px) !important;
  padding: clamp(74px, 8vh, 104px) 0 !important;
  display: grid !important;
  grid-template-columns: minmax(360px, .38fr) minmax(0, .62fr) !important;
  align-items: center !important;
  gap: clamp(48px, 7vw, 104px) !important;
}

#about .about-narrative-center {
  text-align: left !important;
  max-width: 610px !important;
}

#about .about-narrative-center h2 {
  margin: 28px 0 24px !important;
  font-size: clamp(42px, 4.8vw, 76px) !important;
  line-height: 1.12 !important;
}

#about .about-cinema {
  position: relative !important;
  min-height: min(520px, 50vw) !important;
  border-radius: 18px !important;
  border: 1px solid rgba(255, 255, 255, .14) !important;
  background:
    radial-gradient(circle at 44% 48%, rgba(32, 229, 163, .16), transparent 18%),
    linear-gradient(135deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .015)),
    #040806 !important;
  cursor: pointer !important;
  overflow: hidden !important;
}

#about .about-cinema-mark {
  position: absolute !important;
  inset: 0 !important;
}

#about .about-cinema-mark span {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  width: 34% !important;
  height: 1px !important;
  transform-origin: 0 50% !important;
  background: rgba(157, 242, 207, .38) !important;
}

#about .about-cinema-mark span:nth-child(1) { transform: rotate(90deg); }
#about .about-cinema-mark span:nth-child(2) { transform: rotate(126deg); }
#about .about-cinema-mark span:nth-child(3) { transform: rotate(54deg); }
#about .about-cinema-mark span:nth-child(4) { transform: rotate(160deg); }
#about .about-cinema-mark span:nth-child(5) { transform: rotate(20deg); }

#about .about-play {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  width: 76px !important;
  height: 76px !important;
  transform: translate(-50%, -50%) !important;
  border-radius: 50% !important;
  border: 1px solid rgba(255, 255, 255, .42) !important;
  background: rgba(255, 255, 255, .055) !important;
}

#about .about-play::before {
  content: "" !important;
  position: absolute !important;
  left: 31px !important;
  top: 24px !important;
  border-left: 18px solid rgba(255, 255, 255, .86) !important;
  border-top: 13px solid transparent !important;
  border-bottom: 13px solid transparent !important;
}

.site-footer.dji-footer {
  background: #242424 !important;
  color: rgba(255, 255, 255, .72) !important;
}

.site-footer .footer-download {
  padding: 42px 0 36px !important;
  border-bottom: 1px solid rgba(255, 255, 255, .14) !important;
  text-align: center !important;
}

.site-footer .footer-download p {
  color: rgba(255, 255, 255, .86) !important;
  font-size: 18px !important;
  margin: 0 0 16px !important;
}

.site-footer .footer-download a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 40px !important;
  padding: 0 28px !important;
  border-radius: 999px !important;
  color: #fff !important;
  text-decoration: none !important;
  background: rgba(255, 255, 255, .13) !important;
}

.site-footer .footer-mega,
.site-footer .footer-brandbar,
.site-footer .footer-legal {
  width: min(1440px, calc(100vw - 112px)) !important;
  margin-inline: auto !important;
}

.site-footer .footer-mega {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 48px !important;
  padding: 48px 0 54px !important;
}

.site-footer .footer-column h3 {
  color: #fff !important;
  font-size: 14px !important;
  margin: 0 0 18px !important;
}

.site-footer .footer-column a,
.site-footer .footer-column span {
  display: block !important;
  color: rgba(255, 255, 255, .66) !important;
  font-size: 13px !important;
  line-height: 1.9 !important;
  text-decoration: none !important;
}

.site-footer .footer-brandbar {
  display: flex !important;
  align-items: center !important;
  gap: 34px !important;
  padding: 26px 0 !important;
  border-top: 1px solid rgba(255, 255, 255, .14) !important;
}

.site-footer .footer-brandbar img {
  width: 150px !important;
  height: auto !important;
  filter: brightness(0) invert(1) !important;
}

.site-footer .footer-brandbar nav {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 20px !important;
}

.site-footer .footer-brandbar nav a {
  color: rgba(255, 255, 255, .78) !important;
  text-decoration: none !important;
}

.site-footer .footer-social {
  margin-left: auto !important;
  display: flex !important;
  gap: 12px !important;
}

.site-footer .footer-social a {
  width: 36px !important;
  height: 36px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 50% !important;
  border: 1px solid rgba(255, 255, 255, .18) !important;
  color: rgba(255, 255, 255, .86) !important;
  font-size: 12px !important;
  text-decoration: none !important;
}

.site-footer .footer-legal {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 24px !important;
  padding: 0 0 30px !important;
}

.site-footer .footer-records {
  display: flex !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  gap: 0 !important;
  white-space: nowrap !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
}

.site-footer .footer-records > * {
  flex: 0 0 auto !important;
  color: rgba(255, 255, 255, .52) !important;
  font-size: 13px !important;
  text-decoration: none !important;
}

.site-footer .footer-records > * + *::before {
  content: "|" !important;
  margin: 0 16px !important;
  color: rgba(255, 255, 255, .22) !important;
}

.site-footer .footer-locale {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  color: rgba(255, 255, 255, .80) !important;
}

@media (min-width: 1180px) and (max-height: 820px) {
  #services .infrastructure-section {
    min-height: auto !important;
    padding-top: 54px !important;
    padding-bottom: 42px !important;
  }

  #services .infra-showcase {
    height: 440px !important;
    max-height: 440px !important;
  }

  #scenarios.ai-solutions,
  #capability .capability-stage,
  #training .delivery-stage,
  #resources .resource-stage,
  #about .about-stage {
    min-height: auto !important;
    padding-top: 64px !important;
    padding-bottom: 64px !important;
  }

  #scenarios .solution-board {
    height: 480px !important;
    min-height: 480px !important;
  }
}

@media (max-width: 1180px) {
  #services .infrastructure-section,
  #capability .capability-stage,
  #training .delivery-stage,
  #resources .resource-stage,
  #about .about-stage {
    width: min(100% - 44px, 980px) !important;
  }

  #services .infra-showcase,
  #capability .capability-stage,
  #training .delivery-stage,
  #resources .resource-stage,
  #about .about-stage {
    grid-template-columns: 1fr !important;
    max-height: none !important;
  }

  #services .infra-module:first-child {
    min-height: 420px !important;
  }

  #scenarios.ai-solutions {
    grid-template-columns: 1fr !important;
    padding-inline: 24px !important;
  }

  #scenarios .solution-hero {
    max-width: 760px !important;
    text-align: left !important;
  }

  #scenarios .solution-board {
    height: auto !important;
    min-height: 0 !important;
  }
}

/* FINAL 2026-06-17: compact developer resources so all three rows feel contained. */
body section#resources.developer-resources {
  padding: clamp(30px, 3.4vw, 44px) 0 !important;
}

body section#resources .devres-stage {
  width: min(1120px, calc(100vw - 104px)) !important;
  max-width: 1120px !important;
  gap: 14px !important;
}

body section#resources .devres-hero {
  min-height: 252px !important;
  padding: clamp(20px, 2.5vw, 28px) !important;
  grid-template-columns: minmax(360px, .96fr) minmax(430px, 1.04fr) !important;
  gap: clamp(24px, 3.4vw, 40px) !important;
}

body section#resources .devres-kicker {
  margin-bottom: 10px !important;
  font-size: 13px !important;
}

body section#resources .devres-copy h2 {
  margin-bottom: 12px !important;
  padding-bottom: 4px !important;
  font-size: clamp(30px, 3vw, 42px) !important;
  line-height: 1.18 !important;
}

body section#resources .devres-copy p {
  max-width: 460px !important;
  font-size: 14px !important;
  line-height: 1.55 !important;
}

body section#resources .devres-dashboard {
  min-height: 204px !important;
}

body section#resources .devres-window {
  inset: 14px !important;
}

body section#resources .devres-screen {
  grid-template-columns: 48px 1fr !important;
}

body section#resources .devres-screen aside {
  padding: 14px 10px !important;
  gap: 10px !important;
}

body section#resources .devres-screen main {
  padding: 10px !important;
  grid-template-rows: 36px 1fr 32px !important;
  gap: 8px !important;
}

body section#resources .devres-card-row b {
  font-size: 12px !important;
  padding-left: 10px !important;
}

body section#resources .devres-chart {
  padding: 12px !important;
  gap: 10px !important;
}

body section#resources .devres-float {
  min-width: 118px !important;
  padding: 10px 12px !important;
  font-size: 12px !important;
  right: 14px !important;
}

body section#resources .devres-float-b {
  bottom: 14px !important;
}

body section#resources .devres-band {
  min-height: 170px !important;
  padding: clamp(18px, 2.1vw, 24px) !important;
  gap: clamp(20px, 2.8vw, 32px) !important;
}

body section#resources .devres-band-copy h3 {
  margin-bottom: 8px !important;
  font-size: clamp(22px, 1.8vw, 30px) !important;
}

body section#resources .devres-band-copy p {
  max-width: 460px !important;
  margin-bottom: 14px !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
}

body section#resources .devres-band-copy a {
  min-height: 34px !important;
  padding: 0 16px !important;
  font-size: 14px !important;
}

body section#resources .devres-visual,
body section#resources .devres-agent-map,
body section#resources .devres-stack {
  min-height: 128px !important;
}

body section#resources .devres-agent-map,
body section#resources .devres-stack {
  padding: 16px !important;
  gap: 8px !important;
}

body section#resources .devres-agent-map::before {
  width: 72px !important;
  height: 72px !important;
}

body section#resources .devres-agent-map span,
body section#resources .devres-agent-map strong {
  min-height: 30px !important;
  padding: 0 8px !important;
  font-size: 12px !important;
}

body section#resources .devres-agent-map strong {
  min-height: 42px !important;
}

body section#resources .devres-stack span,
body section#resources .devres-stack strong {
  min-height: 42px !important;
  padding: 0 8px !important;
  font-size: 12px !important;
}

body section#resources .devres-stack strong {
  min-height: 56px !important;
}

/* FINAL 2026-06-17 EOF: force site-wide 1190px width and breathing gaps. */
@media (min-width: 1181px) {
  body .ai-home {
    display: grid !important;
    gap: clamp(28px, 3vw, 42px) !important;
    background: #050505 !important;
  }

  body .hero-stage,
  body #services .infrastructure-section,
  body #scenarios.ai-solutions,
  body #capability .capability-stage,
  body #training .delivery-stage,
  body #resources .devres-stage,
  body #about .about-stage,
  body .footer-mega,
  body .footer-brandbar,
  body .footer-legal {
    width: min(1190px, calc(100vw - 104px)) !important;
    max-width: 1190px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
  }

  body .ai-home > .ai-section,
  body #services.ai-origin,
  body #scenarios.ai-solutions,
  body #capability.core-tech-section,
  body #training.premium-delivery,
  body #resources.developer-resources,
  body #about.premium-about {
    height: auto !important;
    min-height: 0 !important;
    padding-top: clamp(68px, 7vw, 86px) !important;
    padding-bottom: clamp(68px, 7vw, 86px) !important;
    box-sizing: border-box !important;
  }

  body #scenarios.ai-solutions {
    justify-self: center !important;
  }

  body #capability .capability-stage,
  body #training .delivery-stage {
    grid-template-columns: minmax(340px, 410px) minmax(0, 1fr) !important;
    column-gap: 48px !important;
    overflow: visible !important;
  }

  body #capability .tech-console.core-card-grid,
  body #training .delivery-track {
    width: 100% !important;
    max-width: none !important;
    justify-self: stretch !important;
  }

  body #training .delivery-track article,
  body #training .delivery-track article.is-selected,
  body #training .delivery-track article[aria-selected="true"] {
    max-width: none !important;
  }

  body #resources .devres-stage {
    gap: 18px !important;
  }

  body section#resources.developer-resources {
    padding-top: clamp(68px, 7vw, 86px) !important;
    padding-bottom: clamp(68px, 7vw, 86px) !important;
  }

  body section#resources.developer-resources .devres-stage {
    width: min(1190px, calc(100vw - 104px)) !important;
    max-width: 1190px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* FINAL 2026-06-17: site-wide 1190px width and breathing rhythm. */
:root {
  --sws-page-width-final: 1190px;
  --sws-page-gutter-final: 52px;
  --sws-section-padding-final: clamp(68px, 7vw, 86px);
  --sws-section-gap-final: clamp(28px, 3vw, 42px);
}

@media (min-width: 1181px) {
  body .ai-home {
    display: grid !important;
    gap: var(--sws-section-gap-final) !important;
    background: #050505 !important;
  }

  body .hero-stage,
  body #services .infrastructure-section,
  body #scenarios.ai-solutions,
  body #capability .capability-stage,
  body #training .delivery-stage,
  body #resources .devres-stage,
  body #about .about-stage,
  body .footer-mega,
  body .footer-brandbar,
  body .footer-legal {
    width: min(var(--sws-page-width-final), calc(100vw - var(--sws-page-gutter-final) * 2)) !important;
    max-width: var(--sws-page-width-final) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
  }

  body .ai-home > .ai-section,
  body #services.ai-origin,
  body #scenarios.ai-solutions,
  body #capability.core-tech-section,
  body #training.premium-delivery,
  body #resources.developer-resources,
  body #about.premium-about {
    height: auto !important;
    min-height: 0 !important;
    padding-top: var(--sws-section-padding-final) !important;
    padding-bottom: var(--sws-section-padding-final) !important;
    box-sizing: border-box !important;
  }

  body #scenarios.ai-solutions {
    justify-self: center !important;
  }

  body #capability .capability-stage,
  body #training .delivery-stage {
    grid-template-columns: minmax(340px, 410px) minmax(0, 1fr) !important;
    column-gap: 48px !important;
    overflow: visible !important;
  }

  body #capability .tech-console.core-card-grid,
  body #training .delivery-track {
    width: 100% !important;
    max-width: none !important;
    justify-self: stretch !important;
  }

  body #training .delivery-track article,
  body #training .delivery-track article.is-selected,
  body #training .delivery-track article[aria-selected="true"] {
    max-width: none !important;
  }

  body #resources .devres-stage {
    gap: 18px !important;
  }

  body section#resources.developer-resources,
  body .ai-home > section#resources.developer-resources {
    padding-top: clamp(68px, 7vw, 86px) !important;
    padding-bottom: clamp(68px, 7vw, 86px) !important;
  }
}

/* FINAL 2026-06-17: corrected 1190px width, explicit calc fallback. */
@media (min-width: 1181px) {
  body .hero-stage,
  body #services .infrastructure-section,
  body #scenarios.ai-solutions,
  body #capability .capability-stage,
  body #training .delivery-stage,
  body #resources .devres-stage,
  body #about .about-stage,
  body .footer-mega,
  body .footer-brandbar,
  body .footer-legal {
    width: min(1190px, calc(100vw - 104px)) !important;
    max-width: 1190px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  body section#resources.developer-resources {
    padding-top: var(--sws-section-padding-final) !important;
    padding-bottom: var(--sws-section-padding-final) !important;
  }
}

/* FINAL 2026-06-17: global page width and vertical rhythm lock. */
:root {
  --sws-page-width: 1120px;
  --sws-page-gutter: 52px;
  --sws-section-pad: clamp(44px, 5vw, 58px);
}

@media (min-width: 1181px) {
  body .hero-stage,
  body #services .infrastructure-section,
  body #scenarios.ai-solutions,
  body #capability .capability-stage,
  body #training .delivery-stage,
  body #resources .devres-stage,
  body #about .about-stage,
  body .footer-mega,
  body .footer-brandbar,
  body .footer-legal {
    width: min(var(--sws-page-width), calc(100vw - var(--sws-page-gutter) * 2)) !important;
    max-width: var(--sws-page-width) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
  }

  body .ai-section,
  body #services.ai-origin,
  body #scenarios.ai-solutions,
  body #capability.core-tech-section,
  body #training.premium-delivery,
  body #resources.developer-resources,
  body #about.premium-about {
    height: auto !important;
    min-height: 0 !important;
    padding-top: var(--sws-section-pad) !important;
    padding-bottom: var(--sws-section-pad) !important;
    box-sizing: border-box !important;
  }

  body #scenarios.ai-solutions {
    width: min(var(--sws-page-width), calc(100vw - var(--sws-page-gutter) * 2)) !important;
    max-width: var(--sws-page-width) !important;
  }

  body #capability .capability-stage,
  body #training .delivery-stage {
    grid-template-columns: minmax(320px, 380px) minmax(0, 1fr) !important;
    column-gap: 40px !important;
  }

  body #capability .tech-console.core-card-grid,
  body #training .delivery-track {
    width: 100% !important;
    max-width: none !important;
    justify-self: stretch !important;
  }

  body #training .delivery-track article,
  body #training .delivery-track article.is-selected,
  body #training .delivery-track article[aria-selected="true"] {
    max-width: none !important;
  }

  body #resources .devres-stage {
    gap: 14px !important;
  }
}

/* FINAL 2026-06-17: exact rhythm correction after compact resource rules. */
@media (min-width: 1181px) {
  body section#resources.developer-resources {
    padding-top: var(--sws-section-pad) !important;
    padding-bottom: var(--sws-section-pad) !important;
  }

  body #capability .capability-stage,
  body #training .delivery-stage {
    overflow: visible !important;
  }

  body #services .infrastructure-section h2,
  body #services .infrastructure-section h3 {
    padding-bottom: 6px !important;
  }
}

@media (max-width: 760px) {
  #services .infrastructure-section,
  #capability .capability-stage,
  #training .delivery-stage,
  #resources .resource-stage,
  #about .about-stage {
    width: min(100% - 28px, 620px) !important;
    padding-top: 52px !important;
    padding-bottom: 48px !important;
  }

  #services .infra-metrics,
  #resources .resource-tabs {
    grid-template-columns: 1fr !important;
  }

  #services .infra-module:first-child,
  #services .infra-module:not(:first-child) {
    grid-template-columns: 1fr !important;
  }

  #services .infra-visual-base {
    position: relative !important;
    right: auto !important;
    bottom: auto !important;
    margin: 20px auto 0 !important;
    width: 220px !important;
    height: 220px !important;
  }

  #services .infra-module:not(:first-child) .infra-visual {
    justify-self: start !important;
  }

  #scenarios .solution-board,
  #capability .tech-console,
  .site-footer .footer-mega {
    grid-template-columns: 1fr !important;
  }

  #scenarios .solution-card:first-child {
    grid-row: auto !important;
  }

  .site-footer .footer-brandbar,
  .site-footer .footer-legal {
    flex-direction: column !important;
    align-items: flex-start !important;
  }
}

/* 2026-05-30 rhythm25-eof: final override must remain at the true end. */
.site-nav .nav-item.is-open > .nav-link {
  color: #20f3a0 !important;
}

.site-nav .nav-item.is-open > .nav-link::after {
  width: 18px !important;
  background: #20f3a0 !important;
}

.nav-panel {
  z-index: 220 !important;
}

.nav-panel a {
  cursor: pointer !important;
}

#service-native,
#service-workflow,
#service-opc,
#service-growth,
#scenario-enterprise,
#scenario-product,
#scenario-operation,
#scenario-chain,
#scenario-education,
#scenario-public,
#tech-agent,
#tech-workflow,
#tech-knowledge,
#tech-data,
#training-cert,
#training-scene,
#training-practice,
#training-case,
#resource-console,
#resource-templates,
#resource-cases,
#about,
#certification,
#footer-contact {
  scroll-margin-top: 104px !important;
}

.is-anchor-focus {
  outline: 1px solid rgba(32, 243, 160, .55) !important;
  box-shadow: 0 0 0 5px rgba(32, 243, 160, .08), 0 0 42px rgba(32, 243, 160, .18) !important;
}

#services .infra-module:first-child .infra-visual-base {
  overflow: visible !important;
}

#services .infra-module:first-child .infra-visual-base img.infra-orb-static {
  display: none !important;
}

#services .infra-module:first-child .infra-visual-base img.infra-orb-spin {
  display: block !important;
  position: absolute !important;
  left: 50% !important;
  top: 45% !important;
  width: 88% !important;
  height: 88% !important;
  max-width: none !important;
  object-fit: contain !important;
  object-position: center !important;
  transform-origin: 50% 50% !important;
  transform: translate(-50%, -50%) rotate(0deg) !important;
  mix-blend-mode: normal !important;
  clip-path: none !important;
  filter: brightness(1.08) saturate(1.1) drop-shadow(0 0 36px rgba(32, 229, 163, .44)) !important;
  opacity: .98 !important;
  z-index: 3 !important;
  animation: swsOrbRotate25Eof 24s linear infinite !important;
}

#services .infra-visual-base::after {
  left: 50% !important;
  bottom: 7% !important;
  width: 64% !important;
  height: 14% !important;
  opacity: .55 !important;
  animation: none !important;
}

#services .infra-visual-base::before {
  display: none !important;
}

@keyframes swsOrbRotate25Eof {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

/* 2026-05-30 rhythm25: click-menu anchors and final globe-only rotation lock. */
.site-nav .nav-item.is-open > .nav-link {
  color: #20f3a0 !important;
}

.site-nav .nav-item.is-open > .nav-link::after {
  width: 18px !important;
  background: #20f3a0 !important;
}

.nav-panel {
  z-index: 220 !important;
}

.nav-panel a {
  cursor: pointer !important;
}

#service-native,
#service-workflow,
#service-opc,
#service-growth,
#scenario-enterprise,
#scenario-product,
#scenario-operation,
#scenario-chain,
#scenario-education,
#scenario-public,
#tech-agent,
#tech-workflow,
#tech-knowledge,
#tech-data,
#training-cert,
#training-scene,
#training-practice,
#training-case,
#resource-console,
#resource-templates,
#resource-cases,
#about,
#certification,
#footer-contact {
  scroll-margin-top: 104px !important;
}

.is-anchor-focus {
  outline: 1px solid rgba(32, 243, 160, .55) !important;
  box-shadow: 0 0 0 5px rgba(32, 243, 160, .08), 0 0 42px rgba(32, 243, 160, .18) !important;
}

#services .infra-module:first-child .infra-visual-base {
  overflow: visible !important;
}

#services .infra-module:first-child .infra-visual-base img.infra-orb-static {
  display: none !important;
}

#services .infra-module:first-child .infra-visual-base img.infra-orb-spin {
  display: block !important;
  position: absolute !important;
  left: 50% !important;
  top: 45% !important;
  width: 88% !important;
  height: 88% !important;
  max-width: none !important;
  object-fit: contain !important;
  object-position: center !important;
  transform-origin: 50% 50% !important;
  transform: translate(-50%, -50%) rotate(0deg) !important;
  mix-blend-mode: normal !important;
  clip-path: none !important;
  filter: brightness(1.08) saturate(1.1) drop-shadow(0 0 36px rgba(32, 229, 163, .44)) !important;
  opacity: .98 !important;
  z-index: 3 !important;
  animation: swsOrbRotate25 24s linear infinite !important;
}

#services .infra-visual-base::after {
  left: 50% !important;
  bottom: 7% !important;
  width: 64% !important;
  height: 14% !important;
  opacity: .55 !important;
  animation: none !important;
}

#services .infra-visual-base::before {
  display: none !important;
}

@keyframes swsOrbRotate25 {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

/* 2026-05-30 rhythm24: final rhythm pass, force globe-only rotation and clean section hierarchy. */
#services .infra-module:first-child .infra-visual-base img.infra-orb-static {
  display: none !important;
}

#services .infra-module:first-child .infra-visual-base img.infra-orb-spin {
  display: block !important;
  position: absolute !important;
  left: 50% !important;
  top: 45% !important;
  width: 88% !important;
  height: 88% !important;
  max-width: none !important;
  object-fit: contain !important;
  object-position: center !important;
  transform-origin: 50% 50% !important;
  transform: translate(-50%, -50%) rotate(0deg) !important;
  mix-blend-mode: normal !important;
  clip-path: none !important;
  filter: brightness(1.08) saturate(1.1) drop-shadow(0 0 36px rgba(32, 229, 163, .44)) !important;
  opacity: .98 !important;
  z-index: 3 !important;
  animation: swsOrbRotate24 24s linear infinite !important;
}

#services .infra-visual-base::after {
  left: 50% !important;
  bottom: 7% !important;
  width: 64% !important;
  height: 14% !important;
  opacity: .55 !important;
  animation: none !important;
}

#services .infra-visual-base::before {
  display: none !important;
}

@keyframes swsOrbRotate24 {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

.hero .about-cinema-mark,
.hero .about-video-frame,
.hero .about-video-placeholder {
  display: none !important;
}

.home-section,
.infrastructure-section,
.ai-solutions,
.capability-stage,
.delivery-stage,
.resource-stage,
.about-stage {
  box-sizing: border-box !important;
}

#services {
  background:
    radial-gradient(circle at 72% 16%, rgba(32, 229, 163, .16), transparent 30%),
    radial-gradient(circle at 18% 78%, rgba(32, 229, 163, .08), transparent 34%),
    linear-gradient(180deg, #03120b 0%, #020604 100%) !important;
}

#scenarios {
  background:
    radial-gradient(circle at 86% 8%, rgba(32, 229, 163, .10), transparent 28%),
    linear-gradient(135deg, #020604 0%, #07110d 62%, #020604 100%) !important;
}

#capability {
  background:
    radial-gradient(circle at 70% 24%, rgba(32, 229, 163, .08), transparent 34%),
    linear-gradient(180deg, #04111e 0%, #020a12 100%) !important;
}

#training {
  background:
    radial-gradient(circle at 20% 20%, rgba(32, 229, 163, .08), transparent 32%),
    linear-gradient(180deg, #080909 0%, #030403 100%) !important;
}

#resources {
  background:
    radial-gradient(circle at 74% 64%, rgba(32, 229, 163, .11), transparent 34%),
    linear-gradient(180deg, #03120b 0%, #020604 100%) !important;
}

#about {
  background:
    radial-gradient(circle at 52% 52%, rgba(32, 229, 163, .10), transparent 26%),
    linear-gradient(180deg, #020604 0%, #06140d 100%) !important;
}

#services .infra-module,
#scenarios .solution-card,
#capability .core-tech-card,
#training .delivery-track article,
#resources .resource-panels article {
  border-radius: 12px !important;
}

#services .infra-copy h3,
#scenarios .solution-content h3,
#capability .core-tech-card h3,
#training .delivery-track h3,
#resources .resource-panels h3 {
  font-size: clamp(24px, 1.55vw, 32px) !important;
  line-height: 1.18 !important;
}

#services .infra-copy p,
#scenarios .solution-content p,
#capability .core-tech-card p,
#training .delivery-track p,
#resources .resource-panels p {
  font-size: clamp(14px, .86vw, 17px) !important;
  line-height: 1.72 !important;
}

#services .infra-hero,
#scenarios .solution-hero,
#capability .capability-copy,
#training .stage-head,
#resources .resource-main,
#about .about-narrative-center {
  position: relative !important;
  z-index: 2 !important;
}

.site-footer .footer-records {
  display: flex !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  gap: 0 !important;
  white-space: nowrap !important;
}

.site-footer .footer-records > * {
  display: inline-flex !important;
  align-items: center !important;
}

/* 2026-05-30 nav-detail: click-open secondary menus and precise submenu targets. */
.site-nav .nav-item.is-open > .nav-link {
  color: #20f3a0 !important;
}

.site-nav .nav-item.is-open > .nav-link::after {
  width: 18px !important;
  background: #20f3a0 !important;
}

.nav-panel {
  z-index: 120 !important;
}

.nav-panel a {
  cursor: pointer !important;
}

#service-native,
#service-workflow,
#service-opc,
#service-growth,
#scenario-enterprise,
#scenario-product,
#scenario-operation,
#scenario-chain,
#scenario-education,
#scenario-public,
#tech-agent,
#tech-workflow,
#tech-knowledge,
#tech-data,
#training-cert,
#training-scene,
#training-practice,
#training-case,
#resource-console,
#resource-templates,
#resource-cases,
#certification,
#footer-contact {
  scroll-margin-top: 104px !important;
}

.is-anchor-focus {
  outline: 1px solid rgba(32, 243, 160, .78) !important;
  box-shadow:
    0 0 0 1px rgba(32, 243, 160, .20),
    0 0 38px rgba(32, 243, 160, .22) !important;
}

.solution-card.is-anchor-focus,
.core-tech-card.is-anchor-focus,
.delivery-track article.is-anchor-focus,
.resource-panels article.is-anchor-focus,
.infra-module.is-anchor-focus {
  transform: translateY(-3px) !important;
  border-color: rgba(32, 243, 160, .72) !important;
}

/* rhythm23 hotfix: override older high-specificity orb animation rules. */
#services .infra-module:first-child .infra-visual-base img.infra-orb-static {
  display: none !important;
}

#services .infra-module:first-child .infra-visual-base img.infra-orb-spin {
  display: block !important;
  position: absolute !important;
  left: 50% !important;
  top: 44% !important;
  width: 92% !important;
  height: 92% !important;
  max-width: none !important;
  object-fit: contain !important;
  object-position: 50% 50% !important;
  transform-origin: 50% 50% !important;
  transform: translate(-50%, -50%) rotate(0deg) !important;
  mix-blend-mode: normal !important;
  clip-path: none !important;
  filter: brightness(1.08) saturate(1.1) drop-shadow(0 0 36px rgba(32,229,163,.44)) !important;
  opacity: .98 !important;
  z-index: 2 !important;
  animation: swsOrbRotate22 22s linear infinite !important;
}

/* 2026-05-30 rhythm22: rebuild homepage rhythm and remove template feel. */
:root {
  --sws-black: #010805;
  --sws-green-black: #061a10;
  --sws-blue-black: #04111e;
  --sws-panel: rgba(7, 26, 17, .72);
  --sws-line: rgba(32, 229, 163, .18);
  --sws-green: #20e5a3;
  --sws-soft: #8bbfaa;
  --sws-title: #f4fff9;
}

html,
body {
  background: var(--sws-black) !important;
}

.ai-home {
  background: var(--sws-black) !important;
}

.ai-home .ai-section {
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate !important;
}

.ai-home .ai-section > * {
  position: relative !important;
  z-index: 1 !important;
}

.hero .about-cinema-mark,
.hero .about-cinema-mark *,
.hero .about-video-frame,
.hero .about-scanline,
.hero .about-play {
  display: none !important;
}

.ai-home h2,
.ai-home h3,
.ai-home p,
.ai-home span,
.ai-home a,
.ai-home button,
.site-footer {
  font-family: "PingFang SC", "Helvetica Neue", Arial, sans-serif !important;
}

#services .infra-hero h2,
#scenarios .solution-hero h2,
#capability .capability-copy h2,
#training .stage-head h2,
#resources .resource-main h2,
#about .about-narrative-center h2 {
  font-size: clamp(34px, 3.15vw, 52px) !important;
  line-height: 1.16 !important;
  letter-spacing: 0 !important;
  font-weight: 650 !important;
  color: var(--sws-title) !important;
}

#services .infra-hero p,
#scenarios .solution-subtitle,
#capability .capability-copy p,
#training .stage-head p,
#resources .resource-main p,
#about .about-narrative-center p {
  font-size: clamp(15px, 1.15vw, 18px) !important;
  line-height: 1.8 !important;
  color: rgba(139, 191, 170, .86) !important;
}

#services.ai-origin {
  min-height: calc(100svh - 84px) !important;
  background:
    radial-gradient(circle at 50% 12%, rgba(32, 229, 163, .10), transparent 32%),
    radial-gradient(circle at 74% 46%, rgba(32, 229, 163, .13), transparent 42%),
    linear-gradient(180deg, #010805 0%, #061a10 54%, #010805 100%) !important;
}

#services.ai-origin::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  opacity: .42 !important;
  background:
    linear-gradient(115deg, transparent 0 38%, rgba(32, 229, 163, .12) 39%, transparent 42%),
    linear-gradient(22deg, transparent 0 54%, rgba(32, 229, 163, .08) 55%, transparent 58%),
    radial-gradient(circle at 16% 22%, rgba(159, 225, 203, .34) 0 2px, transparent 3px),
    radial-gradient(circle at 78% 24%, rgba(159, 225, 203, .24) 0 2px, transparent 3px),
    radial-gradient(circle at 63% 76%, rgba(159, 225, 203, .22) 0 2px, transparent 3px);
  filter: blur(.2px) !important;
  animation: swsSectionDrift22 18s ease-in-out infinite alternate !important;
  z-index: 0 !important;
}

#services.ai-origin::after,
#scenarios.ai-solutions::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
  opacity: .16 !important;
  background-image: radial-gradient(circle, rgba(255,255,255,.22) 0 1px, transparent 1.4px) !important;
  background-size: 10px 10px !important;
  z-index: 0 !important;
}

@keyframes swsSectionDrift22 {
  from { transform: translate3d(-1.2%, -.8%, 0) scale(1); }
  to { transform: translate3d(1.1%, .9%, 0) scale(1.03); }
}

#services .services-depth-field {
  display: block !important;
  opacity: .26 !important;
  filter: blur(.4px) saturate(1.2) !important;
}

#services .infrastructure-section {
  width: min(1480px, calc(100vw - 104px)) !important;
  min-height: calc(100svh - 84px) !important;
  margin: 0 auto !important;
  padding: clamp(56px, 6.2vh, 80px) 0 clamp(42px, 5vh, 62px) !important;
  display: grid !important;
  grid-template-rows: auto 1fr !important;
  align-content: center !important;
  gap: clamp(26px, 3.2vh, 38px) !important;
}

#services .infra-hero {
  max-width: 820px !important;
  margin: 0 auto !important;
  padding: 0 !important;
  text-align: center !important;
}

#services .infra-pill {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  height: 38px !important;
  padding: 0 28px !important;
  border: 1px solid rgba(32, 229, 163, .55) !important;
  border-radius: 999px !important;
  color: #9fe1cb !important;
  background: rgba(32, 229, 163, .035) !important;
  box-shadow: 0 0 38px rgba(32,229,163,.08) !important;
}

#services .infra-hero h2 {
  margin: 18px 0 12px !important;
  white-space: nowrap !important;
}

#services .infra-hero p {
  max-width: 720px !important;
  margin: 0 auto !important;
  color: #5dcaa5 !important;
  font-weight: 500 !important;
}

#services .infra-metrics {
  display: flex !important;
  justify-content: center !important;
  gap: 0 !important;
  margin: clamp(20px, 2.4vh, 28px) auto 0 !important;
  padding-top: 18px !important;
  max-width: 620px !important;
  border-top: 1px solid rgba(32, 229, 163, .18) !important;
}

#services .infra-metrics span {
  flex: 1 1 0 !important;
  display: grid !important;
  gap: 4px !important;
  min-width: 0 !important;
  padding: 0 22px !important;
  border-right: 1px solid rgba(255,255,255,.12) !important;
  color: rgba(139,191,170,.74) !important;
  font-size: 12px !important;
  line-height: 1.2 !important;
  text-align: center !important;
}

#services .infra-metrics span:last-child {
  border-right: 0 !important;
}

#services .infra-metrics strong {
  color: #d4f5e9 !important;
  font-size: clamp(22px, 2vw, 36px) !important;
  line-height: 1 !important;
}

#services .infra-showcase {
  height: min(560px, calc(100svh - 310px)) !important;
  min-height: 500px !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1.18fr) minmax(420px, .92fr) !important;
  grid-template-rows: repeat(3, minmax(0, 1fr)) !important;
  gap: 18px 22px !important;
  align-items: stretch !important;
}

#services .infra-module {
  position: relative !important;
  min-height: 0 !important;
  border-radius: 14px !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  background:
    radial-gradient(circle at 78% 32%, rgba(32,229,163,.16), transparent 38%),
    linear-gradient(135deg, rgba(255,255,255,.055), rgba(255,255,255,.012) 46%, rgba(32,229,163,.04)),
    rgba(5, 18, 12, .78) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 28px 78px rgba(0,0,0,.38) !important;
  overflow: hidden !important;
  transition: transform .35s ease, border-color .35s ease, box-shadow .35s ease !important;
}

#services .infra-module:hover,
#services .infra-module:focus-visible {
  transform: translateY(-3px) !important;
  border-color: rgba(32,229,163,.46) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10), 0 28px 88px rgba(32,229,163,.10) !important;
}

#services .infra-module:first-child {
  grid-row: 1 / 4 !important;
  display: grid !important;
  grid-template-columns: minmax(0, .56fr) minmax(280px, .44fr) !important;
  align-items: center !important;
  padding: clamp(34px, 3.4vw, 54px) !important;
}

#services .infra-module:not(:first-child) {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 126px !important;
  align-items: center !important;
  gap: 20px !important;
  padding: 26px 30px !important;
}

#services .infra-copy {
  position: relative !important;
  z-index: 2 !important;
  min-width: 0 !important;
  max-width: 560px !important;
}

#services .infra-copy span {
  display: inline-flex !important;
  align-items: center !important;
  gap: 14px !important;
  margin-bottom: 18px !important;
  color: #5dcaa5 !important;
  font-size: 14px !important;
  font-weight: 650 !important;
  letter-spacing: .03em !important;
}

#services .infra-copy span::after {
  content: "" !important;
  width: 44px !important;
  height: 1px !important;
  background: rgba(32,229,163,.48) !important;
}

#services .infra-copy h3 {
  margin: 0 0 20px !important;
  color: #fff !important;
  font-size: clamp(28px, 2.45vw, 42px) !important;
  line-height: 1.12 !important;
  letter-spacing: 0 !important;
  font-weight: 650 !important;
  white-space: normal !important;
}

#services .infra-module:not(:first-child) .infra-copy h3 {
  color: #d4f5e9 !important;
  font-size: clamp(24px, 1.8vw, 32px) !important;
  white-space: nowrap !important;
}

#services .infra-copy p {
  margin: 0 !important;
  max-width: 520px !important;
  color: #8bbfaa !important;
  font-size: clamp(14px, 1vw, 16px) !important;
  line-height: 1.75 !important;
}

#services .infra-copy ul {
  display: grid !important;
  gap: 12px !important;
  margin: 26px 0 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

#services .infra-copy li {
  position: relative !important;
  padding-left: 26px !important;
  color: rgba(255,255,255,.90) !important;
  font-size: 14px !important;
  line-height: 1.45 !important;
}

#services .infra-copy li::before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  top: .45em !important;
  width: 9px !important;
  height: 9px !important;
  border-radius: 50% !important;
  border: 2px solid var(--sws-green) !important;
  box-shadow: 0 0 16px rgba(32,229,163,.4) !important;
}

#services .infra-visual,
#services .infra-visual img {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

#services .infra-visual-base {
  position: relative !important;
  justify-self: end !important;
  align-self: end !important;
  width: min(300px, 95%) !important;
  height: 300px !important;
  margin: 0 !important;
  overflow: visible !important;
  border-radius: 0 !important;
  filter: drop-shadow(0 0 42px rgba(32,229,163,.25)) !important;
}

#services .infra-visual-base::before {
  display: none !important;
}

#services .infra-visual-base::after {
  content: "" !important;
  position: absolute !important;
  left: 52% !important;
  bottom: 12% !important;
  width: 64% !important;
  height: 14% !important;
  border-radius: 50% !important;
  transform: translateX(-50%) !important;
  background: radial-gradient(ellipse at center, rgba(32,229,163,.32), rgba(32,229,163,.07) 52%, transparent 74%) !important;
  filter: blur(2px) !important;
  opacity: .68 !important;
  z-index: 1 !important;
}

#services .infra-visual-base img.infra-orb-static {
  display: none !important;
}

#services .infra-visual-base img.infra-orb-spin {
  display: block !important;
  position: absolute !important;
  left: 50% !important;
  top: 44% !important;
  width: 92% !important;
  height: 92% !important;
  object-fit: contain !important;
  object-position: 50% 50% !important;
  transform-origin: 50% 50% !important;
  transform: translate(-50%, -50%) rotate(0deg) !important;
  mix-blend-mode: normal !important;
  clip-path: none !important;
  filter: brightness(1.08) saturate(1.1) drop-shadow(0 0 36px rgba(32,229,163,.44)) !important;
  opacity: .98 !important;
  z-index: 2 !important;
  animation: swsOrbRotate22 22s linear infinite !important;
}

@keyframes swsOrbRotate22 {
  0% { transform: translate(-50%, -50%) rotate(0deg); }
  100% { transform: translate(-50%, -50%) rotate(360deg); }
}

#services .infra-module:not(:first-child) .infra-visual {
  justify-self: end !important;
  align-self: center !important;
  width: 118px !important;
  height: 118px !important;
  display: grid !important;
  place-items: center !important;
  opacity: .98 !important;
}

#services .infra-module:not(:first-child) .infra-visual img {
  width: 112px !important;
  height: 112px !important;
  object-fit: contain !important;
  object-position: center !important;
  mix-blend-mode: normal !important;
  filter: brightness(1.08) saturate(1.1) drop-shadow(0 0 26px rgba(32,229,163,.36)) !important;
}

#scenarios.ai-solutions {
  min-height: calc(100svh - 84px) !important;
  padding: clamp(62px, 7vh, 86px) max(44px, calc((100vw - 1500px) / 2 + 56px)) clamp(54px, 6vh, 76px) !important;
  display: grid !important;
  grid-template-columns: minmax(300px, .30fr) minmax(0, .70fr) !important;
  gap: clamp(42px, 5.2vw, 78px) !important;
  align-items: center !important;
  background:
    linear-gradient(110deg, rgba(0,0,0,.88) 0 30%, rgba(6,24,15,.78) 68%, rgba(0,0,0,.92)),
    #050705 !important;
}

#scenarios.ai-solutions::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background:
    linear-gradient(135deg, transparent 0 42%, rgba(32,229,163,.10) 43%, transparent 47%),
    radial-gradient(circle at 86% 18%, rgba(32,229,163,.13), transparent 24%),
    radial-gradient(circle at 12% 68%, rgba(32,229,163,.08), transparent 28%) !important;
  opacity: .9 !important;
}

#scenarios .solution-hero {
  max-width: 460px !important;
  padding: 0 !important;
}

#scenarios .solution-badge,
#training .section-mark,
#resources .section-mark,
#about .section-mark,
#capability .core-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  min-height: 34px !important;
  padding: 0 18px !important;
  border: 1px solid rgba(32,229,163,.62) !important;
  border-radius: 999px !important;
  color: #9fe1cb !important;
  background: rgba(32,229,163,.035) !important;
  font-size: 13px !important;
  letter-spacing: .04em !important;
}

#scenarios .solution-hero h2 {
  margin: 28px 0 20px !important;
  max-width: 460px !important;
  font-size: clamp(38px, 4.2vw, 66px) !important;
  line-height: 1.06 !important;
  text-wrap: balance !important;
}

#scenarios .solution-subtitle {
  max-width: 420px !important;
  margin: 0 0 26px !important;
}

#scenarios .solution-stats {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px 12px !important;
}

#scenarios .solution-stats span {
  height: 36px !important;
  padding: 0 16px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(32,229,163,.24) !important;
  background: rgba(255,255,255,.018) !important;
  color: rgba(139,191,170,.86) !important;
  font-size: 12px !important;
}

#scenarios .solution-board {
  display: grid !important;
  grid-template-columns: minmax(0, 1.36fr) repeat(2, minmax(0, 1fr)) !important;
  grid-template-rows: repeat(2, minmax(0, 1fr)) !important;
  gap: 16px !important;
  height: min(560px, calc(100svh - 165px)) !important;
  min-height: 500px !important;
}

#scenarios .solution-card {
  min-height: 0 !important;
  padding: 22px !important;
  border-radius: 14px !important;
  background:
    linear-gradient(145deg, rgba(32,229,163,.085), rgba(255,255,255,.014) 52%, rgba(255,255,255,.018)),
    rgba(4, 21, 13, .84) !important;
  border: 1px solid rgba(32,229,163,.20) !important;
  display: flex !important;
  align-items: flex-end !important;
  overflow: hidden !important;
}

#scenarios .solution-card:first-child {
  grid-row: span 2 !important;
  padding: 30px !important;
}

#scenarios .solution-visual {
  top: 22px !important;
  left: 22px !important;
  width: 74px !important;
  height: 74px !important;
  opacity: .98 !important;
}

#scenarios .solution-card:first-child .solution-visual {
  width: 126px !important;
  height: 126px !important;
}

#scenarios .solution-content {
  padding-top: 84px !important;
}

#scenarios .solution-card:not(:first-child) .solution-content {
  padding-top: 58px !important;
}

#scenarios .solution-content span {
  color: #20e5a3 !important;
  font-size: 13px !important;
  letter-spacing: .18em !important;
}

#scenarios .solution-content h3 {
  margin: 14px 0 10px !important;
  color: #fff !important;
  font-size: clamp(21px, 1.6vw, 28px) !important;
  line-height: 1.22 !important;
}

#scenarios .solution-content p {
  color: #8bbfaa !important;
  font-size: 14px !important;
  line-height: 1.65 !important;
  -webkit-line-clamp: 3 !important;
}

#capability.core-tech-section {
  background:
    radial-gradient(circle at 28% 28%, rgba(32,229,163,.09), transparent 28%),
    linear-gradient(180deg, #04111e 0%, #06121f 48%, #04111e 100%) !important;
}

#capability .capability-stage {
  width: min(1500px, calc(100vw - 112px)) !important;
  min-height: calc(100svh - 84px) !important;
  margin: 0 auto !important;
  padding: clamp(72px, 8vh, 100px) 0 !important;
  display: grid !important;
  grid-template-columns: minmax(420px, .42fr) minmax(0, .58fr) !important;
  gap: clamp(52px, 6vw, 98px) !important;
  align-items: center !important;
}

#capability .capability-copy {
  max-width: 760px !important;
}

#capability .capability-copy h2 {
  max-width: 800px !important;
  margin: 30px 0 24px !important;
  font-size: clamp(38px, 3.45vw, 56px) !important;
  line-height: 1.12 !important;
  text-wrap: balance !important;
}

#capability .capability-copy h2 br {
  display: none !important;
}

#capability .capability-copy p {
  max-width: 660px !important;
  margin-bottom: 30px !important;
}

#capability .tech-console {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 18px !important;
  padding: 24px !important;
  border-radius: 18px !important;
  background:
    radial-gradient(circle at 30% 8%, rgba(32,229,163,.12), transparent 30%),
    rgba(5, 23, 30, .74) !important;
  border: 1px solid rgba(255,255,255,.07) !important;
}

#capability .core-tech-card {
  min-height: 220px !important;
  padding: 28px !important;
  border-radius: 14px !important;
  background: rgba(2, 31, 19, .84) !important;
}

#capability .tech-icon {
  width: 58px !important;
  height: 58px !important;
  margin-bottom: 22px !important;
  stroke-width: 1.45 !important;
}

#capability .core-tech-card span {
  color: rgba(32,229,163,.48) !important;
  font-size: 13px !important;
}

#capability .core-tech-card h3 {
  font-size: clamp(22px, 1.7vw, 28px) !important;
}

#capability .core-tech-card p,
#capability .core-tech-card em {
  max-width: 100% !important;
  overflow: visible !important;
}

#training.premium-delivery {
  background:
    radial-gradient(circle at 72% 50%, rgba(32,229,163,.08), transparent 32%),
    linear-gradient(180deg, #0b0d0c 0%, #050806 100%) !important;
}

#training .delivery-stage,
#resources .resource-stage,
#about .about-stage {
  width: min(1500px, calc(100vw - 112px)) !important;
  min-height: calc(100svh - 84px) !important;
  margin: 0 auto !important;
  padding: clamp(70px, 8vh, 100px) 0 !important;
  display: grid !important;
  gap: clamp(52px, 6vw, 92px) !important;
  align-items: center !important;
}

#training .delivery-stage {
  grid-template-columns: minmax(350px, .36fr) minmax(0, .64fr) !important;
}

#training .stage-head {
  max-width: 540px !important;
}

#training .stage-head h2 {
  margin: 28px 0 18px !important;
}

#training .delivery-track {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 16px !important;
}

#training .delivery-track article {
  min-height: 178px !important;
  padding: 24px !important;
  grid-template-columns: 58px minmax(0, 1fr) !important;
  column-gap: 20px !important;
  background: rgba(255,255,255,.025) !important;
}

#training .delivery-icon {
  width: 54px !important;
  height: 54px !important;
}

#training .delivery-track h3 {
  font-size: 24px !important;
  line-height: 1.2 !important;
}

#resources.premium-resources {
  background:
    radial-gradient(circle at 18% 40%, rgba(32,229,163,.08), transparent 34%),
    linear-gradient(180deg, #061a10 0%, #020906 100%) !important;
}

#resources .resource-stage {
  grid-template-columns: minmax(360px, .38fr) minmax(0, .62fr) !important;
}

#resources .resource-panels {
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr) !important;
  grid-template-rows: repeat(2, minmax(0, 1fr)) !important;
  gap: 16px !important;
}

#resources .resource-panels article {
  min-height: 180px !important;
  border-radius: 14px !important;
  background: rgba(4, 23, 14, .76) !important;
}

#resources .resource-panels article:first-child {
  grid-row: span 2 !important;
}

#resources .resource-icon {
  width: 58px !important;
  height: 58px !important;
}

#about.premium-about {
  background:
    radial-gradient(circle at 72% 44%, rgba(32,229,163,.10), transparent 34%),
    linear-gradient(180deg, #05120c 0%, #010805 100%) !important;
}

#about .about-stage {
  grid-template-columns: minmax(360px, .40fr) minmax(0, .60fr) !important;
}

#about .about-narrative-center h2 {
  font-size: clamp(40px, 4vw, 68px) !important;
  line-height: 1.12 !important;
}

#about .about-cinema {
  min-height: min(520px, 44vw) !important;
  border-radius: 16px !important;
  background:
    radial-gradient(circle at 50% 48%, rgba(32,229,163,.15), transparent 20%),
    linear-gradient(135deg, rgba(255,255,255,.07), rgba(255,255,255,.012)),
    #030806 !important;
}

.site-footer.dji-footer {
  background:
    radial-gradient(circle at 84% 18%, rgba(32,229,163,.07), transparent 28%),
    #242424 !important;
}

.site-footer .footer-mega,
.site-footer .footer-brandbar,
.site-footer .footer-legal {
  width: min(1500px, calc(100vw - 112px)) !important;
}

.site-footer .footer-download {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 28px !important;
  min-height: 118px !important;
  border-bottom: 1px solid rgba(255,255,255,.14) !important;
}

.site-footer .footer-mega {
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 54px !important;
}

.site-footer .footer-records {
  display: flex !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  white-space: nowrap !important;
  gap: 0 !important;
  overflow-x: auto !important;
  padding-bottom: 2px !important;
}

.site-footer .footer-records::-webkit-scrollbar {
  display: none !important;
}

.site-footer .footer-records a,
.site-footer .footer-records span {
  display: inline-flex !important;
  align-items: center !important;
  flex: 0 0 auto !important;
  color: rgba(255,255,255,.52) !important;
  font-size: 13px !important;
  text-decoration: none !important;
}

.site-footer .footer-records > * + *::before {
  content: "|" !important;
  display: inline-block !important;
  margin: 0 16px !important;
  color: rgba(255,255,255,.24) !important;
}

.site-footer .footer-records .footer-copyright::before,
.site-footer .footer-records .footer-tagline::before {
  content: "|" !important;
  margin: 0 16px !important;
}

@media (min-width: 1181px) and (max-height: 840px) {
  #services .infrastructure-section {
    padding-top: 46px !important;
    padding-bottom: 38px !important;
    gap: 22px !important;
  }

  #services .infra-metrics {
    display: none !important;
  }

  #services .infra-showcase {
    height: 476px !important;
    min-height: 476px !important;
  }

  #scenarios.ai-solutions,
  #capability .capability-stage,
  #training .delivery-stage,
  #resources .resource-stage,
  #about .about-stage {
    min-height: auto !important;
    padding-top: 58px !important;
    padding-bottom: 58px !important;
  }

  #scenarios .solution-board {
    height: 486px !important;
    min-height: 486px !important;
  }

  #capability .core-tech-card {
    min-height: 190px !important;
  }
}

@media (max-width: 1180px) {
  #services .infrastructure-section,
  #capability .capability-stage,
  #training .delivery-stage,
  #resources .resource-stage,
  #about .about-stage {
    width: min(100% - 48px, 980px) !important;
    min-height: auto !important;
  }

  #services .infra-showcase,
  #scenarios.ai-solutions,
  #capability .capability-stage,
  #training .delivery-stage,
  #resources .resource-stage,
  #about .about-stage {
    grid-template-columns: 1fr !important;
  }

  #services .infra-showcase {
    height: auto !important;
    min-height: 0 !important;
    grid-template-rows: auto !important;
  }

  #services .infra-module:first-child,
  #services .infra-module:not(:first-child) {
    grid-template-columns: minmax(0, 1fr) 132px !important;
    min-height: 210px !important;
  }

  #services .infra-visual-base {
    width: 160px !important;
    height: 160px !important;
    align-self: center !important;
  }

  #scenarios.ai-solutions {
    padding-inline: 24px !important;
  }

  #scenarios .solution-board {
    height: auto !important;
    min-height: 0 !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  #scenarios .solution-card:first-child {
    grid-row: auto !important;
  }
}

@media (max-width: 760px) {
  #services .infrastructure-section,
  #capability .capability-stage,
  #training .delivery-stage,
  #resources .resource-stage,
  #about .about-stage {
    width: min(100% - 28px, 620px) !important;
    padding-top: 52px !important;
    padding-bottom: 50px !important;
  }

  #services .infra-hero h2 {
    white-space: normal !important;
  }

  #services .infra-metrics,
  #capability .tech-console,
  #training .delivery-track,
  #resources .resource-panels,
  #scenarios .solution-board,
  .site-footer .footer-mega {
    grid-template-columns: 1fr !important;
  }

  #services .infra-module:first-child,
  #services .infra-module:not(:first-child) {
    grid-template-columns: 1fr !important;
  }

  #services .infra-module:first-child {
    padding: 28px !important;
  }

  #services .infra-visual-base {
    justify-self: center !important;
    width: 210px !important;
    height: 210px !important;
    margin-top: 18px !important;
  }

  #services .infra-module:not(:first-child) .infra-visual {
    justify-self: start !important;
  }

  #scenarios .solution-card:first-child .solution-visual,
  #scenarios .solution-visual {
    width: 64px !important;
    height: 64px !important;
  }

  #scenarios .solution-content,
  #scenarios .solution-card:not(:first-child) .solution-content {
    padding-top: 58px !important;
  }

  #capability .capability-copy h2 br {
    display: block !important;
  }

  .site-footer .footer-download,
  .site-footer .footer-brandbar,
  .site-footer .footer-legal {
    flex-direction: column !important;
    align-items: flex-start !important;
  }
}

/* 2026-05-30 executive rhythm reset.
   One final layer for the current homepage DOM: distinct chapters, tighter hierarchy,
   fewer template-like gaps, and real section-to-section visual rhythm. */
@media (min-width: 1024px) {
  :root {
    --sws-page-x: clamp(40px, 5.4vw, 96px);
    --sws-container: min(1360px, calc(100% - (var(--sws-page-x) * 2)));
    --sws-section-title: clamp(34px, 3.15vw, 48px);
    --sws-card-title: clamp(22px, 1.65vw, 28px);
    --sws-copy: clamp(13px, .92vw, 15px);
    --sws-muted: #8bbfaa;
    --sws-green: #20f3a0;
    --sws-soft-green: #5dcaa5;
    --sws-radius: 12px;
  }

  body {
    background: #020605 !important;
  }

  .ai-home {
    background:
      linear-gradient(180deg, #020605 0%, #020605 24%, #04111e 47%, #0b0b0a 67%, #06140d 100%) !important;
  }

  .ai-section {
    position: relative !important;
    min-height: 100svh !important;
    overflow: hidden !important;
  }

  .hero-intelligence-core,
  .hero-metrics,
  .agent-slide .hero-content::before,
  .agent-slide .hero-content::after,
  .hero-slide.agent-slide::after {
    display: none !important;
    content: none !important;
  }

  .infra-hero h2,
  .solution-hero h2,
  .capability-copy h2,
  .stage-head h2,
  .resource-main h2,
  .about-narrative-center h2 {
    font-size: var(--sws-section-title) !important;
    line-height: 1.16 !important;
    letter-spacing: 0 !important;
    font-weight: 650 !important;
  }

  .infra-hero p,
  .solution-subtitle,
  .capability-copy p,
  .stage-head p,
  .resource-main p,
  .about-narrative-center p,
  .infra-copy p,
  .solution-card p,
  .core-tech-card p,
  .core-tech-card em,
  .delivery-track article p,
  .resource-panels article p {
    font-size: var(--sws-copy) !important;
    line-height: 1.68 !important;
    color: var(--sws-muted) !important;
  }

  #services.ai-origin {
    height: 100svh !important;
    min-height: 100svh !important;
    padding: 44px 0 42px !important;
    background:
      radial-gradient(circle at 72% 18%, rgba(32, 243, 160, .12), transparent 28%),
      radial-gradient(circle at 10% 78%, rgba(32, 243, 160, .08), transparent 30%),
      linear-gradient(180deg, #020605 0%, #06140d 100%) !important;
  }

  #services.ai-origin::before {
    opacity: .34 !important;
    background-size: 22px 22px !important;
  }

  #services .services-depth-field {
    opacity: .55 !important;
  }

  #services .infrastructure-section {
    width: var(--sws-container) !important;
    height: calc(100svh - 86px) !important;
    min-height: 0 !important;
    margin: 0 auto !important;
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
    gap: 22px !important;
  }

  #services .infra-hero {
    max-width: 780px !important;
    margin: 0 auto !important;
    text-align: center !important;
    padding: 0 !important;
    min-height: 0 !important;
  }

  #services .infra-pill {
    margin-bottom: 10px !important;
    padding: 6px 22px !important;
    border-radius: 999px !important;
  }

  #services .infra-hero h2 {
    margin: 0 0 8px !important;
    color: #fff !important;
  }

  #services .infra-hero p {
    max-width: 680px !important;
    margin: 0 auto !important;
    color: var(--sws-soft-green) !important;
  }

  #services .infra-metrics {
    display: none !important;
  }

  #services .infra-showcase {
    height: 100% !important;
    min-height: 0 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr) !important;
    grid-template-rows: repeat(3, minmax(0, 1fr)) !important;
    gap: 18px !important;
  }

  #services .infra-module {
    min-height: 0 !important;
    border-radius: var(--sws-radius) !important;
    background:
      radial-gradient(circle at 74% 56%, rgba(32, 243, 160, .16), transparent 42%),
      rgba(255, 255, 255, .025) !important;
    border: 1px solid rgba(157, 225, 203, .18) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 18px 46px rgba(0,0,0,.26) !important;
    overflow: hidden !important;
    transition: transform .35s ease, border-color .35s ease, box-shadow .35s ease !important;
  }

  #services .infra-module:hover,
  #services .infra-module:focus-visible {
    transform: translateY(-4px) !important;
    border-color: rgba(32, 243, 160, .55) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 26px 70px rgba(0, 0, 0, .34) !important;
  }

  #services .infra-module:first-child {
    grid-column: 1 !important;
    grid-row: 1 / span 3 !important;
    display: grid !important;
    grid-template-columns: minmax(0, .6fr) minmax(220px, .4fr) !important;
    align-items: center !important;
    padding: 28px 34px !important;
  }

  #services .infra-module:not(:first-child) {
    grid-column: 2 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 126px !important;
    align-items: center !important;
    gap: 18px !important;
    padding: 22px 30px !important;
  }

  #services .infra-copy {
    min-width: 0 !important;
  }

  #services .infra-copy span {
    margin-bottom: 10px !important;
    font-size: 13px !important;
    color: var(--sws-soft-green) !important;
    letter-spacing: .04em !important;
  }

  #services .infra-copy h3 {
    margin: 0 0 12px !important;
    color: #d4f5e9 !important;
    font-size: var(--sws-card-title) !important;
    line-height: 1.12 !important;
    white-space: normal !important;
  }

  #services .infra-module:first-child .infra-copy h3 {
    color: #fff !important;
    font-size: clamp(28px, 2.4vw, 38px) !important;
  }

  #services .infra-copy p {
    max-width: 540px !important;
    margin: 0 !important;
  }

  #services .infra-module:first-child .infra-copy ul {
    margin-top: 22px !important;
    gap: 10px !important;
  }

  #services .infra-copy li {
    color: rgba(255,255,255,.9) !important;
    font-size: var(--sws-copy) !important;
  }

  #services .infra-module:first-child .infra-visual-base {
    position: relative !important;
    inset: auto !important;
    justify-self: end !important;
    align-self: end !important;
    width: clamp(220px, 18vw, 270px) !important;
    height: clamp(220px, 18vw, 270px) !important;
    overflow: visible !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  #services .infra-module:first-child .infra-visual-base::before {
    content: "" !important;
    position: absolute !important;
    left: 18% !important;
    top: 15% !important;
    width: 66% !important;
    height: 66% !important;
    border-radius: 50% !important;
    background:
      repeating-linear-gradient(90deg, rgba(255,255,255,.28) 0 1px, transparent 1px 16px),
      radial-gradient(circle at 38% 32%, rgba(255,255,255,.28), transparent 32%) !important;
    mix-blend-mode: screen !important;
    opacity: .28 !important;
    transform-origin: center !important;
    animation: swsGlobeLatitude 8s linear infinite !important;
    pointer-events: none !important;
    z-index: 3 !important;
  }

  #services .infra-module:first-child .infra-visual-base::after {
    content: "" !important;
    position: absolute !important;
    left: 10% !important;
    top: 8% !important;
    width: 82% !important;
    height: 82% !important;
    border-radius: 50% !important;
    background: radial-gradient(circle at 68% 28%, rgba(255,255,255,.26), transparent 18%) !important;
    mix-blend-mode: screen !important;
    opacity: .46 !important;
    animation: swsGlobeLight 4.6s ease-in-out infinite alternate !important;
    pointer-events: none !important;
    z-index: 4 !important;
  }

  @keyframes swsGlobeLatitude {
    0% { transform: translateX(-18%) rotate(0deg); opacity: .20; }
    50% { opacity: .34; }
    100% { transform: translateX(18%) rotate(360deg); opacity: .20; }
  }

  @keyframes swsGlobeLight {
    from { transform: translateX(-4%) scale(.98); opacity: .28; }
    to { transform: translateX(5%) scale(1.03); opacity: .52; }
  }

  #services .infra-orb-spin {
    display: none !important;
  }

  #services .infra-orb-static,
  #services .infra-module:first-child .infra-visual-base img {
    position: absolute !important;
    inset: 0 !important;
    z-index: 2 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    mix-blend-mode: screen !important;
  }

  #services .infra-module:not(:first-child) .infra-visual {
    width: 118px !important;
    height: 118px !important;
    min-width: 118px !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
  }

  #services .infra-module:not(:first-child) .infra-visual img {
    width: 118px !important;
    height: 118px !important;
    object-fit: contain !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    mix-blend-mode: screen !important;
  }

  #scenarios.ai-solutions {
    height: 100svh !important;
    min-height: 100svh !important;
    padding: 54px var(--sws-page-x) !important;
    display: grid !important;
    grid-template-columns: minmax(300px, .34fr) minmax(0, .66fr) !important;
    align-items: center !important;
    gap: clamp(32px, 4vw, 64px) !important;
    background:
      radial-gradient(circle at 88% 20%, rgba(32, 243, 160, .11), transparent 28%),
      linear-gradient(135deg, #020605 0%, #060806 56%, #0b0b0a 100%) !important;
  }

  #scenarios .solution-glow,
  #scenarios .solution-divider {
    display: none !important;
  }

  #scenarios .solution-hero {
    margin: 0 !important;
    max-width: 420px !important;
    text-align: left !important;
  }

  #scenarios .solution-badge {
    margin-bottom: 20px !important;
  }

  #scenarios .solution-hero h2 {
    max-width: 420px !important;
    margin: 0 0 16px !important;
    color: #fff !important;
    text-align: left !important;
    font-size: clamp(36px, 3.2vw, 48px) !important;
    line-height: 1.16 !important;
  }

  #scenarios .solution-subtitle {
    max-width: 390px !important;
    margin: 0 !important;
    text-align: left !important;
  }

  #scenarios .solution-stats {
    margin-top: 24px !important;
    justify-content: flex-start !important;
    gap: 10px !important;
    flex-wrap: wrap !important;
  }

  #scenarios .solution-stats span {
    height: 34px !important;
    padding: 0 14px !important;
    border-radius: 999px !important;
    font-size: 12px !important;
  }

  #scenarios .solution-stats strong {
    font-size: 18px !important;
  }

  #scenarios .solution-board {
    height: min(520px, calc(100svh - 108px)) !important;
    min-height: 430px !important;
    display: grid !important;
    grid-template-columns: minmax(210px, 1.05fr) repeat(3, minmax(132px, .75fr)) !important;
    grid-template-rows: repeat(2, minmax(0, 1fr)) !important;
    gap: 14px !important;
  }

  #scenarios .solution-card {
    min-height: 0 !important;
    padding: 20px 22px !important;
    border-radius: var(--sws-radius) !important;
    background:
      radial-gradient(circle at 78% 16%, rgba(32, 243, 160, .12), transparent 42%),
      rgba(255,255,255,.018) !important;
    border: 1px solid rgba(32,243,160,.20) !important;
    overflow: hidden !important;
  }

  #scenarios .solution-card:first-child {
    grid-column: 1 !important;
    grid-row: 1 / span 2 !important;
  }

  #scenarios .solution-card:nth-child(2) { grid-column: 2 !important; grid-row: 1 !important; }
  #scenarios .solution-card:nth-child(3) { grid-column: 3 / span 2 !important; grid-row: 1 !important; }
  #scenarios .solution-card:nth-child(4) { grid-column: 1 / span 2 !important; grid-row: 2 !important; }
  #scenarios .solution-card:nth-child(5) { grid-column: 3 !important; grid-row: 2 !important; }
  #scenarios .solution-card:nth-child(6) { grid-column: 4 !important; grid-row: 2 !important; display: grid !important; }

  #scenarios .solution-visual {
    position: absolute !important;
    right: 18px !important;
    top: 16px !important;
    width: 86px !important;
    height: 86px !important;
    display: grid !important;
    place-items: center !important;
    opacity: .9 !important;
    background: transparent !important;
  }

  #scenarios .solution-card:first-child .solution-visual {
    width: 128px !important;
    height: 128px !important;
    right: 24px !important;
    top: 24px !important;
  }

  #scenarios .solution-icon {
    width: 100% !important;
    height: 100% !important;
    stroke: var(--sws-green) !important;
    stroke-width: 2 !important;
  }

  #scenarios .solution-content {
    position: relative !important;
    z-index: 1 !important;
    display: flex !important;
    min-height: 100% !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
    padding-right: 86px !important;
  }

  #scenarios .solution-card:first-child .solution-content {
    padding-right: 0 !important;
  }

  #scenarios .solution-content span {
    font-size: 13px !important;
    color: var(--sws-soft-green) !important;
    margin-bottom: 10px !important;
  }

  #scenarios .solution-card h3 {
    margin: 0 0 8px !important;
    color: #fff !important;
    font-size: clamp(20px, 1.45vw, 26px) !important;
    line-height: 1.18 !important;
  }

  #scenarios .solution-card p {
    margin: 0 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }

  #capability.core-tech-section {
    height: 100svh !important;
    min-height: 100svh !important;
    padding: 64px 0 !important;
    background:
      radial-gradient(circle at 72% 45%, rgba(24, 97, 150, .22), transparent 36%),
      linear-gradient(180deg, #04111e 0%, #061626 52%, #03101c 100%) !important;
  }

  #capability .capability-stage {
    width: var(--sws-container) !important;
    height: calc(100svh - 128px) !important;
    min-height: 0 !important;
    margin: 0 auto !important;
    display: grid !important;
    grid-template-columns: minmax(390px, .43fr) minmax(0, .57fr) !important;
    align-items: center !important;
    gap: clamp(36px, 5vw, 76px) !important;
  }

  #capability .capability-copy {
    max-width: 620px !important;
  }

  #capability .capability-copy h2 {
    max-width: 650px !important;
    margin: 0 0 20px !important;
    color: #fff !important;
    font-size: clamp(34px, 3.05vw, 46px) !important;
    line-height: 1.18 !important;
    word-spacing: 0 !important;
    white-space: normal !important;
  }

  #capability .capability-copy h2 br {
    display: block !important;
  }

  #capability .capability-copy p {
    max-width: 560px !important;
    margin-bottom: 30px !important;
  }

  #capability .core-cta {
    border-radius: var(--sws-radius) !important;
  }

  #capability .tech-console.core-card-grid {
    height: min(540px, calc(100svh - 150px)) !important;
    min-height: 450px !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 16px !important;
    padding: 16px !important;
    border-radius: 18px !important;
  }

  #capability .core-tech-card {
    min-height: 0 !important;
    padding: 24px !important;
    border-radius: var(--sws-radius) !important;
    display: flex !important;
    flex-direction: column !important;
  }

  #capability .tech-icon {
    width: 46px !important;
    height: 46px !important;
    margin-bottom: 18px !important;
  }

  #capability .core-tech-card h3 {
    margin: 0 0 8px !important;
    color: #fff !important;
    font-size: clamp(20px, 1.45vw, 26px) !important;
    line-height: 1.2 !important;
  }

  #capability .core-tech-card p {
    margin: 0 0 10px !important;
  }

  #capability .core-tech-card em {
    display: block !important;
    margin-top: auto !important;
    padding-top: 10px !important;
    border-top: 1px solid rgba(32,243,160,.16) !important;
    max-height: none !important;
    overflow: visible !important;
    font-size: 12px !important;
  }

  #training.ai-delivery {
    height: 100svh !important;
    min-height: 100svh !important;
    padding: 64px 0 !important;
    background:
      radial-gradient(circle at 28% 18%, rgba(32, 243, 160, .06), transparent 26%),
      linear-gradient(180deg, #0b0b0a 0%, #090a09 100%) !important;
  }

  #training .delivery-stage {
    width: var(--sws-container) !important;
    height: calc(100svh - 128px) !important;
    min-height: 0 !important;
    margin: 0 auto !important;
    display: grid !important;
    grid-template-columns: minmax(350px, .38fr) minmax(0, .62fr) !important;
    gap: clamp(38px, 5vw, 84px) !important;
    align-items: center !important;
  }

  #training .stage-head {
    text-align: left !important;
    max-width: 520px !important;
    margin: 0 !important;
  }

  #training .stage-head h2 {
    margin: 0 0 18px !important;
    color: #fff !important;
  }

  #training .delivery-track {
    position: relative !important;
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 14px !important;
    min-height: 360px !important;
    align-items: stretch !important;
  }

  #training .delivery-track::before {
    content: "" !important;
    position: absolute !important;
    left: 5% !important;
    right: 5% !important;
    top: 50% !important;
    height: 1px !important;
    background: linear-gradient(90deg, transparent, rgba(32,243,160,.52), transparent) !important;
  }

  #training .delivery-track article {
    position: relative !important;
    min-height: 0 !important;
    padding: 24px !important;
    border-radius: var(--sws-radius) !important;
    background: rgba(255,255,255,.024) !important;
    border: 1px solid rgba(255,255,255,.12) !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
  }

  #training .delivery-icon {
    position: absolute !important;
    left: 24px !important;
    top: 24px !important;
    width: 42px !important;
    height: 42px !important;
    stroke: var(--sws-green) !important;
  }

  #training .delivery-track article h3 {
    margin: 0 0 8px !important;
    font-size: clamp(20px, 1.45vw, 26px) !important;
    line-height: 1.18 !important;
  }

  #training .delivery-track article p {
    margin: 0 !important;
  }

  #resources.ai-resources {
    height: 100svh !important;
    min-height: 100svh !important;
    padding: 64px 0 !important;
    background:
      radial-gradient(circle at 72% 50%, rgba(32, 243, 160, .10), transparent 34%),
      linear-gradient(180deg, #06140d 0%, #081510 100%) !important;
  }

  #resources .resource-stage {
    width: var(--sws-container) !important;
    height: calc(100svh - 128px) !important;
    min-height: 0 !important;
    margin: 0 auto !important;
    display: grid !important;
    grid-template-columns: minmax(360px, .4fr) minmax(0, .6fr) !important;
    gap: clamp(36px, 5vw, 84px) !important;
    align-items: center !important;
  }

  #resources .resource-main {
    min-height: 0 !important;
    max-width: 580px !important;
  }

  #resources .resource-main h2 {
    margin: 0 0 20px !important;
    color: #fff !important;
  }

  #resources .resource-tabs {
    margin-top: 28px !important;
    gap: 10px !important;
  }

  #resources .resource-panels {
    display: grid !important;
    grid-template-rows: repeat(3, minmax(0, 1fr)) !important;
    gap: 14px !important;
    min-height: 420px !important;
  }

  #resources .resource-panels article {
    position: relative !important;
    min-height: 0 !important;
    padding: 24px 28px 24px 88px !important;
    border-radius: var(--sws-radius) !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
  }

  #resources .resource-icon {
    position: absolute !important;
    left: 28px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 40px !important;
    height: 40px !important;
  }

  #about.ai-about {
    height: 100svh !important;
    min-height: 100svh !important;
    padding: 64px 0 !important;
    background:
      radial-gradient(circle at 78% 38%, rgba(255,255,255,.06), transparent 32%),
      linear-gradient(180deg, #0c0c0c 0%, #060807 100%) !important;
  }

  #about .about-stage {
    width: var(--sws-container) !important;
    height: calc(100svh - 128px) !important;
    min-height: 0 !important;
    margin: 0 auto !important;
    display: grid !important;
    grid-template-columns: minmax(400px, .42fr) minmax(0, .58fr) !important;
    gap: clamp(46px, 6vw, 96px) !important;
    align-items: center !important;
  }

  #about .about-narrative-center {
    text-align: left !important;
    max-width: 640px !important;
  }

  #about .about-narrative-center h2 {
    margin: 0 0 22px !important;
    color: #fff !important;
    font-size: clamp(36px, 3.2vw, 50px) !important;
  }

  #about .about-narrative-center p {
    max-width: 590px !important;
    margin: 0 !important;
  }

  #about .about-video-frame {
    height: min(430px, calc(100svh - 170px)) !important;
    min-height: 320px !important;
    border-radius: var(--sws-radius) !important;
    cursor: pointer !important;
  }

  .dji-footer {
    background: #222323 !important;
    padding: 54px 0 30px !important;
  }

  .dji-footer .footer-download,
  .dji-footer .footer-mega,
  .dji-footer .footer-brandbar,
  .dji-footer .footer-legal {
    width: var(--sws-container) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .dji-footer .footer-download {
    padding-bottom: 34px !important;
    border-bottom: 1px solid rgba(255,255,255,.14) !important;
  }

  .dji-footer .footer-mega {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 34px !important;
    padding: 32px 0 !important;
  }

  .dji-footer .footer-column h3 {
    color: rgba(255,255,255,.88) !important;
  }

  .dji-footer .footer-column a,
  .dji-footer .footer-column span {
    color: rgba(255,255,255,.62) !important;
  }

  .dji-footer .footer-brandbar {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) auto !important;
    gap: 26px !important;
    align-items: center !important;
    padding-top: 24px !important;
    border-top: 1px solid rgba(255,255,255,.12) !important;
  }

  .footer-social {
    display: flex !important;
    gap: 10px !important;
  }

  .footer-social a {
    width: 30px !important;
    height: 30px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    color: transparent !important;
  }

  .footer-social a::before {
    color: #fff !important;
    font-size: 13px !important;
  }

  .dji-footer .footer-legal {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 18px !important;
    padding-top: 20px !important;
  }

  .footer-records {
    display: flex !important;
    align-items: center !important;
    gap: 22px !important;
    flex-wrap: nowrap !important;
    min-width: 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
  }

  .footer-records a,
  .footer-records span {
    display: inline-flex !important;
    align-items: center !important;
    margin: 0 !important;
    white-space: nowrap !important;
    color: rgba(255,255,255,.48) !important;
  }

  .footer-records .footer-copyright,
  .footer-records .footer-tagline {
    display: inline-flex !important;
  }

  .footer-records .footer-copyright::before,
  .footer-records .footer-tagline::before {
    content: "|" !important;
    margin-right: 22px !important;
    color: rgba(255,255,255,.18) !important;
  }
}

@media (min-width: 1024px) and (max-width: 1360px) {
  :root {
    --sws-page-x: 34px;
    --sws-container: min(1180px, calc(100% - 68px));
    --sws-section-title: clamp(31px, 3vw, 40px);
    --sws-card-title: clamp(20px, 1.7vw, 25px);
    --sws-copy: 13px;
  }

  #services.ai-origin,
  #scenarios.ai-solutions,
  #capability.core-tech-section,
  #training.ai-delivery,
  #resources.ai-resources,
  #about.ai-about {
    padding-top: 48px !important;
    padding-bottom: 48px !important;
  }

  #services .infrastructure-section,
  #capability .capability-stage,
  #training .delivery-stage,
  #resources .resource-stage,
  #about .about-stage {
    height: calc(100svh - 96px) !important;
  }

  #services .infra-showcase {
    gap: 14px !important;
  }

  #services .infra-module:first-child {
    padding: 24px 28px !important;
    grid-template-columns: minmax(0, .62fr) minmax(190px, .38fr) !important;
  }

  #services .infra-module:first-child .infra-visual-base {
    width: 215px !important;
    height: 215px !important;
  }

  #services .infra-module:not(:first-child) {
    grid-template-columns: minmax(0, 1fr) 94px !important;
    padding: 18px 22px !important;
  }

  #services .infra-module:not(:first-child) .infra-visual,
  #services .infra-module:not(:first-child) .infra-visual img {
    width: 94px !important;
    height: 94px !important;
    min-width: 94px !important;
  }

  #scenarios.ai-solutions {
    grid-template-columns: minmax(260px, .32fr) minmax(0, .68fr) !important;
    gap: 28px !important;
  }

  #scenarios .solution-hero h2 {
    font-size: clamp(32px, 3.2vw, 42px) !important;
  }

  #scenarios .solution-board {
    height: min(480px, calc(100svh - 96px)) !important;
    min-height: 400px !important;
    gap: 12px !important;
  }

  #scenarios .solution-card {
    padding: 18px !important;
  }

  #scenarios .solution-visual {
    width: 64px !important;
    height: 64px !important;
    right: 14px !important;
    top: 14px !important;
  }

  #capability .capability-stage {
    grid-template-columns: minmax(350px, .4fr) minmax(0, .6fr) !important;
  }

  #capability .capability-copy h2 {
    font-size: clamp(32px, 3.05vw, 42px) !important;
  }

  #capability .tech-console.core-card-grid {
    height: min(500px, calc(100svh - 120px)) !important;
    min-height: 420px !important;
  }

  #capability .core-tech-card {
    padding: 20px !important;
  }

  #training .delivery-track {
    min-height: 320px !important;
  }

  #resources .resource-panels {
    min-height: 370px !important;
  }
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  color: var(--text);
  background: #f7faf8;
  font-family: "SF Pro Display", "SF Pro Text", "Helvetica Neue", Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  line-height: 1.6;
  letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}

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

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

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

.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 20;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  padding: 0 max(24px, calc((100vw - 1280px) / 2));
  background: rgba(3, 6, 6, 0.20);
  border-bottom: 1px solid rgba(255, 255, 255, 0.055);
  backdrop-filter: blur(22px) saturate(130%);
}

.brand-zone {
  display: flex;
  align-items: center;
  min-width: 160px;
  flex: 0 0 160px;
}

.brand {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 160px;
  height: 44px;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
}

.brand img {
  width: 160px;
  height: 40px;
  object-fit: contain;
}

.site-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(34px, 3.6vw, 58px);
  margin: 0 auto;
  color: rgba(255, 255, 255, 0.78);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0;
}

.mobile-only {
  display: none;
}

.site-nav a {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 72px;
  white-space: nowrap;
  transition: color .22s ease;
}

.site-nav span {
  display: none;
}

.site-nav a:hover {
  color: #fff;
}

.site-nav a::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 17px;
  width: 0;
  height: 1px;
  background: rgba(255, 255, 255, .78);
  transform: translateX(-50%);
  transition: width .22s ease;
}

.site-nav a:hover::after {
  width: 18px;
}

.header-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 28px;
  flex: 0 0 126px;
}

.lang-switch,
.contact-ghost,
.console-button,
.console-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 400;
  white-space: nowrap;
}

.lang-switch {
  width: 30px;
  min-height: 30px;
  color: rgba(255, 255, 255, .82);
  font-size: 20px;
  line-height: 1;
}

.contact-ghost {
  padding: 0 15px;
  color: var(--green);
  border: 1px solid rgba(11, 74, 53, .34);
  font-weight: 400;
}

.console-menu {
  position: relative;
}

.console-button {
  padding: 0 18px;
  border: 0;
  color: #fff;
  background: rgba(22, 138, 91, .88);
  cursor: pointer;
}

.console-link {
  color: rgba(255, 255, 255, .82);
  font-weight: 400;
  transition: color .22s ease;
}

.console-link:hover {
  color: #fff;
}

.console-dropdown {
  display: none;
  position: absolute;
  right: 0;
  top: calc(100% + 12px);
  width: 150px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255,255,255,.96);
  box-shadow: var(--shadow);
}

.console-menu:hover .console-dropdown,
.console-menu:focus-within .console-dropdown {
  display: block;
}

.console-dropdown a {
  display: block;
  padding: 10px 11px;
  border-radius: 6px;
  color: #26342e;
  font-size: 13px;
  font-weight: 700;
}

.console-dropdown a:hover {
  background: #eef6f1;
  color: var(--green);
}

.mobile-action-nav {
  display: none;
}

.nav-toggle {
  display: none;
  width: 42px;
  height: 42px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  padding: 9px;
}

.nav-toggle span {
  display: block;
  height: 2px;
  margin: 5px 0;
  background: var(--green);
}

.hero {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  color: #fff;
  background:
    radial-gradient(circle at 75% 58%, rgba(244, 244, 238, .16), transparent 18%),
    radial-gradient(circle at 83% 72%, rgba(255, 182, 92, .10), transparent 24%),
    radial-gradient(circle at 42% 38%, rgba(70, 119, 142, .16), transparent 35%),
    linear-gradient(180deg, #040607 0%, #081016 52%, #030404 100%);
  transition: background .7s ease;
}

.hero--agent {
  background:
    linear-gradient(90deg, rgba(0,0,0,.34), rgba(0,0,0,.06) 56%, rgba(0,0,0,.14)),
    url("./assets/hero-ai-road.webp") center / cover no-repeat,
    #030608;
}

.hero--cert {
  background:
    radial-gradient(circle at 72% 44%, rgba(36, 63, 55, .22), transparent 30%),
    radial-gradient(circle at 52% 108%, rgba(255, 255, 255, .035), transparent 34%),
    linear-gradient(145deg, #0d1012 0%, #050607 48%, #020303 100%);
}

.hero--workflow {
  background:
    radial-gradient(circle at 78% 46%, rgba(73, 210, 170, .16), transparent 30%),
    radial-gradient(circle at 56% 100%, rgba(160, 190, 210, .08), transparent 34%),
    linear-gradient(145deg, #070b0e 0%, #0a1013 48%, #030405 100%);
}

.hero-slides {
  position: relative;
  z-index: 1;
  min-height: 100vh;
}

.hero-slide {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  padding: 110px 0 54px;
  opacity: 0;
  visibility: hidden;
  transform: translateX(22px);
  transition: opacity .7s ease, transform .7s ease, visibility .7s ease;
}

.hero-slide::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity .7s ease;
  pointer-events: none;
}

.agent-slide::before {
  background:
    linear-gradient(90deg, rgba(0,0,0,.68) 0%, rgba(0,0,0,.34) 34%, rgba(0,0,0,.04) 70%),
    linear-gradient(180deg, rgba(0,0,0,.16) 0%, transparent 42%, rgba(0,0,0,.22) 100%);
}

.cert-slide::before {
  background:
    radial-gradient(circle at 72% 44%, rgba(255,255,255,.055), transparent 32%),
    linear-gradient(90deg, rgba(0,0,0,.36), transparent 46%),
    repeating-radial-gradient(circle at 20% 30%, rgba(255,255,255,.018) 0 1px, transparent 1px 4px);
  background-size: auto, auto, 5px 5px;
  opacity: .85;
}

.workflow-slide::before {
  background:
    linear-gradient(90deg, rgba(0,0,0,.54) 0%, rgba(0,0,0,.18) 45%, rgba(0,0,0,.06) 100%),
    radial-gradient(circle at 76% 52%, rgba(255,255,255,.06), transparent 30%);
}

.hero-slide.is-active {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
}

.hero-slide.is-active::before {
  opacity: 1;
}

.agent-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  mix-blend-mode: screen;
  transition: opacity .7s ease, filter .7s ease;
}

.hero--cert .agent-canvas {
  opacity: 0;
  filter: hue-rotate(58deg) saturate(1.35) contrast(1.18);
}

.hero--workflow .agent-canvas {
  opacity: 0;
}

.hero--agent .agent-canvas {
  opacity: .62;
  filter: saturate(1.22) contrast(1.14);
}

.hero-overlay {
  position: absolute;
  inset: 0;
}

.hero-overlay {
  background:
    linear-gradient(90deg, rgba(3, 4, 4, .44) 0%, rgba(3, 4, 4, .08) 46%, rgba(3, 4, 4, .26) 100%),
    radial-gradient(circle at 76% 58%, rgba(255, 255, 255, .10), transparent 38%),
    linear-gradient(180deg, rgba(4, 6, 7, .08) 0%, rgba(4, 6, 7, .48) 100%);
  pointer-events: none;
}

.hero--agent .hero-overlay {
  background:
    linear-gradient(90deg, rgba(2, 3, 4, .48) 0%, rgba(2, 3, 4, .06) 55%, rgba(2, 3, 4, .18) 100%),
    linear-gradient(180deg, rgba(4, 6, 7, .18) 0%, rgba(4, 6, 7, .08) 48%, rgba(4, 6, 7, .56) 100%);
}

.hero--cert .hero-overlay {
  background:
    linear-gradient(90deg, rgba(3, 4, 5, .58) 0%, rgba(3, 4, 5, .08) 54%, rgba(3, 4, 5, .22) 100%),
    linear-gradient(180deg, rgba(5, 7, 8, .08) 0%, rgba(5, 7, 8, .62) 100%);
}

.hero--workflow .hero-overlay {
  background:
    linear-gradient(90deg, rgba(3, 5, 6, .62) 0%, rgba(3, 5, 6, .14) 48%, rgba(3, 5, 6, .20) 100%),
    linear-gradient(180deg, rgba(5, 7, 8, .10) 0%, rgba(5, 7, 8, .58) 100%);
}

.hero::after {
  content: "";
  position: absolute;
  right: 4vw;
  bottom: -18vh;
  z-index: 0;
  width: min(820px, 58vw);
  height: 34vh;
  background:
    radial-gradient(ellipse at center, rgba(255, 232, 196, .20), rgba(120, 180, 170, .08) 36%, transparent 70%),
    linear-gradient(180deg, rgba(255,255,255,.05), transparent 64%);
  filter: blur(8px);
  opacity: .72;
  transform: perspective(900px) rotateX(68deg);
  pointer-events: none;
}

.hero--cert::after {
  right: 4vw;
  bottom: -24vh;
  width: min(760px, 58vw);
  background:
    radial-gradient(ellipse at center, rgba(255, 255, 255, .11), rgba(167, 243, 208, .035) 34%, transparent 72%),
    linear-gradient(180deg, rgba(255,255,255,.04), transparent 64%);
  opacity: .58;
}

.hero--workflow::after {
  right: -4vw;
  bottom: -26vh;
  width: min(920px, 66vw);
  height: 40vh;
  background:
    radial-gradient(ellipse at center, rgba(170, 210, 220, .16), rgba(71, 205, 165, .055) 34%, transparent 72%),
    linear-gradient(180deg, rgba(255,255,255,.05), transparent 64%);
  opacity: .64;
}

.hero-stage {
  position: relative;
  display: grid;
  align-items: center;
  justify-items: start;
  min-height: calc(100vh - 164px);
}

.hero-content {
  width: min(620px, 50vw);
  max-width: 620px;
  text-align: left;
  transform: translateY(12px);
}

.eyebrow,
.section-kicker {
  margin: 0 0 14px;
  color: var(--green-2);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.hero .eyebrow {
  color: var(--green);
}

.hero .eyebrow.glow {
  display: block;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: rgba(255, 255, 255, .56);
  letter-spacing: .22em;
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

h1 {
  max-width: 680px;
  margin-bottom: 24px;
  color: #fff;
  font-size: clamp(34px, 3.65vw, 56px);
  line-height: 1.14;
  font-weight: 680;
  letter-spacing: 0;
}

.hero-en {
  max-width: 720px;
  margin-bottom: 18px;
  color: #0b4a35;
  font-size: 25px;
  line-height: 1.4;
  font-weight: 800;
}

.hero-copy {
  max-width: 760px;
  margin: 0 0 42px;
  color: rgba(255, 255, 255, .68);
  font-size: 19px;
  line-height: 1.5;
}

.hero-copy.en-copy {
  max-width: 760px;
  margin-top: -18px;
  font-size: 15px;
  line-height: 1.65;
  color: #6a7771;
}

.agent-terminal {
  position: relative;
  min-height: 470px;
  padding: 0;
  border: 1px solid rgba(11, 74, 53, .20);
  border-radius: 22px;
  background: linear-gradient(145deg, rgba(4, 18, 14, .86), rgba(8, 39, 30, .74));
  box-shadow:
    0 34px 80px rgba(11, 74, 53, .22),
    inset 0 1px 0 rgba(255, 255, 255, .16);
  overflow: hidden;
  backdrop-filter: blur(20px);
  transform: perspective(1200px) rotateY(-5deg) rotateX(2deg);
}

.agent-terminal::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(180deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 44px 44px;
  opacity: .35;
}

.terminal-top,
.terminal-body,
.terminal-status {
  position: relative;
  z-index: 1;
}

.terminal-top {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 54px;
  padding: 0 18px;
  border-bottom: 1px solid rgba(255, 255, 255, .10);
  color: rgba(255, 255, 255, .62);
  font-size: 13px;
}

.terminal-top span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255,255,255,.34);
}

.terminal-top span:first-child { background: #ef7f7f; }
.terminal-top span:nth-child(2) { background: #e8c66b; }
.terminal-top span:nth-child(3) { background: #6ee7b7; }

.terminal-top strong {
  margin-left: 8px;
  font-weight: 600;
}

.terminal-body {
  display: grid;
  gap: 18px;
  padding: 42px 34px 30px;
  color: rgba(255, 255, 255, .86);
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  font-size: 16px;
  line-height: 1.7;
}

.terminal-body p {
  width: 0;
  max-width: 100%;
  margin: 0;
  overflow: hidden;
  white-space: nowrap;
  animation: typeLine 1.6s steps(34, end) forwards;
}

.terminal-body p:nth-child(2) { animation-delay: 1.4s; }
.terminal-body p:nth-child(3) { animation-delay: 3.0s; }
.terminal-body p:nth-child(4) { animation-delay: 4.8s; }
.terminal-body p:nth-child(5) { animation-delay: 6.4s; }

.terminal-body span {
  color: #86efac;
}

.terminal-cursor {
  display: inline-block;
  width: 9px;
  height: 17px;
  margin-left: 4px;
  background: #86efac;
  vertical-align: -3px;
  animation: blink .8s steps(1) infinite;
}

.terminal-status {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  padding: 0 34px 34px;
}

.terminal-status span {
  padding: 7px 10px;
  border: 1px solid rgba(134, 239, 172, .20);
  border-radius: 999px;
  background: rgba(134, 239, 172, .08);
  color: rgba(220, 252, 231, .78);
  font-size: 12px;
  font-weight: 700;
}

@keyframes typeLine {
  from { width: 0; }
  to { width: 100%; }
}

@keyframes blink {
  50% { opacity: 0; }
}

@keyframes floatNode {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(18px, -18px, 0); }
}

@keyframes pulseLine {
  0%, 100% { opacity: .18; }
  50% { opacity: .56; }
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 0;
}

.button {
  border: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  min-width: 150px;
  padding: 0 28px;
  border-radius: 4px;
  font-family: inherit;
  font-weight: 600;
  cursor: pointer;
}

.button.primary {
  color: #fff;
  background: linear-gradient(135deg, #18a86d, #08794f);
  box-shadow: 0 20px 46px rgba(22, 138, 91, 0.34);
}

.hero-learn {
  position: relative;
  min-width: 172px;
  color: #fff;
  border: 1px solid rgba(255,255,255,.72);
  background: rgba(255,255,255,.02);
  box-shadow: none;
}

.hero-learn::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 5px;
  background: #9be848;
}

.hero-learn::after {
  content: ">";
  margin-left: 14px;
  color: rgba(255,255,255,.86);
}

.hero-arrows {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
}

.hero-arrow {
  position: absolute;
  top: 50%;
  width: 42px;
  height: 68px;
  padding: 0;
  border: 0;
  background: transparent;
  transform: translateY(-50%);
  cursor: pointer;
  pointer-events: auto;
  opacity: .66;
  transition: opacity .22s ease, transform .22s ease;
}

.hero-arrow:hover {
  opacity: 1;
}

.hero-arrow-prev {
  left: clamp(-10px, -.2vw, -2px);
}

.hero-arrow-next {
  right: clamp(-10px, -.2vw, -2px);
}

.hero-arrow::before {
  content: "";
  position: absolute;
  top: 50%;
  width: 18px;
  height: 18px;
  border-top: 2px solid rgba(255,255,255,.92);
  border-left: 2px solid rgba(255,255,255,.92);
  border-radius: 1px 0 0 0;
  filter: drop-shadow(0 0 8px rgba(255,255,255,.12));
  transition: border-color .22s ease, filter .22s ease;
}

.hero-arrow-prev::before {
  left: 14px;
  transform: translateY(-50%) rotate(-45deg);
}

.hero-arrow-next::before {
  right: 14px;
  transform: translateY(-50%) rotate(135deg);
}

.hero-arrow:hover::before {
  border-color: #9be848;
  filter: drop-shadow(0 0 10px rgba(155, 232, 72, .26));
}

.hero-arrow-prev:hover {
  transform: translate(-3px, -50%);
}

.hero-arrow-next:hover {
  transform: translate(3px, -50%);
}

.button.secondary {
  color: rgba(255, 255, 255, .82);
  border: 1px solid rgba(255, 255, 255, .34);
  background: rgba(255,255,255,.02);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.03);
}

.cert-hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding: 108px 0 72px;
  color: #fff;
  background:
    radial-gradient(circle at 72% 38%, rgba(26, 178, 116, .26), transparent 28%),
    radial-gradient(circle at 22% 70%, rgba(29, 78, 216, .13), transparent 34%),
    linear-gradient(180deg, #030504 0%, #07110d 54%, #040706 100%);
}

.cert-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(180deg, rgba(255,255,255,.03) 1px, transparent 1px);
  background-size: 96px 96px;
  mask-image: linear-gradient(90deg, transparent 0%, #000 34%, #000 100%);
  opacity: .34;
}

.cert-glow {
  position: absolute;
  right: 4vw;
  bottom: -18vh;
  width: min(860px, 62vw);
  height: 42vh;
  background: radial-gradient(ellipse at center, rgba(34, 197, 94, .22), rgba(34, 197, 94, .06) 40%, transparent 72%);
  filter: blur(10px);
  transform: perspective(900px) rotateX(68deg);
}

.cert-stage {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(520px, .95fr) minmax(420px, 1fr);
  align-items: center;
  gap: 54px;
}

.cert-slide-stage {
  grid-template-columns: minmax(500px, .86fr) minmax(480px, 1fr);
  gap: 44px;
}

.hero-cert-visual {
  width: 100%;
}

.cert-slide .cert-kicker {
  color: #a7f3d0;
  text-shadow:
    0 0 14px rgba(34, 197, 94, .36),
    0 0 34px rgba(34, 197, 94, .16);
}

.cert-slide .cert-content h2 {
  color: transparent;
  background:
    linear-gradient(96deg, #ffffff 0%, #e9fff5 24%, #45f0aa 42%, #f4d28b 62%, #ffffff 82%, #b6c9c1 100%);
  background-size: 260% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: none;
  filter: drop-shadow(0 22px 48px rgba(0, 0, 0, .42));
  animation: certTitleShine 5.6s ease-in-out infinite;
}

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

.cert-content {
  max-width: 660px;
}

.cert-kicker {
  margin-bottom: 18px;
  color: rgba(167, 243, 208, .86);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: .16em;
}

.cert-content h2 {
  margin-bottom: 22px;
  color: #fff;
  font-size: clamp(34px, 3.28vw, 50px);
  line-height: 1.16;
  font-weight: 680;
}

.cert-content p {
  max-width: 560px;
  margin-bottom: 34px;
  color: rgba(255, 255, 255, .64);
  font-size: 19px;
  line-height: 1.6;
}

.cert-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.workflow-stage {
  grid-template-columns: minmax(500px, .8fr) minmax(560px, 1fr);
  gap: 48px;
}

.workflow-content {
  position: relative;
  z-index: 2;
  max-width: 640px;
}

.workflow-content h2 {
  margin-bottom: 22px;
  color: #fff;
  font-size: clamp(34px, 3.65vw, 56px);
  line-height: 1.14;
  font-weight: 680;
  letter-spacing: 0;
  text-shadow: 0 24px 60px rgba(0, 0, 0, .42);
}

.workflow-content p {
  color: rgba(255,255,255,.68);
  font-size: clamp(18px, 1.35vw, 22px);
  line-height: 1.5;
}

.workflow-visual {
  position: relative;
  width: 100%;
  min-height: 560px;
  perspective: 1200px;
}

.precision-grid {
  position: absolute;
  inset: -10% -18% -6% 0;
  transform: rotateX(58deg) rotateZ(-19deg) translate3d(10%, 5%, 0);
  transform-style: preserve-3d;
  border-radius: 18px;
  background:
    linear-gradient(90deg, rgba(255,255,255,.070) 1px, transparent 1px),
    linear-gradient(180deg, rgba(255,255,255,.060) 1px, transparent 1px),
    radial-gradient(circle at 72% 48%, rgba(167, 243, 208, .18), transparent 30%),
    linear-gradient(135deg, rgba(255,255,255,.035), rgba(255,255,255,.006));
  background-size: 58px 58px, 58px 58px, auto, auto;
  box-shadow:
    0 80px 180px rgba(0,0,0,.48),
    inset 0 1px 0 rgba(255,255,255,.08);
}

.precision-grid::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(115deg, transparent 0 42%, rgba(255,255,255,.16) 48%, transparent 55% 100%),
    radial-gradient(circle at 70% 46%, rgba(75, 235, 172, .18), transparent 28%);
  opacity: .72;
  animation: gridScan 6.5s ease-in-out infinite;
}

.precision-grid::after {
  content: "";
  position: absolute;
  inset: 8% 8% 10%;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 14px;
  box-shadow: 0 0 80px rgba(45, 212, 191, .10);
}

.glass-module {
  position: absolute;
  z-index: 2;
  width: 178px;
  min-height: 104px;
  padding: 18px 20px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 12px;
  background:
    linear-gradient(145deg, rgba(255,255,255,.18), rgba(255,255,255,.045)),
    radial-gradient(circle at 30% 20%, rgba(167, 243, 208, .22), transparent 48%);
  box-shadow:
    0 28px 80px rgba(0,0,0,.36),
    inset 0 1px 0 rgba(255,255,255,.22);
  backdrop-filter: blur(18px);
  transform: translateZ(92px) rotateX(-58deg) rotateZ(19deg);
  animation: moduleFloat 6s ease-in-out infinite;
}

.glass-module span {
  display: block;
  margin-bottom: 12px;
  color: rgba(167, 243, 208, .78);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.glass-module strong {
  color: rgba(255,255,255,.92);
  font-size: 22px;
  font-weight: 760;
}

.module-a { left: 12%; top: 20%; }
.module-b { left: 45%; top: 14%; animation-delay: -1.4s; }
.module-c { left: 26%; top: 52%; animation-delay: -2.6s; }
.module-d { left: 63%; top: 48%; animation-delay: -3.4s; }

.flow-line {
  position: absolute;
  z-index: 1;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(167, 243, 208, .86), transparent);
  box-shadow: 0 0 24px rgba(45, 212, 191, .34);
  transform-origin: left center;
  animation: flowPulse 3.8s ease-in-out infinite;
}

.line-a {
  left: 28%;
  top: 33%;
  width: 260px;
  transform: rotate(-5deg);
}

.line-b {
  left: 39%;
  top: 43%;
  width: 230px;
  transform: rotate(36deg);
  animation-delay: -1.2s;
}

.line-c {
  left: 42%;
  top: 63%;
  width: 260px;
  transform: rotate(-13deg);
  animation-delay: -2.1s;
}

@keyframes gridScan {
  0%, 100% {
    transform: translateX(-8%);
    opacity: .38;
  }
  50% {
    transform: translateX(8%);
    opacity: .82;
  }
}

@keyframes moduleFloat {
  0%, 100% {
    translate: 0 0 0;
  }
  50% {
    translate: 0 -14px 18px;
  }
}

@keyframes flowPulse {
  0%, 100% {
    opacity: .18;
    filter: blur(.2px);
  }
  50% {
    opacity: .92;
    filter: blur(0);
  }
}

.cert-visual {
  position: relative;
  min-height: 560px;
}

.badge-orbit {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  perspective: 1300px;
}

.badge-orbit::before {
  content: "";
  position: absolute;
  width: min(660px, 96%);
  height: 190px;
  bottom: 18px;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(255, 255, 255, .16), rgba(167, 243, 208, .045) 42%, transparent 72%);
  filter: blur(18px);
  opacity: .72;
  transform: rotateX(66deg);
}

.cert-badge {
  position: absolute;
  isolation: isolate;
  display: grid;
  place-items: center;
  text-align: center;
  color: #fff;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .22);
  background:
    linear-gradient(118deg, transparent 0 18%, rgba(255,255,255,.26) 23%, rgba(255,255,255,.04) 29%, transparent 38% 100%),
    radial-gradient(circle at 35% 20%, rgba(255, 255, 255, .34), transparent 18%),
    repeating-linear-gradient(102deg, rgba(255,255,255,.080) 0 1px, rgba(0,0,0,.015) 1px 5px),
    linear-gradient(148deg, #14382c 0%, #0b1b16 42%, #050807 100%);
  box-shadow:
    0 70px 150px rgba(0, 0, 0, .62),
    0 0 78px rgba(34, 197, 94, .22),
    inset 0 1px 0 rgba(255,255,255,.28),
    inset 0 -34px 58px rgba(0,0,0,.42);
  filter: drop-shadow(0 0 22px rgba(34, 197, 94, .18));
  transform-style: preserve-3d;
  animation: badgeFloat 6.4s ease-in-out infinite;
}

.cert-badge::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 13px;
  border: 1px solid rgba(167, 243, 208, .34);
  background:
    radial-gradient(circle at 50% 50%, rgba(167, 243, 208, .12), transparent 58%),
    linear-gradient(145deg, rgba(255,255,255,.10), transparent 50%);
  clip-path: polygon(50% 0, 96% 25%, 96% 75%, 50% 100%, 4% 75%, 4% 25%);
}

.cert-badge::after {
  content: "";
  position: absolute;
  inset: -40% -52%;
  z-index: -1;
  background: linear-gradient(108deg, transparent 42%, rgba(255,255,255,.30) 48%, rgba(168, 255, 215, .16) 52%, transparent 60%);
  transform: translateX(-26%) rotate(8deg);
  animation: badgeSheen 7.5s ease-in-out infinite;
}

.badge-main {
  right: 3%;
  top: 24px;
  width: 370px;
  height: 410px;
  clip-path: polygon(50% 0, 96% 25%, 96% 75%, 50% 100%, 4% 75%, 4% 25%);
  transform: rotateY(-14deg) rotateX(5deg);
}

.badge-secondary {
  left: 2%;
  bottom: 48px;
  width: 285px;
  height: 315px;
  clip-path: polygon(50% 0, 96% 25%, 96% 75%, 50% 100%, 4% 75%, 4% 25%);
  background:
    linear-gradient(118deg, transparent 0 18%, rgba(255,255,255,.22) 23%, rgba(255,255,255,.04) 29%, transparent 38% 100%),
    radial-gradient(circle at 35% 24%, rgba(255, 230, 178, .34), transparent 20%),
    repeating-linear-gradient(102deg, rgba(255,255,255,.070) 0 1px, rgba(0,0,0,.018) 1px 5px),
    linear-gradient(145deg, #3f3424 0%, #19140d 46%, #070807 100%);
  box-shadow:
    0 60px 124px rgba(0, 0, 0, .54),
    0 0 64px rgba(255, 200, 120, .15),
    inset 0 1px 0 rgba(255,255,255,.24),
    inset 0 -28px 48px rgba(0,0,0,.40);
  filter: drop-shadow(0 0 18px rgba(255, 207, 128, .12));
  transform: rotateY(16deg) rotateX(5deg);
  animation-delay: -1.8s;
}

.cert-badge span {
  position: relative;
  z-index: 2;
  margin-top: 64px;
  color: rgba(167, 243, 208, .82);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .22em;
}

.cert-badge strong {
  position: relative;
  z-index: 2;
  margin-top: -8px;
  font-size: 76px;
  line-height: 1;
}

.cert-badge em {
  position: relative;
  z-index: 2;
  max-width: 180px;
  margin-top: -14px;
  color: rgba(255, 255, 255, .62);
  font-size: 14px;
  font-style: normal;
}

.badge-secondary span {
  margin-top: 54px;
  color: rgba(255, 220, 160, .78);
  font-size: 12px;
}

.badge-secondary strong {
  font-size: 54px;
}

@keyframes badgeFloat {
  0%, 100% {
    translate: 0 0;
  }
  50% {
    translate: 0 -16px;
  }
}

@keyframes badgeSheen {
  0%, 32% {
    transform: translateX(-34%) rotate(8deg);
    opacity: .08;
  }
  48% {
    opacity: .62;
  }
  68%, 100% {
    transform: translateX(34%) rotate(8deg);
    opacity: .10;
  }
}

.hero-proof {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.hero-proof span {
  padding: 8px 12px;
  border: 1px solid rgba(11, 74, 53, .12);
  border-radius: 999px;
  background: rgba(17, 20, 24, .06);
  color: #4d5c55;
  font-size: 14px;
  font-weight: 600;
}

.section {
  padding: 92px 0;
}

.showcase {
  background: #fff;
}

.showcase-panel {
  min-height: 560px;
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
}

.showcase-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.dark-panel {
  color: #fff;
  background:
    radial-gradient(circle at 78% 42%, rgba(52, 211, 153, 0.26), transparent 26%),
    linear-gradient(135deg, #061b15 0%, #0d3126 100%);
}

.dark-panel::before {
  background:
    linear-gradient(90deg, rgba(255,255,255,.055) 1px, transparent 1px),
    linear-gradient(180deg, rgba(255,255,255,.055) 1px, transparent 1px);
  background-size: 70px 70px;
}

.light-panel {
  background:
    radial-gradient(circle at 20% 36%, rgba(22, 138, 91, 0.14), transparent 28%),
    linear-gradient(135deg, #f7faf8 0%, #ffffff 100%);
}

.light-panel::before {
  background: linear-gradient(120deg, transparent 0%, rgba(11, 74, 53, .05) 46%, transparent 47%);
}

.showcase-content {
  position: relative;
  max-width: 640px;
}

.showcase-content.align-right {
  margin-left: auto;
}

.showcase-content h2 {
  font-size: 48px;
  line-height: 1.18;
}

.dark-panel h2 {
  color: #fff;
}

.showcase-content p {
  color: var(--muted);
  font-size: 18px;
}

.dark-panel .showcase-content p {
  color: rgba(255,255,255,.78);
}

.text-link {
  display: inline-flex;
  margin-top: 14px;
  color: var(--green-2);
  font-weight: 900;
}

.dark-panel .text-link {
  color: #a7f3d0;
}

.section-head {
  max-width: 760px;
  margin: 0 auto 42px;
  text-align: center;
}

.section-head.left {
  margin: 0;
  text-align: left;
}

h2 {
  margin-bottom: 16px;
  color: var(--ink);
  font-size: 38px;
  line-height: 1.22;
  font-weight: 900;
}

h3 {
  color: var(--ink);
  font-size: 20px;
  line-height: 1.35;
}

.intro-section {
  padding: 58px 0;
  border-bottom: 1px solid var(--line);
}

.intro-grid {
  display: grid;
  grid-template-columns: 0.82fr 1.18fr;
  gap: 64px;
  align-items: start;
}

.intro-grid p:last-child {
  margin: 4px 0 0;
  font-size: 18px;
  line-height: 1.9;
}

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

.service-card,
.scenario-grid article,
.contact-panel {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.service-card {
  min-height: 292px;
  padding: 32px;
  box-shadow: 0 10px 32px rgba(10, 38, 28, 0.05);
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.service-card:hover,
.scenario-grid article:hover {
  transform: translateY(-3px);
  border-color: rgba(22, 138, 91, .38);
  box-shadow: 0 18px 42px rgba(10, 38, 28, .10);
}

.service-card.wide {
  grid-column: span 3;
  min-height: 210px;
}

.icon-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-bottom: 18px;
  border-radius: 8px;
  background: var(--soft);
  color: var(--green);
}

.icon-wrap svg {
  width: 25px;
  height: 25px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.service-card p,
.scenario-grid p,
.section-head p,
.about p,
.training p,
.contact p {
  color: var(--muted);
}

.band {
  background: linear-gradient(180deg, #061b15 0%, #0a2a20 100%);
  border-block: 1px solid var(--line);
  color: #fff;
}

.band h2 {
  color: #fff;
}

.band .section-head p {
  color: rgba(255, 255, 255, 0.72);
}

.capability-layout {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 56px;
  align-items: center;
}

.ability-tree {
  position: relative;
  min-height: 430px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background:
    radial-gradient(circle at 50% 72%, rgba(52, 211, 153, 0.24), transparent 38%),
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
  overflow: hidden;
}

.ability-tree::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 64px;
  width: 10px;
  height: 180px;
  transform: translateX(-50%);
  background: var(--green);
  border-radius: 99px;
}

.ability-tree::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 106px;
  width: 320px;
  height: 190px;
  transform: translateX(-50%);
  border-top: 4px solid rgba(22, 138, 91, 0.25);
  border-radius: 50%;
}

.tree-trunk,
.tree-node {
  position: absolute;
  z-index: 1;
  display: grid;
  place-items: center;
  text-align: center;
  font-weight: 900;
  border-radius: 8px;
}

.tree-trunk {
  left: 50%;
  bottom: 42px;
  width: 118px;
  height: 74px;
  transform: translateX(-50%);
  color: #fff;
  background: var(--green);
  box-shadow: var(--shadow);
}

.tree-node {
  width: 112px;
  height: 46px;
  color: var(--green);
  background: #fff;
  border: 1px solid #cce1d7;
  box-shadow: 0 12px 26px rgba(10, 38, 28, 0.08);
}

.node-a { left: 11%; top: 74px; }
.node-b { left: 41%; top: 34px; }
.node-c { right: 11%; top: 74px; }
.node-d { left: 13%; top: 218px; }
.node-e { right: 13%; top: 218px; }
.node-f { left: 50%; top: 164px; transform: translateX(-50%); }

.scenario-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.scenario-grid article {
  padding: 24px;
  min-height: 196px;
}

.scenario-grid h3 {
  margin-bottom: 10px;
}

.training-grid,
.about-layout,
.contact-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
}

.step-list {
  display: grid;
  gap: 12px;
  margin-top: 28px;
}

.step-list div {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  font-weight: 800;
}

.step-list span {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  border-radius: 50%;
  color: #fff;
  background: var(--green);
  font-size: 12px;
}

.training-photo,
.about-photo {
  min-height: 420px;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: var(--shadow);
  background: #fff;
}

.training-photo img,
.about-photo img {
  width: 100%;
  height: 100%;
  min-height: 420px;
  object-fit: cover;
}

.about {
  background: #f4f8f6;
}

.team-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 26px;
}

.team-list span {
  padding: 8px 12px;
  border: 1px solid #cfe1d8;
  border-radius: 6px;
  background: #fff;
  color: var(--green);
  font-weight: 800;
}

.contact {
  padding-bottom: 74px;
}

.contact-panel {
  padding: 28px;
  box-shadow: var(--shadow);
}

dl {
  margin: 0;
}

dl div {
  display: grid;
  grid-template-columns: 108px 1fr;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
}

dl div:last-child {
  border-bottom: 0;
}

dt {
  color: var(--muted);
  font-weight: 800;
}

dd {
  margin: 0;
  color: var(--ink);
  font-weight: 800;
}

dd a {
  color: var(--green-2);
}

.site-footer {
  padding: 58px 0 24px;
  border-top: 1px solid var(--line);
  background: #061b15;
  color: #fff;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr repeat(4, 1fr);
  gap: 34px;
  align-items: start;
}

.footer-brand img {
  width: 176px;
  margin-bottom: 18px;
}

.footer-brand p,
.footer-grid span,
.footer-grid a,
.footer-bottom p {
  margin: 0;
  color: rgba(255, 255, 255, 0.68);
  font-size: 14px;
}

.footer-grid h3 {
  margin: 0 0 14px;
  color: #fff;
  font-size: 16px;
}

.footer-grid a,
.footer-grid span {
  display: block;
  margin-bottom: 10px;
}

.footer-grid a:hover {
  color: #a7f3d0;
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  margin-top: 36px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

@media (max-width: 980px) {
  .site-header {
    height: 66px;
    padding: 0 20px;
  }

  .brand-zone {
    min-width: 0;
    flex: initial;
  }

  .brand {
    width: 156px;
    height: 40px;
    padding: 0;
  }

  .brand img {
    width: 156px;
    height: 38px;
  }

  .nav-toggle {
    display: block;
  }

  .header-actions {
    display: none;
  }

  .site-nav {
    position: fixed;
    left: 16px;
    right: 16px;
    top: 78px;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 10px;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 6px;
    background: rgba(5, 8, 7, .92);
    box-shadow: 0 24px 60px rgba(0, 0, 0, .28);
    backdrop-filter: blur(20px);
  }

  .mobile-only {
    display: block;
  }

  .system-link::before {
    display: none;
  }

  .site-nav.is-open {
    display: flex;
  }

  .site-nav a {
    min-height: auto;
    padding: 12px 12px;
    color: rgba(255,255,255,.84);
  }

  .site-nav a::after {
    display: none;
  }

  .site-nav span {
    display: inline;
    margin-left: 6px;
    font-size: 11px;
  }

  .mobile-action-nav {
    position: fixed;
    left: 16px;
    right: 16px;
    top: 276px;
    z-index: 21;
    display: none;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding: 10px;
    border: 1px solid rgba(255,255,255,.14);
    border-top: 0;
    border-radius: 0 0 6px 6px;
    background: rgba(5, 8, 7, .92);
    box-shadow: 0 24px 60px rgba(0, 0, 0, .28);
    backdrop-filter: blur(20px);
  }

  .site-nav.is-open ~ .mobile-action-nav {
    display: grid;
  }

  .mobile-action-nav a {
    padding: 9px;
    border-radius: 4px;
    background: rgba(255,255,255,.08);
    color: rgba(255,255,255,.84);
    text-align: center;
    font-size: 13px;
    font-weight: 400;
  }

  .mobile-action-nav a:first-child {
    font-weight: 400;
  }

  .hero {
    min-height: 100vh;
  }

  .hero-slide {
    padding: 104px 0 56px;
  }

  .hero-stage {
    min-height: calc(100vh - 120px);
  }

  .hero-content {
    width: min(560px, 68vw);
  }

  .cert-stage,
  .cert-slide-stage,
  .workflow-stage {
    grid-template-columns: 1fr;
    gap: 42px;
  }

  .cert-content {
    max-width: 680px;
  }

  .cert-visual {
    min-height: 420px;
  }

  .workflow-content {
    max-width: 620px;
  }

  .workflow-visual {
    min-height: 430px;
  }

  .precision-grid {
    inset: -4% -22% -8% 4%;
  }

  h1 {
    font-size: 38px;
  }

  .hero-en {
    font-size: 20px;
  }

  .intro-grid,
  .capability-layout,
  .training-grid,
  .about-layout,
  .contact-layout {
    grid-template-columns: 1fr;
    gap: 34px;
  }

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

  .showcase-panel {
    min-height: 480px;
  }

  .showcase-content,
  .showcase-content.align-right {
    margin-left: 0;
  }

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

  .about-photo {
    order: 2;
  }
}

@media (max-width: 640px) {
  .container {
    width: min(100% - 32px, 1180px);
  }

  .site-header {
    height: 64px;
  }

  .brand {
    width: 146px;
    height: 36px;
    padding: 0;
  }

  .brand img {
    width: 146px;
    height: 36px;
  }

  .hero {
    min-height: 100vh;
  }

  .hero-slide {
    padding: 86px 0 48px;
  }

  .hero-overlay {
    background:
      radial-gradient(circle at 62% 46%, rgba(255, 255, 255, .02), transparent 42%),
      linear-gradient(180deg, rgba(5, 8, 7, .10) 0%, rgba(5, 8, 7, .48) 100%);
  }

  h1 {
    font-size: 30px;
  }

  .hero-en {
    font-size: 15px;
    margin-bottom: 10px;
  }

  .hero-copy.en-copy {
    display: none;
  }

  .hero-copy {
    margin-bottom: 16px;
    font-size: 16px;
    line-height: 1.45;
  }

  .hero-actions {
    margin-bottom: 14px;
    gap: 8px;
  }

  .button {
    min-height: 42px;
  }

  .hero-proof {
    gap: 7px;
  }

  .hero-proof span {
    padding: 5px 8px;
    font-size: 11px;
  }

  .hero-stage {
    min-height: calc(100vh - 98px);
  }

  .hero-content {
    width: 100%;
  }

  .hero-arrow {
    width: 30px;
    height: 52px;
    opacity: .60;
  }

  .hero-arrow-prev {
    left: -12px;
  }

  .hero-arrow-next {
    right: -12px;
  }

  .hero-arrow::before {
    width: 15px;
    height: 15px;
    border-width: 2px;
  }

  .hero-arrow-prev::before {
    left: 9px;
  }

  .hero-arrow-next::before {
    right: 9px;
  }

  .cert-hero {
    min-height: auto;
    padding: 88px 0 56px;
  }

  .cert-hero::before {
    background-size: 64px 64px;
  }

  .cert-stage,
  .cert-slide-stage,
  .workflow-stage {
    gap: 28px;
  }

  .cert-kicker {
    margin-bottom: 12px;
    font-size: 12px;
  }

  .cert-content h2 {
    font-size: 29px;
  }

  .cert-content p {
    margin-bottom: 22px;
    font-size: 15px;
    line-height: 1.7;
  }

  .cert-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .cert-visual {
    min-height: 300px;
  }

  .workflow-content h2 {
    margin-bottom: 14px;
    font-size: 30px;
  }

  .workflow-content p {
    font-size: 15px;
  }

  .workflow-visual {
    min-height: 330px;
  }

  .precision-grid {
    inset: 0 -72% -12% 2%;
    transform: rotateX(58deg) rotateZ(-18deg) translate3d(0, 2%, 0);
    background-size: 42px 42px, 42px 42px, auto, auto;
  }

  .glass-module {
    width: 128px;
    min-height: 78px;
    padding: 13px 14px;
    border-radius: 9px;
  }

  .glass-module span {
    margin-bottom: 8px;
    font-size: 9px;
  }

  .glass-module strong {
    font-size: 16px;
  }

  .module-a { left: 9%; top: 20%; }
  .module-b { left: 43%; top: 14%; }
  .module-c { left: 22%; top: 52%; }
  .module-d { left: 59%; top: 48%; }

  .badge-main {
    right: 2%;
    top: 26px;
    width: 190px;
    height: 210px;
  }

  .badge-secondary {
    left: 2%;
    bottom: 16px;
    width: 132px;
    height: 146px;
  }

  .cert-badge span {
    margin-top: 30px;
    font-size: 9px;
  }

  .cert-badge strong {
    font-size: 34px;
  }

  .cert-badge em {
    max-width: 120px;
    font-size: 10px;
  }

  h2 {
    font-size: 28px;
  }

  .showcase-content h2 {
    font-size: 31px;
  }

  .showcase-panel {
    min-height: 430px;
  }

  h3 {
    font-size: 19px;
  }

  .hero-copy {
    font-size: 16px;
    line-height: 1.75;
  }

  .hero-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .button {
    width: 100%;
  }

  .section {
    padding: 64px 0;
  }

  .service-grid,
  .scenario-grid {
    grid-template-columns: 1fr;
  }

  .service-card,
  .scenario-grid article {
    min-height: auto;
  }

  .service-card.wide {
    grid-column: auto;
  }

  .ability-tree {
    min-height: 360px;
  }

  .tree-node {
    width: 92px;
    height: 42px;
    font-size: 14px;
  }

  .node-a { left: 4%; top: 78px; }
  .node-b { left: 50%; top: 28px; transform: translateX(-50%); }
  .node-c { right: 4%; top: 78px; }
  .node-d { left: 7%; top: 204px; }
  .node-e { right: 7%; top: 204px; }
  .node-f { top: 144px; }

  .training-photo,
  .about-photo,
  .training-photo img,
  .about-photo img {
    min-height: 280px;
  }

  dl div {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .footer-inner {
    flex-direction: column;
    align-items: flex-start;
  }

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

  .footer-brand {
    grid-column: 1 / -1;
  }

  .footer-bottom {
    flex-direction: column;
  }
}

/* 2026-06-09: verified hero carousel cleanup.
   Keep the electric current visible only on slide 1; remove all decorative
   streaks from slides 2/3; keep thin arrows visible near the viewport edge. */
.hero.hero--agent .agent-canvas {
  display: block !important;
  visibility: visible !important;
  opacity: .96 !important;
  mix-blend-mode: screen !important;
  filter: saturate(1.45) contrast(1.28) brightness(1.18) !important;
}

.hero.hero--agent .hero-electric-flow {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  overflow: hidden !important;
  background:
    linear-gradient(104deg, transparent 0 40%, rgba(191, 231, 255, .10) 45%, rgba(255, 255, 255, .92) 50%, rgba(177, 225, 255, .12) 56%, transparent 62% 100%) -42% 57% / 54% 3px no-repeat,
    linear-gradient(93deg, transparent 0 38%, rgba(255, 212, 143, .08) 44%, rgba(255, 246, 224, .76) 50%, rgba(255, 205, 126, .10) 57%, transparent 63% 100%) -34% 79% / 58% 3px no-repeat,
    linear-gradient(116deg, transparent 0 41%, rgba(205, 241, 255, .08) 46%, rgba(252, 255, 255, .74) 51%, rgba(158, 217, 255, .10) 56%, transparent 63% 100%) 142% 48% / 46% 2px no-repeat,
    linear-gradient(82deg, transparent 0 39%, rgba(255, 218, 164, .08) 45%, rgba(255, 247, 226, .80) 50%, rgba(255, 200, 116, .10) 57%, transparent 64% 100%) 134% 75% / 52% 3px no-repeat,
    radial-gradient(circle at 66% 55%, rgba(255, 255, 250, .20), transparent 18%),
    radial-gradient(circle at 44% 78%, rgba(255, 205, 124, .16), transparent 16%) !important;
  filter: drop-shadow(0 0 18px rgba(203, 239, 255, .42))
    drop-shadow(0 0 32px rgba(255, 205, 127, .24)) !important;
  animation: heroElectricFlow 3.1s linear infinite !important;
}

.hero.hero--agent .hero-electric-flow::before,
.hero.hero--agent .hero-electric-flow::after {
  content: "" !important;
  position: absolute !important;
  inset: -12% !important;
  display: block !important;
  pointer-events: none !important;
  mix-blend-mode: screen !important;
  opacity: .76 !important;
  background:
    linear-gradient(101deg, transparent 0 44%, rgba(255, 255, 255, .70) 49%, transparent 54% 100%) -28% 65% / 38% 2px no-repeat,
    linear-gradient(112deg, transparent 0 43%, rgba(255, 219, 153, .46) 49%, transparent 55% 100%) 126% 82% / 34% 2px no-repeat;
  filter: blur(.2px) drop-shadow(0 0 16px rgba(255, 255, 255, .36)) !important;
  animation: heroCurrentSweep 4.4s ease-in-out infinite !important;
}

.hero.hero--agent .hero-electric-flow::after {
  opacity: .48 !important;
  animation-delay: -2.2s !important;
  transform: scaleX(-1) !important;
}

.hero.hero--cert .agent-canvas,
.hero.hero--workflow .agent-canvas,
.hero.hero--cert .hero-electric-flow,
.hero.hero--workflow .hero-electric-flow,
.hero.hero--cert .hero-electric-flow::before,
.hero.hero--cert .hero-electric-flow::after,
.hero.hero--workflow .hero-electric-flow::before,
.hero.hero--workflow .hero-electric-flow::after,
.hero.hero--cert::before,
.hero.hero--cert::after,
.hero.hero--workflow::before,
.hero.hero--workflow::after,
.cert-slide::before,
.cert-slide::after,
.workflow-slide::before,
.workflow-slide::after,
.cert-slide .badge-orbit::before,
.cert-slide .badge-orbit::after,
.cert-slide .cert-visual::before,
.cert-slide .cert-visual::after,
.workflow-slide .flow-line,
.workflow-slide .precision-grid::before,
.workflow-slide .precision-grid::after,
.workflow-slide .workflow-visual::before,
.workflow-slide .workflow-visual::after {
  content: none !important;
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  background: none !important;
  box-shadow: none !important;
  filter: none !important;
  animation: none !important;
}

.hero.hero--cert,
.hero.hero--workflow {
  background:
    radial-gradient(circle at 74% 46%, rgba(73, 210, 170, .045), transparent 28%),
    linear-gradient(145deg, #040505 0%, #020303 58%, #000 100%) !important;
}

.hero .hero-arrows {
  z-index: 180 !important;
  pointer-events: none !important;
}

.hero .hero-arrow,
.hero-arrows .hero-arrow {
  top: 50% !important;
  width: 44px !important;
  height: 84px !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  z-index: 181 !important;
  color: #fff !important;
  background: transparent !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  pointer-events: auto !important;
  transform: translateY(-50%) !important;
}

.hero .hero-arrow-prev,
.hero-arrow-prev {
  left: clamp(14px, 1.5vw, 26px) !important;
}

.hero .hero-arrow-next,
.hero-arrow-next {
  right: clamp(14px, 1.5vw, 26px) !important;
}

.hero .hero-arrow::before,
.hero-arrows .hero-arrow::before {
  width: 16px !important;
  height: 16px !important;
  opacity: 1 !important;
  border-color: #fff !important;
  border-style: solid !important;
  border-width: 0 0 2px 2px !important;
  filter: drop-shadow(0 0 12px rgba(0, 0, 0, .92)) !important;
}

/* FINAL 2026-06-09 services balanced grid override.
   Keeps the second screen in a strict 2x2 product grid with fixed rhythm. */
#services.ai-origin {
  min-height: 100vh !important;
  height: auto !important;
  padding: clamp(92px, 9vh, 118px) 0 clamp(64px, 7vh, 86px) !important;
  overflow: hidden !important;
}

#services .infrastructure-section {
  width: min(1440px, calc(100vw - 112px)) !important;
  min-height: auto !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  align-items: start !important;
  gap: clamp(28px, 4vh, 44px) !important;
  margin: 0 auto !important;
}

#services .infra-hero {
  width: min(860px, 100%) !important;
  margin: 0 auto !important;
  text-align: center !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 0 !important;
}

#services .infra-pill {
  margin: 0 0 16px !important;
  height: 36px !important;
  padding: 0 22px !important;
  border-radius: 999px !important;
  font-size: 14px !important;
  line-height: 1 !important;
  letter-spacing: .06em !important;
  color: #9FE1CB !important;
  border-color: rgba(29, 158, 117, .72) !important;
  background: rgba(1, 16, 10, .42) !important;
}

#services .infra-hero h2 {
  margin: 0 !important;
  font-size: clamp(38px, 4.1vw, 58px) !important;
  line-height: 1.08 !important;
  font-weight: 700 !important;
  letter-spacing: .01em !important;
  color: #fff !important;
}

#services .infra-hero p {
  max-width: 760px !important;
  margin: 14px auto 0 !important;
  font-size: clamp(16px, 1.3vw, 20px) !important;
  line-height: 1.55 !important;
  color: #9FE1CB !important;
}

#services .infra-metrics {
  display: none !important;
}

#services .infra-showcase {
  width: 100% !important;
  max-width: 1240px !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 auto !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  grid-auto-rows: minmax(286px, 1fr) !important;
  gap: clamp(24px, 2.4vw, 32px) !important;
  align-items: stretch !important;
}

#services .infra-module,
#services .infra-module.reverse {
  min-width: 0 !important;
  min-height: 286px !important;
  height: 100% !important;
  padding: 28px 30px !important;
  display: grid !important;
  grid-template-columns: 108px minmax(0, 1fr) !important;
  grid-template-areas: "visual copy" !important;
  align-items: start !important;
  gap: 24px !important;
  overflow: hidden !important;
  border-radius: 12px !important;
  background:
    radial-gradient(circle at 22% 18%, rgba(44, 230, 172, .12), transparent 36%),
    linear-gradient(135deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, .012)),
    rgba(6, 25, 16, .78) !important;
  border: 1px solid rgba(93, 202, 165, .28) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .06),
    0 22px 72px rgba(0, 0, 0, .26) !important;
  backdrop-filter: blur(18px) !important;
  transform: none !important;
}

#services .infra-module:hover {
  border-color: rgba(31, 226, 159, .76) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .08),
    0 28px 88px rgba(0, 0, 0, .32),
    0 0 34px rgba(31, 226, 159, .08) !important;
  transform: translateY(-3px) !important;
}

#services .infra-copy {
  grid-area: copy !important;
  min-width: 0 !important;
  width: 100% !important;
  height: auto !important;
  position: relative !important;
  z-index: 2 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  text-align: left !important;
  padding: 0 !important;
  margin: 0 !important;
}

#services .infra-copy span {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin: 0 0 18px !important;
  font-size: 14px !important;
  line-height: 1.2 !important;
  letter-spacing: .08em !important;
  color: #5DCAA5 !important;
  white-space: nowrap !important;
}

#services .infra-copy h3 {
  margin: 0 0 14px !important;
  font-size: clamp(28px, 2.25vw, 36px) !important;
  line-height: 1.18 !important;
  font-weight: 650 !important;
  letter-spacing: 0 !important;
  color: #D4F5E9 !important;
}

#services #service-native .infra-copy h3 {
  color: #fff !important;
}

#services .infra-copy p {
  width: min(100%, 460px) !important;
  margin: 0 !important;
  font-size: clamp(15px, 1.08vw, 17px) !important;
  line-height: 1.6 !important;
  color: #8BBFAA !important;
  overflow: visible !important;
}

#services .infra-copy ul {
  display: flex !important;
  flex-direction: column !important;
  gap: 9px !important;
  margin: 22px 0 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

#services .infra-copy li {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin: 0 !important;
  font-size: 14px !important;
  line-height: 1.45 !important;
  color: rgba(255, 255, 255, .9) !important;
  white-space: normal !important;
}

#services .infra-visual,
#services .infra-module.reverse .infra-visual,
#services .infra-visual-base,
#services .infra-visual-workflow,
#services .infra-visual-opc,
#services .infra-visual-growth {
  grid-area: visual !important;
  position: relative !important;
  inset: auto !important;
  width: 108px !important;
  height: 108px !important;
  min-width: 108px !important;
  align-self: start !important;
  justify-self: start !important;
  display: grid !important;
  place-items: center !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  transform: none !important;
}

#services .infra-visual img,
#services .infra-visual-base img,
#services .infra-visual-workflow img,
#services .infra-visual-opc img,
#services .infra-visual-growth img {
  width: 108px !important;
  height: 108px !important;
  max-width: 108px !important;
  max-height: 108px !important;
  object-fit: contain !important;
  display: block !important;
  opacity: 1 !important;
  filter: saturate(1.18) brightness(1.08) drop-shadow(0 0 18px rgba(31, 226, 159, .28)) !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

#services .infra-visual-base .infra-orb-static {
  display: block !important;
  animation: servicesOrbFloat 5.2s ease-in-out infinite !important;
}

#services .infra-visual-base .infra-orb-spin {
  display: none !important;
}

@keyframes servicesOrbFloat {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
  50% { transform: translate3d(0, -5px, 0) rotate(2deg); }
}

@media (max-width: 1180px) {
  #services .infrastructure-section {
    width: min(100% - 48px, 980px) !important;
  }

  #services .infra-showcase {
    grid-template-columns: 1fr !important;
    grid-auto-rows: auto !important;
  }

  #services .infra-module,
  #services .infra-module.reverse {
    min-height: 230px !important;
  }
}

@media (max-width: 720px) {
  #services.ai-origin {
    padding: 84px 0 56px !important;
  }

  #services .infrastructure-section {
    width: min(100% - 32px, 560px) !important;
  }

  #services .infra-hero {
    align-items: flex-start !important;
    text-align: left !important;
  }

  #services .infra-showcase {
    gap: 16px !important;
  }

  #services .infra-module,
  #services .infra-module.reverse {
    grid-template-columns: 76px minmax(0, 1fr) !important;
    gap: 16px !important;
    min-height: 210px !important;
    padding: 22px !important;
  }

  #services .infra-visual,
  #services .infra-module.reverse .infra-visual,
  #services .infra-visual-base,
  #services .infra-visual-workflow,
  #services .infra-visual-opc,
  #services .infra-visual-growth {
    width: 76px !important;
    height: 76px !important;
    min-width: 76px !important;
  }

  #services .infra-visual img,
  #services .infra-visual-base img,
  #services .infra-visual-workflow img,
  #services .infra-visual-opc img,
  #services .infra-visual-growth img {
    width: 76px !important;
    height: 76px !important;
    max-width: 76px !important;
    max-height: 76px !important;
  }
}

@keyframes heroCurrentSweep {
  0% {
    background-position: -34% 65%, 128% 82%;
    opacity: .20;
  }
  18% {
    opacity: .82;
  }
  58% {
    opacity: .62;
  }
  100% {
    background-position: 122% 65%, -30% 82%;
    opacity: .18;
  }
}

/* Final compact second-screen layout: keep the entire product platform in one view. */
.ai-origin {
  min-height: 100vh;
  padding: 78px 0 42px;
}

.infrastructure-section {
  width: min(1120px, calc(100% - 72px));
}

.infra-hero {
  max-width: 720px;
  margin-bottom: 26px;
  padding-top: 0;
}

.infra-pill {
  margin-bottom: 12px;
  padding: 4px 11px;
  font-size: 9px;
}

.infra-hero h2 {
  margin-bottom: 10px;
  font-size: clamp(30px, 3vw, 42px);
}

.infra-hero p {
  max-width: 620px;
  font-size: 13px;
  line-height: 1.65;
}

.infra-showcase {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.infra-module,
.infra-module.reverse {
  grid-template-columns: minmax(0, 1fr) 132px;
  gap: 16px;
  min-height: 172px;
  padding: 18px;
  border-radius: 18px;
}

.infra-module.reverse .infra-copy,
.infra-module.reverse .infra-visual {
  grid-column: auto;
  grid-row: auto;
}

.infra-copy span {
  margin-bottom: 8px;
  font-size: 9px;
  letter-spacing: .16em;
}

.infra-copy h3 {
  margin-bottom: 8px;
  font-size: 22px;
  line-height: 1.18;
}

.infra-copy p {
  margin-bottom: 9px;
  font-size: 13px;
  line-height: 1.55;
}

.infra-copy ul {
  gap: 4px;
}

.infra-copy li {
  padding-left: 18px;
  font-size: 12px;
  line-height: 1.38;
}

.infra-copy li::before {
  width: 10px;
  height: 10px;
}

.infra-visual {
  width: 132px;
  min-height: 132px;
  border-radius: 14px;
}

.infra-visual strong {
  bottom: 12px;
  font-size: 10px;
}

.orb {
  width: 58px;
  height: 58px;
}

.flow-console,
.orbit-stack,
.growth-bars {
  inset: 14px;
}

.flow-console {
  gap: 7px;
}

.flow-console span {
  height: 28px;
  border-radius: 8px;
  font-size: 9px;
}

.flow-console span:not(:last-child)::after {
  bottom: -7px;
  height: 7px;
}

.orbit-stack::before {
  width: 84px;
}

.orbit-stack span {
  width: 36px;
  height: 36px;
  font-size: 9px;
}

.orbit-stack span:nth-child(1) { transform: translateY(-45px); }
.orbit-stack span:nth-child(2) { transform: translateX(45px); }
.orbit-stack span:nth-child(3) { transform: translateY(45px); }
.orbit-stack span:nth-child(4) { transform: translateX(-45px); }

.growth-bars {
  gap: 8px;
  padding: 18px 10px;
}

.growth-bars i {
  width: 18px;
}

.growth-bars i:nth-child(1) { height: 36px; }
.growth-bars i:nth-child(2) { height: 56px; }
.growth-bars i:nth-child(3) { height: 78px; }
.growth-bars i:nth-child(4) { height: 100px; }

@media (max-width: 980px) {
  .ai-origin {
    padding: 72px 0 40px;
  }

  .infrastructure-section {
    width: min(100% - 40px, 1120px);
  }

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

  .infra-module,
  .infra-module.reverse {
    grid-template-columns: 1fr;
    min-height: 190px;
  }

  .infra-visual {
    position: absolute;
    right: 14px;
    bottom: 14px;
    width: 86px;
    min-height: 86px;
    opacity: .58;
  }

  .infra-copy {
    position: relative;
    z-index: 2;
    padding-right: 72px;
  }
}

@media (max-width: 640px) {
  .ai-origin {
    padding: 64px 0 34px;
  }

  .infrastructure-section {
    width: min(100% - 28px, 1120px);
  }

  .infra-hero {
    margin-bottom: 18px;
  }

  .infra-pill {
    display: none;
  }

  .infra-hero h2 {
    font-size: 28px;
  }

  .infra-hero p {
    font-size: 12px;
    line-height: 1.55;
  }

  .infra-showcase {
    gap: 10px;
  }

  .infra-module,
  .infra-module.reverse {
    min-height: 154px;
    padding: 14px;
    border-radius: 14px;
  }

  .infra-copy {
    padding-right: 0;
  }

  .infra-copy span {
    margin-bottom: 6px;
    font-size: 8px;
  }

  .infra-copy h3 {
    font-size: 18px;
  }

  .infra-copy p {
    font-size: 11px;
    line-height: 1.45;
  }

  .infra-copy ul {
    display: none;
  }

  .infra-visual {
    display: none;
  }
}

/* Premium AI homepage body, rebuilt below the hero. */
.ai-home {
  position: relative;
  overflow: hidden;
  color: rgba(255, 255, 255, .88);
  background:
    radial-gradient(circle at 72% 10%, rgba(37, 99, 235, .13), transparent 28%),
    radial-gradient(circle at 18% 28%, rgba(16, 185, 129, .11), transparent 24%),
    linear-gradient(180deg, #030505 0%, #080d10 42%, #040606 100%);
}

.ai-home::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px);
  background-size: 96px 96px;
  mask-image: linear-gradient(180deg, transparent, #000 8%, #000 92%, transparent);
  opacity: .42;
}

.ai-section {
  position: relative;
  z-index: 1;
  min-height: 92vh;
  display: flex;
  align-items: center;
  padding: 112px 0;
  border-top: 1px solid rgba(255,255,255,.07);
  opacity: 1;
  transform: none;
  transition: background .35s ease;
}

.ai-section.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.ai-section h2 {
  margin: 0 0 24px;
  color: #fff;
  font-size: clamp(34px, 4.15vw, 64px);
  line-height: 1.12;
  font-weight: 680;
  letter-spacing: 0;
}

.ai-section h3 {
  margin: 0 0 14px;
  color: #fff;
  font-size: clamp(20px, 1.45vw, 27px);
  line-height: 1.25;
  font-weight: 660;
}

.ai-section p {
  margin: 0;
  color: rgba(255,255,255,.62);
  font-size: 17px;
  line-height: 1.9;
}

.ai-kicker {
  margin: 0 0 18px;
  color: #8df0bd;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .28em;
}

.ai-copy {
  max-width: 660px;
}

.ai-origin {
  min-height: 100vh;
  isolation: isolate;
  background: #050505;
  overflow: hidden;
}

.ai-origin::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(ellipse at 82% 42%, rgba(64, 255, 183, .18), transparent 34%),
    radial-gradient(ellipse at 54% 112%, rgba(185, 255, 225, .075), transparent 42%),
    linear-gradient(118deg, rgba(255,255,255,.030), transparent 38%),
    linear-gradient(180deg, #050505 0%, #060707 52%, #020303 100%);
}

.ai-origin::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: .24;
  pointer-events: none;
  background-image: radial-gradient(rgba(255,255,255,.16) 1px, transparent 1px);
  background-size: 4px 4px;
  mask-image: linear-gradient(180deg, transparent 0%, #000 14%, #000 86%, transparent 100%);
}

.bento-particles {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  opacity: .98;
  pointer-events: none;
  filter: saturate(1.2) contrast(1.1);
}

.bento-section {
  width: min(1180px, calc(100% - 72px));
  position: relative;
  z-index: 1;
}

.bento-head {
  display: block;
  max-width: 720px;
  margin-bottom: 34px;
}

.bento-head h2 {
  margin: 0 0 14px;
  color: #fff;
  font-size: clamp(34px, 3.2vw, 46px);
  font-weight: 720;
  line-height: 1.12;
  letter-spacing: 0;
  text-shadow: 0 24px 70px rgba(0,0,0,.46);
}

.bento-head p:last-child {
  max-width: 640px;
  color: rgba(255,255,255,.46);
  font-size: 15px;
  line-height: 1.75;
}

.bento-matrix {
  display: grid;
  grid-template-columns: minmax(420px, .96fr) minmax(430px, 1fr);
  grid-template-rows: repeat(3, 156px);
  gap: 18px 32px;
  align-items: stretch;
}

.bento-card {
  position: relative;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 30px 36px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 18px;
  overflow: hidden;
  background: rgba(255, 255, 255, .02);
  box-shadow:
    0 48px 140px rgba(0,0,0,.30),
    inset 0 0 0 1px rgba(255,255,255,.045),
    inset 0 1px 0 rgba(255,255,255,.12),
    inset 0 -1px 0 rgba(255,255,255,.035);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  transition: all .4s ease;
}

.bento-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(115deg, transparent 0 43%, rgba(255,255,255,.085) 50%, transparent 57% 100%),
    linear-gradient(180deg, rgba(255,255,255,.072), transparent 22%, transparent 74%, rgba(255,255,255,.030)),
    radial-gradient(circle at 78% 20%, rgba(52, 211, 153, .10), transparent 36%);
  opacity: .48;
  pointer-events: none;
}

.bento-card::after {
  content: "";
  position: absolute;
  right: 28px;
  top: 28px;
  width: 1px;
  height: 38px;
  border-radius: 999px;
  background: rgba(255,255,255,.38);
  box-shadow: 0 0 22px rgba(255,255,255,.12);
  pointer-events: none;
}

.bento-card:hover {
  transform: translateY(-5px);
  border-color: rgba(16, 185, 129, .58);
  background: rgba(255, 255, 255, .026);
  box-shadow:
    0 54px 150px rgba(0,0,0,.38),
    0 0 54px rgba(16, 185, 129, .16),
    inset 0 0 0 1px rgba(255,255,255,.070),
    inset 0 1px 0 rgba(255,255,255,.18);
}

.bento-card span {
  position: absolute;
  left: 36px;
  top: 24px;
  color: rgba(255,255,255,.24);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .26em;
  text-transform: uppercase;
}

.bento-card span::after {
  content: "";
  display: inline-block;
  width: 38px;
  height: 1px;
  margin-left: 12px;
  vertical-align: middle;
  background: linear-gradient(90deg, rgba(255,255,255,.34), transparent);
}

.bento-card h3,
.bento-card p {
  position: relative;
  z-index: 1;
}

.bento-card h3 {
  max-width: 620px;
  margin: 16px 0 18px;
  color: #fff;
  font-size: clamp(24px, 1.65vw, 31px);
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.12;
}

.bento-card h3::after {
  content: "";
  display: block;
  width: 36px;
  height: 2px;
  margin-top: 14px;
  background: rgba(255,255,255,.82);
}

.bento-card p {
  max-width: 500px;
  color: rgba(255,255,255,.52);
  font-size: 14px;
  line-height: 1.72;
}

.bento-tall {
  grid-row: 1 / span 3;
  min-height: 504px;
  padding: 54px 46px;
  justify-content: center;
}

.bento-tall p {
  max-width: 460px;
  color: rgba(255,255,255,.58);
  font-size: 15px;
  line-height: 1.82;
}

.bento-tall h3 {
  max-width: 420px;
  font-size: clamp(36px, 3vw, 48px);
  line-height: 1.12;
}

.bento-tall span {
  left: 46px;
  top: 36px;
}

.bento-tall::after {
  left: 46px;
  right: auto;
  top: 86px;
  height: 54px;
}

.bento-card:not(.bento-tall) {
  grid-column: 2;
  min-height: 156px;
}

.bento-card:nth-child(2) { grid-row: 1; }
.bento-card:nth-child(3) { grid-row: 2; }
.bento-card:nth-child(4) { grid-row: 3; }

.bento-card:last-child {
  grid-column: 2;
}

.infrastructure-section {
  position: relative;
  z-index: 1;
  width: min(1180px, calc(100% - 72px));
}

.infra-hero {
  position: relative;
  display: grid;
  justify-items: center;
  max-width: 900px;
  margin: 0 auto 88px;
  padding: 42px 0 18px;
  text-align: center;
}

.infra-hero::before {
  content: "";
  position: absolute;
  inset: -42px 6% auto;
  height: 220px;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(16, 185, 129, .19), rgba(16, 185, 129, .045) 45%, transparent 72%);
  filter: blur(18px);
  opacity: .9;
  pointer-events: none;
}

.infra-pill {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 26px;
  padding: 7px 16px;
  border: 1px solid rgba(16, 185, 129, .32);
  border-radius: 999px;
  background: rgba(16, 185, 129, .12);
  color: #20f3a0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.infra-pill::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #20f3a0;
  box-shadow: 0 0 16px rgba(32, 243, 160, .68);
}

.infra-hero h2 {
  position: relative;
  z-index: 1;
  margin: 0 0 28px;
  color: #fff;
  font-size: clamp(42px, 5.2vw, 76px);
  line-height: 1.05;
  font-weight: 760;
  letter-spacing: 0;
  text-shadow: 0 28px 80px rgba(0, 0, 0, .45);
}

.infra-hero p {
  position: relative;
  z-index: 1;
  max-width: 790px;
  margin: 0;
  color: rgba(255,255,255,.62);
  font-size: 17px;
  line-height: 1.9;
}

.infra-showcase {
  display: grid;
  gap: 92px;
}

.infra-module {
  display: grid;
  grid-template-columns: minmax(480px, .92fr) minmax(360px, .72fr);
  gap: clamp(64px, 8vw, 118px);
  align-items: center;
  min-height: 440px;
}

.infra-module.reverse {
  grid-template-columns: minmax(360px, .72fr) minmax(480px, .92fr);
}

.infra-module.reverse .infra-copy {
  grid-column: 2;
}

.infra-module.reverse .infra-visual {
  grid-column: 1;
  grid-row: 1;
}

.infra-copy span {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
  color: #20f3a0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
}

.infra-copy span::after {
  content: "";
  width: 42px;
  height: 1px;
  background: linear-gradient(90deg, rgba(32,243,160,.72), transparent);
}

.infra-copy h3 {
  margin: 0 0 24px;
  color: #fff;
  font-size: clamp(34px, 3vw, 48px);
  line-height: 1.12;
  font-weight: 720;
}

.infra-copy p {
  max-width: 620px;
  margin: 0 0 30px;
  color: rgba(255,255,255,.64);
  font-size: 16px;
  line-height: 1.9;
}

.infra-copy ul {
  display: grid;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.infra-copy li {
  position: relative;
  padding-left: 32px;
  color: rgba(255,255,255,.82);
  font-size: 15px;
  line-height: 1.6;
}

.infra-copy li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .35em;
  width: 16px;
  height: 16px;
  border: 1px solid rgba(32,243,160,.88);
  border-radius: 50%;
  background:
    radial-gradient(circle at center, #20f3a0 0 3px, transparent 4px),
    rgba(32,243,160,.08);
  box-shadow: 0 0 20px rgba(32,243,160,.22);
}

.infra-visual {
  position: relative;
  width: min(100%, 400px);
  min-height: 400px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 22px;
  background:
    radial-gradient(circle at 50% 42%, rgba(32,243,160,.18), transparent 34%),
    linear-gradient(145deg, rgba(255,255,255,.075), rgba(255,255,255,.018));
  box-shadow:
    0 48px 130px rgba(0,0,0,.36),
    inset 0 1px 0 rgba(255,255,255,.13);
  overflow: hidden;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.infra-module:not(.reverse) .infra-visual {
  justify-self: end;
}

.infra-module.reverse .infra-visual {
  justify-self: start;
}

.infra-visual::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 46%, rgba(255,255,255,.10), transparent 18%),
    linear-gradient(115deg, transparent 0 44%, rgba(255,255,255,.10) 50%, transparent 57% 100%);
  opacity: .58;
}

.infra-visual::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 42%;
  background: linear-gradient(180deg, transparent, rgba(32,243,160,.10));
  transform: perspective(700px) rotateX(62deg);
  transform-origin: bottom;
}

.orb {
  position: absolute;
  left: 50%;
  top: 45%;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 34% 28%, rgba(255,255,255,.92), transparent 12%),
    radial-gradient(circle at 50% 50%, rgba(32,243,160,.92), rgba(17, 126, 93, .42) 48%, rgba(2, 6, 5, .30) 74%),
    conic-gradient(from 120deg, rgba(255,255,255,.14), rgba(32,243,160,.78), rgba(255,255,255,.10), rgba(32,243,160,.64), rgba(255,255,255,.14));
  box-shadow:
    0 0 70px rgba(32,243,160,.58),
    inset 0 0 42px rgba(255,255,255,.22);
  transform: translate(-50%, -50%);
  animation: orbFloat 5.8s ease-in-out infinite;
}

.orb i {
  position: absolute;
  inset: 18%;
  border: 1px solid rgba(255,255,255,.38);
  border-radius: 48% 52% 44% 56%;
  transform: rotate(var(--r, 0deg));
}

.orb i:nth-child(1) { --r: 22deg; }
.orb i:nth-child(2) { --r: 74deg; inset: 23%; }
.orb i:nth-child(3) { --r: 132deg; inset: 28%; }
.orb i:nth-child(4) { --r: 202deg; inset: 33%; }

.infra-visual strong {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 42px;
  color: rgba(255,255,255,.88);
  font-size: 20px;
  text-align: center;
  text-shadow: 0 10px 30px rgba(0,0,0,.65);
}

.flow-console,
.orbit-stack,
.growth-bars {
  position: absolute;
  inset: 42px;
  z-index: 1;
}

.flow-console {
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
  place-content: center;
}

.flow-console span {
  position: relative;
  display: grid;
  place-items: center;
  height: 62px;
  border: 1px solid rgba(32,243,160,.24);
  border-radius: 16px;
  color: rgba(255,255,255,.90);
  background: rgba(255,255,255,.035);
  font-weight: 700;
  letter-spacing: .16em;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10);
}

.flow-console span:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -28px;
  width: 1px;
  height: 28px;
  background: linear-gradient(180deg, #20f3a0, transparent);
  box-shadow: 0 0 20px rgba(32,243,160,.38);
}

.orbit-stack {
  display: grid;
  place-items: center;
}

.orbit-stack::before {
  content: "";
  width: 230px;
  aspect-ratio: 1;
  border: 1px solid rgba(32,243,160,.22);
  border-radius: 50%;
  box-shadow:
    0 0 80px rgba(32,243,160,.12),
    inset 0 0 46px rgba(32,243,160,.08);
}

.orbit-stack span {
  position: absolute;
  display: grid;
  place-items: center;
  width: 76px;
  height: 76px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 50%;
  color: rgba(255,255,255,.86);
  background: rgba(255,255,255,.04);
  backdrop-filter: blur(12px);
}

.orbit-stack span:nth-child(1) { transform: translateY(-118px); }
.orbit-stack span:nth-child(2) { transform: translateX(118px); }
.orbit-stack span:nth-child(3) { transform: translateY(118px); }
.orbit-stack span:nth-child(4) { transform: translateX(-118px); }

.growth-bars {
  display: flex;
  align-items: end;
  justify-content: center;
  gap: 22px;
  padding: 40px 24px;
}

.growth-bars i {
  width: 46px;
  border-radius: 999px 999px 12px 12px;
  background: linear-gradient(180deg, rgba(32,243,160,.92), rgba(16,185,129,.20));
  box-shadow: 0 0 42px rgba(32,243,160,.24);
}

.growth-bars i:nth-child(1) { height: 92px; opacity: .56; }
.growth-bars i:nth-child(2) { height: 148px; opacity: .72; }
.growth-bars i:nth-child(3) { height: 206px; opacity: .90; }
.growth-bars i:nth-child(4) { height: 240px; }

@keyframes orbFloat {
  0%, 100% { transform: translate(-50%, -50%) translateY(0); }
  50% { transform: translate(-50%, -50%) translateY(-16px); }
}

/* Second screen compact product narrative: one viewport, unified type. */
.ai-origin {
  min-height: 100vh;
  padding: 84px 0 52px;
}

.infrastructure-section {
  width: min(1180px, calc(100% - 72px));
}

.infra-hero {
  max-width: 760px;
  margin: 0 auto 34px;
  padding: 10px 0 0;
}

.infra-hero::before {
  inset: -44px 14% auto;
  height: 160px;
  opacity: .56;
}

.infra-pill {
  margin-bottom: 16px;
  padding: 5px 13px;
  font-size: 10px;
  letter-spacing: .16em;
}

.infra-hero h2 {
  margin-bottom: 14px;
  font-size: clamp(32px, 3.35vw, 46px);
  line-height: 1.08;
}

.infra-hero p {
  max-width: 680px;
  font-size: 14px;
  line-height: 1.75;
}

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

.infra-module,
.infra-module.reverse {
  grid-template-columns: minmax(0, 1fr) 174px;
  gap: 24px;
  align-items: center;
  min-height: 228px;
  padding: 24px;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 22px;
  background:
    radial-gradient(circle at 82% 20%, rgba(32,243,160,.10), transparent 34%),
    rgba(255,255,255,.018);
  box-shadow:
    0 34px 90px rgba(0,0,0,.30),
    inset 0 1px 0 rgba(255,255,255,.09);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.infra-module.reverse .infra-copy,
.infra-module.reverse .infra-visual {
  grid-column: auto;
  grid-row: auto;
}

.infra-module:not(.reverse) .infra-visual,
.infra-module.reverse .infra-visual {
  justify-self: end;
}

.infra-copy span {
  margin-bottom: 12px;
  gap: 10px;
  font-size: 10px;
  letter-spacing: .18em;
}

.infra-copy span::after {
  width: 28px;
}

.infra-copy h3 {
  margin-bottom: 12px;
  font-size: 24px;
  line-height: 1.2;
  font-weight: 700;
}

.infra-copy p {
  max-width: 420px;
  margin-bottom: 14px;
  font-size: 14px;
  line-height: 1.72;
}

.infra-copy ul {
  gap: 6px;
}

.infra-copy li {
  padding-left: 22px;
  font-size: 13px;
  line-height: 1.5;
}

.infra-copy li::before {
  top: .38em;
  width: 12px;
  height: 12px;
  background:
    radial-gradient(circle at center, #20f3a0 0 2px, transparent 3px),
    rgba(32,243,160,.08);
}

.infra-visual {
  width: 174px;
  min-height: 174px;
  border-radius: 18px;
}

.infra-visual strong {
  bottom: 18px;
  font-size: 12px;
}

.orb {
  width: 78px;
  height: 78px;
  top: 44%;
  box-shadow:
    0 0 44px rgba(32,243,160,.50),
    inset 0 0 28px rgba(255,255,255,.20);
}

.flow-console,
.orbit-stack,
.growth-bars {
  inset: 20px;
}

.flow-console {
  gap: 11px;
}

.flow-console span {
  height: 36px;
  border-radius: 10px;
  font-size: 11px;
}

.flow-console span:not(:last-child)::after {
  bottom: -11px;
  height: 11px;
}

.orbit-stack::before {
  width: 112px;
}

.orbit-stack span {
  width: 48px;
  height: 48px;
  font-size: 11px;
}

.orbit-stack span:nth-child(1) { transform: translateY(-62px); }
.orbit-stack span:nth-child(2) { transform: translateX(62px); }
.orbit-stack span:nth-child(3) { transform: translateY(62px); }
.orbit-stack span:nth-child(4) { transform: translateX(-62px); }

.growth-bars {
  gap: 12px;
  padding: 24px 16px;
}

.growth-bars i {
  width: 24px;
}

.growth-bars i:nth-child(1) { height: 48px; }
.growth-bars i:nth-child(2) { height: 76px; }
.growth-bars i:nth-child(3) { height: 104px; }
.growth-bars i:nth-child(4) { height: 132px; }

.ai-origin-grid,
.capability-system,
.delivery-grid,
.about-brief,
.contact-console {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: clamp(48px, 7vw, 112px);
  align-items: center;
}

.ai-platform {
  position: relative;
  min-height: 620px;
  perspective: 1400px;
}

.ai-platform::before {
  content: "";
  position: absolute;
  inset: 8% -4% 0 12%;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(56, 189, 248, .14), rgba(52, 211, 153, .08) 34%, transparent 70%);
  filter: blur(10px);
  transform: rotateX(68deg);
}

.platform-core,
.platform-layer {
  position: absolute;
  border: 1px solid rgba(255,255,255,.14);
  background:
    linear-gradient(145deg, rgba(255,255,255,.13), rgba(255,255,255,.035)),
    radial-gradient(circle at 18% 0, rgba(52, 211, 153, .20), transparent 42%);
  box-shadow:
    0 34px 90px rgba(0,0,0,.36),
    inset 0 1px 0 rgba(255,255,255,.16);
  backdrop-filter: blur(22px);
}

.platform-core {
  right: 8%;
  top: 34%;
  width: 270px;
  height: 270px;
  display: grid;
  place-items: center;
  text-align: center;
  border-radius: 50%;
  animation: softFloat 7s ease-in-out infinite;
}

.platform-core span,
.platform-layer span,
.resource-card span {
  display: block;
  margin-bottom: 10px;
  color: rgba(141, 240, 189, .82);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .22em;
}

.platform-core strong {
  display: block;
  color: #fff;
  font-size: 30px;
  line-height: 1.25;
  font-weight: 680;
}

.platform-layer {
  width: 360px;
  min-height: 138px;
  padding: 24px 28px;
  border-radius: 18px;
  transform: rotateY(-12deg) rotateX(2deg);
}

.platform-layer strong,
.resource-card strong {
  display: block;
  color: #fff;
  font-size: 25px;
  line-height: 1.25;
  font-weight: 680;
}

.platform-layer em {
  display: block;
  margin-top: 12px;
  color: rgba(255,255,255,.52);
  font-size: 14px;
  font-style: normal;
}

.layer-one { left: 0; top: 8%; }
.layer-two { right: 0; top: 58%; animation: softFloat 8s ease-in-out infinite reverse; }
.layer-three { left: 8%; bottom: 5%; animation: softFloat 9s ease-in-out infinite; }

.ai-section-head {
  max-width: 820px;
  margin-bottom: 54px;
}

.solution-board {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  min-height: 460px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 22px;
  overflow: hidden;
  background: rgba(255,255,255,.025);
  box-shadow: 0 60px 160px rgba(0,0,0,.35);
}

.solution-board article {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 34px;
  border-right: 1px solid rgba(255,255,255,.08);
  background:
    radial-gradient(circle at 58% 10%, rgba(52, 211, 153, .11), transparent 34%),
    linear-gradient(180deg, transparent, rgba(255,255,255,.035));
  overflow: hidden;
}

.solution-board article:last-child {
  border-right: 0;
}

.solution-board article::before {
  content: "";
  position: absolute;
  inset: auto -20% -18% -20%;
  height: 45%;
  background: radial-gradient(ellipse at center, rgba(141, 240, 189, .15), transparent 70%);
  transform: translateY(30px);
  opacity: 0;
  transition: opacity .28s ease, transform .28s ease;
}

.solution-board article:hover::before {
  opacity: 1;
  transform: translateY(0);
}

.solution-board span {
  position: absolute;
  left: 34px;
  top: 32px;
  color: rgba(255,255,255,.34);
  font-size: 13px;
  letter-spacing: .18em;
}

.solution-board p {
  position: relative;
  font-size: 15px;
  line-height: 1.85;
}

.ai-capability {
  background:
    radial-gradient(circle at 28% 46%, rgba(34, 197, 94, .16), transparent 28%),
    linear-gradient(180deg, rgba(255,255,255,.015), rgba(255,255,255,.035));
}

.capability-system {
  grid-template-columns: 1.1fr .9fr;
}

.capability-map {
  position: relative;
  min-height: 680px;
  border-radius: 36px;
  background:
    radial-gradient(circle at 50% 50%, rgba(52, 211, 153, .18), transparent 20%),
    radial-gradient(circle at 50% 50%, rgba(56, 189, 248, .08), transparent 46%),
    linear-gradient(145deg, rgba(255,255,255,.06), rgba(255,255,255,.015));
  border: 1px solid rgba(255,255,255,.10);
  overflow: hidden;
}

.capability-map::before {
  content: "";
  position: absolute;
  inset: 10%;
  border-radius: 50%;
  background: conic-gradient(from 90deg, rgba(141,240,189,.08), transparent, rgba(56,189,248,.12), transparent, rgba(141,240,189,.08));
  animation: slowRotate 22s linear infinite;
}

.cap-ring {
  position: absolute;
  left: 50%;
  top: 50%;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.ring-one {
  width: 62%;
  aspect-ratio: 1;
}

.ring-two {
  width: 86%;
  aspect-ratio: 1;
  opacity: .58;
}

.cap-node {
  position: absolute;
  z-index: 2;
  min-width: 112px;
  padding: 12px 16px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 999px;
  background: rgba(8, 14, 15, .70);
  box-shadow: 0 18px 44px rgba(0,0,0,.28);
  color: rgba(255,255,255,.88);
  text-align: center;
  font-weight: 600;
  backdrop-filter: blur(16px);
}

.cap-root {
  left: 50%;
  top: 50%;
  min-width: 176px;
  padding: 22px 24px;
  color: #02110b;
  background: linear-gradient(135deg, #c9ffe1, #35d18d);
  transform: translate(-50%, -50%);
}

.cap-a { left: 18%; top: 24%; }
.cap-b { right: 15%; top: 25%; }
.cap-c { left: 10%; top: 54%; }
.cap-d { right: 9%; top: 56%; }
.cap-e { left: 31%; bottom: 14%; }
.cap-f { right: 28%; bottom: 15%; }

.tech-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 28px;
}

.tech-strip span {
  padding: 8px 12px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 999px;
  color: rgba(255,255,255,.58);
  background: rgba(255,255,255,.035);
  font-size: 13px;
}

.ai-delivery {
  background:
    radial-gradient(circle at 80% 42%, rgba(55, 65, 81, .34), transparent 28%),
    linear-gradient(180deg, rgba(255,255,255,.018), transparent);
}

.delivery-flow {
  display: grid;
  gap: 18px;
}

.delivery-flow div {
  position: relative;
  display: grid;
  grid-template-columns: 72px 1fr;
  align-items: center;
  min-height: 96px;
  padding: 0 28px;
  border: 1px solid rgba(255,255,255,.11);
  border-radius: 18px;
  background:
    linear-gradient(90deg, rgba(255,255,255,.08), rgba(255,255,255,.025)),
    radial-gradient(circle at 0% 50%, rgba(141, 240, 189, .12), transparent 34%);
  backdrop-filter: blur(18px);
}

.delivery-flow span {
  color: rgba(141, 240, 189, .92);
  font-size: 13px;
  letter-spacing: .18em;
}

.delivery-flow strong {
  color: #fff;
  font-size: clamp(19px, 1.6vw, 26px);
  font-weight: 660;
}

.resource-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 18px;
}

.resource-card {
  min-height: 360px;
  padding: 34px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 24px;
  background:
    radial-gradient(circle at 74% 18%, rgba(141, 240, 189, .13), transparent 34%),
    linear-gradient(145deg, rgba(255,255,255,.08), rgba(255,255,255,.025));
  box-shadow: 0 48px 120px rgba(0,0,0,.32);
}

.resource-card.large {
  min-height: 420px;
}

.resource-card.large h2 {
  font-size: clamp(34px, 3.4vw, 52px);
}

.resource-card p {
  margin-top: 18px;
  font-size: 15px;
}

.ai-about {
  min-height: auto;
  padding: 108px 0;
}

.about-brief {
  grid-template-columns: .78fr 1.22fr;
  padding: 48px 0;
  border-top: 1px solid rgba(255,255,255,.10);
  border-bottom: 1px solid rgba(255,255,255,.10);
}

.about-brief p:last-child {
  font-size: 18px;
  line-height: 2;
}

.ai-contact {
  min-height: auto;
  padding: 104px 0 120px;
}

.contact-console {
  grid-template-columns: 1fr .92fr;
  align-items: stretch;
  padding: clamp(34px, 5vw, 64px);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 30px;
  background:
    radial-gradient(circle at 88% 10%, rgba(141, 240, 189, .16), transparent 30%),
    linear-gradient(145deg, rgba(255,255,255,.075), rgba(255,255,255,.025));
  box-shadow: 0 60px 150px rgba(0,0,0,.38);
}

.contact-console h2 {
  font-size: clamp(34px, 3.6vw, 56px);
}

.contact-console dl {
  padding: 8px 0;
}

.contact-console dl div {
  grid-template-columns: 96px 1fr;
  border-bottom-color: rgba(255,255,255,.10);
}

.contact-console dt {
  color: rgba(255,255,255,.46);
}

.contact-console dd {
  color: rgba(255,255,255,.88);
}

.contact-console dd a {
  color: #8df0bd;
}

.site-footer {
  border-top-color: rgba(255,255,255,.08);
  background: #030505;
}

@keyframes softFloat {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -18px; }
}

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

@media (prefers-reduced-motion: reduce) {
  .ai-section {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .platform-core,
  .layer-two,
  .layer-three,
  .capability-map::before {
    animation: none;
  }
}

@media (max-width: 980px) {
  .ai-section {
    min-height: auto;
    padding: 86px 0;
  }

  .ai-origin-grid,
  .capability-system,
  .delivery-grid,
  .about-brief,
  .contact-console {
    grid-template-columns: 1fr;
  }

  .ai-platform {
    min-height: 520px;
  }

  .bento-section {
    width: min(100% - 40px, 1180px);
  }

  .bento-matrix {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
  }

  .bento-tall,
  .bento-wide {
    grid-column: 1 / -1;
    grid-row: auto;
    min-height: 300px;
  }

  .bento-card:not(.bento-tall) {
    grid-column: auto;
    grid-row: auto;
  }

  .bento-card:last-child {
    grid-column: 1 / -1;
  }

  .infrastructure-section {
    width: min(100% - 40px, 1180px);
  }

  .infra-hero {
    margin-bottom: 62px;
  }

  .infra-module,
  .infra-module.reverse {
    grid-template-columns: 1fr;
    gap: 34px;
    min-height: auto;
  }

  .infra-module.reverse .infra-copy,
  .infra-module.reverse .infra-visual {
    grid-column: auto;
    grid-row: auto;
  }

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

  .solution-board,
  .resource-grid {
    grid-template-columns: 1fr 1fr;
  }

  .solution-board article {
    min-height: 300px;
    border-bottom: 1px solid rgba(255,255,255,.08);
  }

  .capability-system {
    display: flex;
    flex-direction: column-reverse;
  }

  .capability-map {
    width: 100%;
    min-height: 560px;
  }

  .resource-card.large {
    grid-column: 1 / -1;
  }
}

@media (max-width: 640px) {
  .ai-section {
    padding: 70px 0;
  }

  .ai-section h2 {
    font-size: 31px;
  }

  .ai-section p {
    font-size: 15px;
    line-height: 1.8;
  }

  .ai-kicker {
    font-size: 11px;
    letter-spacing: .20em;
  }

  .ai-platform {
    min-height: 600px;
  }

  .bento-section {
    width: min(100% - 32px, 1180px);
  }

  .bento-head {
    margin-bottom: 28px;
  }

  .bento-head h2 {
    font-size: 42px;
    line-height: 1.04;
  }

  .bento-matrix {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .bento-card,
  .bento-tall,
  .bento-wide {
    min-height: 250px;
    border-radius: 20px;
  }

  .bento-card:last-child {
    grid-column: auto;
  }

  .bento-card:not(.bento-tall) {
    grid-column: auto;
    grid-row: auto;
  }

  .infrastructure-section {
    width: min(100% - 32px, 1180px);
  }

  .infra-hero {
    margin-bottom: 48px;
    padding-top: 18px;
  }

  .infra-hero h2 {
    font-size: 36px;
  }

  .infra-hero p {
    font-size: 15px;
    line-height: 1.75;
  }

  .infra-showcase {
    gap: 74px;
  }

  .infra-copy h3 {
    font-size: 30px;
  }

  .infra-copy p {
    font-size: 15px;
    line-height: 1.75;
  }

  .infra-visual {
    min-height: 300px;
  }

  .orb {
    width: 126px;
    height: 126px;
  }

  .orbit-stack::before {
    width: 210px;
  }

  .orbit-stack span {
    width: 64px;
    height: 64px;
    font-size: 13px;
  }

  .orbit-stack span:nth-child(1) { transform: translateY(-106px); }
  .orbit-stack span:nth-child(2) { transform: translateX(106px); }
  .orbit-stack span:nth-child(3) { transform: translateY(106px); }
  .orbit-stack span:nth-child(4) { transform: translateX(-106px); }

  .growth-bars i {
    width: 38px;
  }

  .growth-bars i:nth-child(4) {
    height: 210px;
  }

  .bento-card h3,
  .bento-tall h3,
  .bento-wide h3 {
    font-size: 28px;
  }

  .bento-card p,
  .bento-tall p {
    font-size: 15px;
  }

  .platform-core {
    right: 50%;
    top: 34%;
    width: 210px;
    height: 210px;
    transform: translateX(50%);
  }

  .platform-core strong {
    font-size: 23px;
  }

  .platform-layer {
    left: 0;
    right: 0;
    width: 100%;
    min-height: 116px;
    padding: 20px;
    transform: none;
  }

  .layer-one { top: 0; }
  .layer-two { top: 66%; }
  .layer-three { bottom: 0; }

  .solution-board,
  .resource-grid {
    grid-template-columns: 1fr;
  }

  .solution-board article {
    min-height: 240px;
    padding: 28px;
    border-right: 0;
  }

  .capability-map {
    min-height: 460px;
    border-radius: 22px;
  }

  .cap-node {
    min-width: 88px;
    padding: 9px 11px;
    font-size: 13px;
  }

  .cap-root {
    min-width: 132px;
    padding: 16px;
  }

  .cap-a { left: 8%; top: 20%; }
  .cap-b { right: 7%; top: 21%; }
  .cap-c { left: 4%; top: 58%; }
  .cap-d { right: 4%; top: 58%; }
  .cap-e { left: 18%; bottom: 11%; }
  .cap-f { right: 17%; bottom: 11%; }

  .delivery-flow div {
    grid-template-columns: 52px 1fr;
    min-height: 82px;
    padding: 0 18px;
  }

  .resource-card,
  .resource-card.large {
    min-height: 260px;
    padding: 26px;
  }

  .contact-console {
    padding: 28px;
    border-radius: 22px;
  }

  .contact-console dl div {
    grid-template-columns: 1fr;
  }
}

/* Final second-screen fit pass: premium infrastructure stage. */
#services.ai-origin {
  min-height: 100svh;
  height: 100svh;
  min-height: 720px;
  scroll-margin-top: 0;
  padding: 92px 0 48px;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 18%, rgba(32,243,160,.07), transparent 24%),
    radial-gradient(circle at 78% 55%, rgba(32,243,160,.10), transparent 31%),
    radial-gradient(circle at 7% 76%, rgba(32,243,160,.055), transparent 30%),
    linear-gradient(180deg, #050807, #090d0c 46%, #050706);
}

#services .infrastructure-section {
  width: min(1120px, calc(100% - 112px));
  min-height: calc(100svh - 120px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

#services .infra-hero {
  max-width: 820px;
  margin: 0 auto 22px;
  padding: 0;
}

#services .infra-hero::before {
  inset: -54px 18% auto;
  height: 150px;
  opacity: .36;
}

#services .infra-pill {
  margin-bottom: 10px;
  padding: 4px 11px;
  font-size: 9px;
  letter-spacing: .16em;
}

#services .infra-pill::before {
  width: 5px;
  height: 5px;
}

#services .infra-hero h2 {
  margin-bottom: 8px;
  font-size: clamp(30px, 2.45vw, 38px);
  line-height: 1.08;
  font-weight: 760;
  letter-spacing: 0;
}

#services .infra-hero p {
  max-width: 760px;
  color: rgba(255,255,255,.56);
  font-size: 12.5px;
  line-height: 1.62;
  white-space: normal;
}

#services .infra-showcase {
  display: grid;
  grid-template-columns: minmax(0, 1.03fr) minmax(0, .87fr);
  grid-template-rows: repeat(3, 118px);
  gap: 16px 20px;
  align-items: stretch;
  position: relative;
  border: 0;
  background: transparent;
  box-shadow: none;
  overflow: hidden;
}

#services .infra-showcase::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid rgba(255,255,255,.045);
  border-radius: 14px;
  pointer-events: none;
}

#services .infra-showcase::after {
  display: none;
}

#services .infra-module,
#services .infra-module.reverse {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 118px;
  gap: 16px;
  align-items: center;
  min-width: 0;
  min-height: 118px;
  padding: 18px 22px;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 12px;
  background:
    radial-gradient(circle at 88% 46%, rgba(32,243,160,.15), transparent 38%),
    linear-gradient(130deg, rgba(255,255,255,.06), rgba(255,255,255,.012) 52%, rgba(16,185,129,.035));
  box-shadow:
    0 34px 90px rgba(0,0,0,.36),
    inset 0 1px 0 rgba(255,255,255,.105);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  overflow: hidden;
}

#services .infra-module:not(:first-child) {
  grid-template-columns: minmax(0, 1fr) 80px;
  width: 100%;
  max-width: 100%;
  height: 100%;
  padding: 24px;
}

#services .infra-module:first-child {
  grid-row: 1 / 4;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  min-height: 378px;
  padding: 30px 30px 28px;
  overflow: visible;
  background:
    radial-gradient(circle at 76% 60%, rgba(32,243,160,.28), transparent 28%),
    radial-gradient(circle at 92% 22%, rgba(32,243,160,.10), transparent 30%),
    linear-gradient(140deg, rgba(255,255,255,.07), rgba(255,255,255,.012) 45%, rgba(16,185,129,.07));
}

#services .infra-module:first-child .infra-copy {
  max-width: 350px;
  position: relative;
  z-index: 2;
}

#services .infra-module:first-child .infra-visual {
  position: absolute;
  right: 24px;
  bottom: 22px;
  justify-self: auto;
  align-self: auto;
  width: 200px;
  min-height: 200px;
  opacity: 1;
  pointer-events: none;
  transform: none;
}

#services .infra-module.reverse .infra-copy,
#services .infra-module.reverse .infra-visual {
  grid-column: auto;
  grid-row: auto;
}

#services .infra-copy span {
  margin-bottom: 6px;
  gap: 12px;
  color: #5DCAA5;
  font-size: 10px;
  letter-spacing: .10em;
}

#services .infra-copy span::after {
  width: 34px;
}

#services .infra-copy h3 {
  margin-bottom: 7px;
  font-size: 22px;
  line-height: 1.18;
  font-weight: 760;
  color: #D4F5E9;
}

#services .infra-copy p {
  max-width: 330px;
  margin-bottom: 7px;
  color: #8BBFAA;
  font-size: 12px;
  line-height: 1.58;
}

#services .infra-module:not(:first-child) .infra-copy {
  min-width: 0;
}

#services .infra-module:first-child .infra-copy h3 {
  margin-bottom: 14px;
  font-size: clamp(30px, 2.75vw, 38px);
  text-shadow: 0 24px 64px rgba(0,0,0,.42);
  color: #FFFFFF;
}

#services .infra-module:first-child .infra-copy h3::after {
  content: "";
  display: block;
  width: 34px;
  height: 2px;
  margin-top: 14px;
  background: #20f3a0;
  box-shadow: 0 0 18px rgba(32,243,160,.58);
}

#services .infra-module:first-child .infra-copy p {
  max-width: 350px;
  margin-bottom: 17px;
  font-size: 12px;
  line-height: 1.62;
}

#services .infra-copy ul {
  gap: 7px;
}

#services .infra-copy li {
  padding-left: 20px;
  color: #FFFFFF;
  font-size: 10.5px;
  line-height: 1.42;
}

#services .infra-copy li::before {
  top: .35em;
  width: 10px;
  height: 10px;
  background:
    radial-gradient(circle at center, #20f3a0 0 2px, transparent 3px),
    rgba(32,243,160,.08);
}

#services .infra-visual {
  width: 80px;
  min-height: 80px;
  justify-self: end;
  align-self: center;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

#services .infra-visual::before,
#services .infra-visual::after {
  display: none;
}

#services .infra-visual img {
  display: block;
  width: 80px;
  height: 80px;
  object-fit: contain;
  border: 0;
  border-radius: 0;
  background: transparent;
  mix-blend-mode: normal;
  filter: drop-shadow(0 24px 34px rgba(0,0,0,.34));
  transform: translateZ(0);
}

#services .infra-module:first-child .infra-visual img {
  width: 160px;
  height: 160px;
}

.site-nav a.is-active {
  color: #1D9E75;
}

/* Solutions page rebuild. */
.ai-solutions {
  position: relative;
  overflow: hidden;
  padding: 80px 0 80px;
  background: #0a1a10;
  color: #fff;
  font-family: "PingFang SC", "Helvetica Neue", Arial, sans-serif;
}

.solution-glow {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  border-radius: 50%;
}

.solution-glow-left {
  top: 20%;
  left: 10%;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(29,158,117,.08) 0%, transparent 70%);
}

.solution-glow-right {
  top: 0;
  right: 15%;
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, rgba(29,158,117,.06) 0%, transparent 70%);
}

.solution-side-label {
  position: absolute;
  left: 40px;
  top: 50%;
  z-index: 1;
  color: rgba(29,158,117,.38);
  font-size: 11px;
  letter-spacing: 6px;
  transform: rotate(-90deg);
  transform-origin: left center;
}

.solution-hero {
  position: relative;
  z-index: 1;
  padding: 0 120px;
}

.solution-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 24px;
  padding: 5px 16px;
  border: 1px solid #1D9E75;
  border-radius: 20px;
  color: #9FE1CB;
  font-size: 12px;
  line-height: 1.4;
}

.solution-badge span {
  color: #1D9E75;
}

.solution-label {
  margin: 0 0 20px;
  padding-left: 12px;
  border-left: 3px solid #1D9E75;
  color: #5DCAA5;
  font-size: 13px;
  letter-spacing: 4px;
}

.solution-hero h2 {
  max-width: 820px;
  margin: 0 0 20px;
  color: #FFFFFF;
  font-size: 52px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: 1px;
}

.solution-subtitle {
  max-width: 600px;
  margin: 0 0 48px;
  color: #5DCAA5;
  font-size: 16px;
  line-height: 1.8;
}

.solution-divider {
  width: 100%;
  height: 1px;
  margin-bottom: 48px;
  background: linear-gradient(90deg, rgba(29,158,117,.19) 0%, rgba(29,158,117,.06) 50%, transparent 100%);
}

.ai-solutions .solution-board {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  width: auto;
  min-height: 0;
  margin: 0;
  padding: 0 120px;
  border: 0;
  border-radius: 0;
  overflow: visible;
  background: transparent;
  box-shadow: none;
}

.ai-solutions .solution-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 400px;
  padding: 0;
  border: 1px solid rgba(29,158,117,.19);
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  background: #0d2a1c;
  box-shadow: none;
  opacity: 0;
  transform: translateY(22px);
  animation: fadeInUp .5s ease forwards;
  transition: border-color .3s ease, transform .3s ease, box-shadow .3s ease;
}

.ai-solutions .solution-card:nth-child(1) { animation-delay: .1s; }
.ai-solutions .solution-card:nth-child(2) { animation-delay: .2s; }
.ai-solutions .solution-card:nth-child(3) { animation-delay: .3s; }
.ai-solutions .solution-card:nth-child(4) { animation-delay: .4s; }
.ai-solutions .solution-card:nth-child(5) { animation-delay: .5s; }
.ai-solutions .solution-card:nth-child(6) { animation-delay: .6s; }

.ai-solutions .solution-card:hover {
  border-color: #1D9E75;
  transform: translateY(-4px);
  box-shadow: 0 8px 32px rgba(29,158,117,.13);
}

.ai-solutions .solution-card::before {
  display: none;
}

.solution-visual {
  position: relative;
  height: 180px;
  overflow: hidden;
}

.solution-visual::before,
.solution-visual::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.solution-pattern-circuit .solution-visual {
  background:
    radial-gradient(circle at 30% 50%, rgba(29,158,117,.15) 0%, transparent 60%),
    linear-gradient(135deg, transparent 0 46%, rgba(29,158,117,.13) 47%, transparent 48% 100%),
    linear-gradient(45deg, transparent 0 58%, rgba(29,158,117,.10) 59%, transparent 60% 100%);
}

.solution-pattern-circuit .solution-visual::before {
  background:
    linear-gradient(90deg, transparent 0 24%, rgba(29,158,117,.13) 24.5%, transparent 25% 100%),
    linear-gradient(0deg, transparent 0 34%, rgba(29,158,117,.10) 34.5%, transparent 35% 100%);
}

.solution-pattern-dots .solution-visual {
  background:
    radial-gradient(circle at 70% 40%, rgba(29,158,117,.13) 0%, transparent 60%),
    radial-gradient(circle, rgba(29,158,117,.10) 1px, transparent 1px);
  background-size: auto, 18px 18px;
}

.solution-pattern-flow .solution-visual {
  background:
    radial-gradient(circle at 50% 60%, rgba(29,158,117,.13) 0%, transparent 60%),
    repeating-linear-gradient(135deg, rgba(29,158,117,.08) 0 1px, transparent 1px 18px);
}

.solution-pattern-hex .solution-visual {
  background:
    radial-gradient(circle at 60% 30%, rgba(29,158,117,.13) 0%, transparent 60%),
    linear-gradient(30deg, rgba(29,158,117,.08) 12%, transparent 12.5%, transparent 87%, rgba(29,158,117,.08) 87.5%),
    linear-gradient(150deg, rgba(29,158,117,.08) 12%, transparent 12.5%, transparent 87%, rgba(29,158,117,.08) 87.5%);
  background-size: auto, 42px 72px, 42px 72px;
}

.solution-pattern-node .solution-visual {
  background: radial-gradient(circle at 40% 50%, rgba(29,158,117,.13) 0%, transparent 60%);
}

.solution-pattern-node .solution-visual::before {
  background:
    radial-gradient(circle at 24% 48%, rgba(29,158,117,.42) 0 3px, transparent 4px),
    radial-gradient(circle at 50% 34%, rgba(29,158,117,.34) 0 3px, transparent 4px),
    radial-gradient(circle at 72% 62%, rgba(29,158,117,.34) 0 3px, transparent 4px),
    linear-gradient(24deg, transparent 0 45%, rgba(29,158,117,.10) 46%, transparent 47% 100%);
}

.solution-pattern-building .solution-visual {
  background:
    radial-gradient(circle at 50% 40%, rgba(29,158,117,.09) 0%, transparent 60%),
    linear-gradient(rgba(29,158,117,.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(29,158,117,.08) 1px, transparent 1px);
  background-size: auto, 28px 28px, 28px 28px;
}

.solution-content {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: flex-end;
  padding: 24px;
}

.ai-solutions .solution-card span {
  position: static;
  display: block;
  margin-bottom: 12px;
  color: #1D9E75;
  font-size: 12px;
  letter-spacing: 3px;
  transition: color .3s ease;
}

.ai-solutions .solution-card:hover span {
  color: #9FE1CB;
}

.ai-solutions .solution-card h3 {
  margin: 0 0 12px;
  color: #FFFFFF;
  font-size: 20px;
  font-weight: 500;
  line-height: 1.35;
}

.ai-solutions .solution-card p {
  position: static;
  margin: 0;
  color: #8BBFAA;
  font-size: 13px;
  line-height: 1.8;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(22px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 1200px) {
  .solution-hero,
  .ai-solutions .solution-board {
    padding-left: 64px;
    padding-right: 64px;
  }

  .ai-solutions .solution-board {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  .ai-solutions {
    padding: 64px 0;
  }

  .solution-hero,
  .ai-solutions .solution-board {
    padding-left: 24px;
    padding-right: 24px;
  }

  .solution-side-label {
    display: none;
  }

  .solution-hero h2 {
    font-size: 34px;
  }

  .solution-subtitle {
    font-size: 14px;
  }

  .ai-solutions .solution-board {
    grid-template-columns: 1fr;
  }
}

/* Compact one-screen solutions layout. */
@media (min-width: 981px) {
  .ai-solutions {
    min-height: 100svh;
    padding: 96px 96px 48px;
    display: grid;
    grid-template-columns: minmax(260px, .55fr) minmax(0, 1.45fr);
    gap: 44px;
    align-items: center;
  }

  .solution-glow-left {
    left: 4%;
  }

  .solution-glow-right {
    right: 6%;
  }

  .solution-hero {
    padding: 0;
  }

  .solution-badge {
    margin-bottom: 18px;
  }

  .solution-label {
    margin-bottom: 18px;
  }

  .solution-hero h2 {
    max-width: 430px;
    margin-bottom: 10px;
    font-size: clamp(30px, 2.45vw, 38px);
    line-height: 1.08;
    font-weight: 760;
    letter-spacing: 0;
  }

  .solution-subtitle {
    max-width: 430px;
    margin-bottom: 24px;
    font-size: 12.5px;
    line-height: 1.62;
  }

  .solution-divider {
    margin-bottom: 0;
  }

  .ai-solutions .solution-board {
    padding: 0;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(230px, 1fr));
    gap: 16px;
    align-self: stretch;
    align-content: center;
  }

  .ai-solutions .solution-card {
    min-height: 0;
    height: 100%;
  }

  .solution-visual {
    height: 118px;
  }

  .solution-icon {
    position: absolute;
    left: 24px;
    top: 22px;
    width: 72px;
    height: 72px;
    fill: none;
    stroke: #9FE1CB;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
    filter: drop-shadow(0 0 18px rgba(29,158,117,.42));
  }

  .solution-content {
    padding: 20px 22px 22px;
  }

  .ai-solutions .solution-card span {
    margin-bottom: 8px;
    font-size: 11px;
  }

  .ai-solutions .solution-card h3 {
    margin-bottom: 8px;
    font-size: 18px;
  }

  .ai-solutions .solution-card p {
    font-size: 12px;
    line-height: 1.68;
  }
}

#scenarios .solution-card h3 {
  font-size: 18px;
  line-height: 1.35;
  letter-spacing: 0;
}

#scenarios .solution-hero h2 {
  font-size: clamp(30px, 2.45vw, 38px);
  line-height: 1.08;
  font-weight: 760;
}

#scenarios .solution-subtitle {
  font-size: 12.5px;
  line-height: 1.62;
}

#scenarios .solution-hero h2 {
  max-width: 560px;
  color: #fff;
  font-size: clamp(34px, 3vw, 48px);
  line-height: 1.18;
  font-weight: 720;
  letter-spacing: 0;
}

#scenarios .solution-subtitle {
  max-width: 440px;
  color: rgba(159,225,203,.76);
  font-size: 14px;
  line-height: 1.7;
}

@media (min-width: 981px) {
  #scenarios .solution-hero h2 {
    margin-bottom: 18px;
  }

  #scenarios .solution-subtitle {
    margin-bottom: 26px;
  }
}

@media (max-width: 640px) {
  #scenarios .solution-hero h2 {
    font-size: 34px;
  }
}

@media (min-width: 981px) and (max-height: 820px) {
  .ai-solutions {
    padding-top: 86px;
    padding-bottom: 36px;
  }

  .ai-solutions .solution-board {
    grid-template-rows: repeat(2, 214px);
  }

  .solution-visual {
    height: 96px;
  }

  .solution-icon {
    width: 58px;
    height: 58px;
  }

  .solution-content {
    padding: 16px 18px 18px;
  }

  .ai-solutions .solution-card p {
    line-height: 1.55;
  }
}

@media (max-width: 980px) {
  .solution-icon {
    position: absolute;
    left: 24px;
    top: 24px;
    width: 76px;
    height: 76px;
    fill: none;
    stroke: #9FE1CB;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
    filter: drop-shadow(0 0 18px rgba(29,158,117,.42));
  }
}

#services .infra-module:not(:first-child) .infra-visual {
  width: 80px;
  min-height: 80px;
}

@media (max-width: 980px) {
  #services.ai-origin {
    height: auto;
    min-height: 100svh;
    padding: 86px 0 48px;
    overflow: visible;
  }

  #services .infrastructure-section {
    width: min(100% - 34px, 1120px);
    min-height: calc(100svh - 114px);
  }

  #services .infra-hero {
    margin-bottom: 20px;
  }

  #services .infra-hero h2 {
    font-size: 30px;
  }

  #services .infra-hero p {
    font-size: 12px;
    line-height: 1.5;
    white-space: normal;
  }

  #services .infra-showcase {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(2, 132px);
    gap: 12px;
  }

  #services .infra-module,
  #services .infra-module.reverse {
    grid-template-columns: minmax(0, 1fr) 80px;
    gap: 12px;
    min-height: 132px;
    padding: 16px;
    border-radius: 10px;
  }

  #services .infra-module:first-child {
    grid-row: auto;
    grid-template-columns: minmax(0, 1fr) 80px;
    min-height: 132px;
    padding: 16px;
  }

  #services .infra-module:first-child .infra-copy {
    max-width: none;
  }

  #services .infra-module:first-child .infra-visual {
    position: relative;
    right: auto;
    top: auto;
    bottom: auto;
    justify-self: end;
    align-self: center;
    width: 80px;
    min-height: 80px;
    opacity: 1;
    transform: none;
  }

  #services .infra-visual {
    display: block;
    width: 80px;
    min-height: 80px;
  }

  #services .infra-copy h3 {
    font-size: 19px;
  }

  #services .infra-module:first-child .infra-copy h3 {
    margin-bottom: 7px;
    font-size: 19px;
    text-shadow: none;
  }

  #services .infra-module:first-child .infra-copy h3::after {
    display: none;
  }

  #services .infra-module:first-child .infra-copy p {
    margin-bottom: 7px;
    font-size: 11.5px;
    line-height: 1.52;
  }

  #services .infra-copy p {
    font-size: 11.5px;
    line-height: 1.52;
  }

  #services .infra-copy ul {
    display: none;
  }

  #services .infra-copy li {
    padding-left: 15px;
    font-size: 10px;
    line-height: 1.28;
  }

  #services .infra-copy li::before {
    width: 8px;
    height: 8px;
  }

  #services .infra-copy span {
    margin-bottom: 0;
    font-size: 8px;
  }

  #services .infra-showcase::before {
    display: none;
  }
}

@media (max-width: 640px) {
  #services.ai-origin {
    padding: 78px 0 48px;
  }

  #services .infrastructure-section {
    width: min(100% - 24px, 1120px);
    min-height: calc(100svh - 102px);
  }

  #services .infra-pill {
    display: none;
  }

  #services .infra-hero {
    margin-bottom: 16px;
  }

  #services .infra-hero h2 {
    font-size: 25px;
  }

  #services .infra-hero p {
    font-size: 11px;
    line-height: 1.45;
  }

  #services .infra-showcase {
    gap: 10px;
  }

  #services .infra-module,
  #services .infra-module.reverse {
    grid-template-columns: minmax(0, 1fr) 80px;
    gap: 10px;
    min-height: 132px;
    padding: 13px;
    border-radius: 10px;
  }

  #services .infra-module:first-child {
    grid-template-columns: minmax(0, 1fr) 80px;
    min-height: 132px;
    padding: 13px;
  }

  #services .infra-copy span {
    margin-bottom: 0;
    font-size: 7px;
  }

  #services .infra-copy h3 {
    margin-bottom: 6px;
    font-size: 16px;
  }

  #services .infra-module:first-child .infra-copy h3 {
    font-size: 16px;
  }

  #services .infra-copy p {
    margin-bottom: 6px;
    font-size: 10px;
    line-height: 1.38;
  }

  #services .infra-copy ul {
    display: none;
  }

  #services .infra-visual {
    width: 80px;
    min-height: 80px;
  }
}

/* Premium radius pass: keep structural surfaces crisp; preserve circular marks. */
.site-header,
.hero-slide,
.button,
.cert-badge,
.glass-module,
.infra-showcase,
.infra-module,
.solution-board,
.solution-board article,
.platform-layer,
.resource-card,
.contact-console,
.contact-console input,
.contact-console textarea,
.contact-console button {
  border-radius: min(12px, var(--radius, 12px));
}

/* Final icon-card spacing override. */
#services .infra-showcase {
  gap: 16px 20px;
}

#services .infra-module:not(:first-child) {
  padding: 24px;
}

#services .infra-visual {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  isolation: isolate;
}

#services .infra-visual img {
  width: 80px;
  height: 80px;
  object-fit: contain;
  background: transparent;
  border: 0;
  border-radius: 0;
  mix-blend-mode: normal;
  opacity: 1;
}

#services .infra-module:first-child {
  overflow: visible;
}

#services .infra-module:first-child .infra-visual {
  position: absolute;
  right: 24px;
  bottom: 22px;
  width: 160px;
  min-height: 160px;
}

#services .infra-module:first-child .infra-visual img {
  width: 160px;
  height: 160px;
  opacity: 1;
}

/* Remove the empty spacer feel between infrastructure and scenario sections. */
#services.ai-origin {
  height: auto;
  min-height: 0;
  margin-bottom: 0;
  padding-top: 60px;
  padding-bottom: 60px;
}

#services .infrastructure-section {
  min-height: 0;
}

/* Use the supplied 3D glow assets for the four infrastructure modules. */
#services .infra-visual {
  display: block;
  position: relative;
  justify-self: end;
  align-self: center;
  width: 126px;
  height: 104px;
  min-height: 0;
  overflow: visible;
  isolation: isolate;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  pointer-events: none;
}

#services .infra-visual::before,
#services .infra-visual::after {
  display: none;
}

#services .infra-visual img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: transparent;
  border: 0;
  border-radius: 0;
  mix-blend-mode: screen;
  opacity: .96;
  filter: brightness(1.08) contrast(1.06) drop-shadow(0 0 20px rgba(32,243,160,.32));
}

#services .infra-module:first-child .infra-visual {
  position: absolute;
  right: 34px;
  bottom: 28px;
  width: 210px;
  height: 200px;
}

#services .infra-module:not(:first-child) .infra-visual {
  width: 128px;
  height: 104px;
}

#services .infra-visual-workflow {
  width: 138px;
}

#services .infra-visual-growth {
  width: 132px;
}

@media (max-width: 980px) {
  #services .infra-module:first-child .infra-visual {
    right: 18px;
    bottom: 18px;
    width: 150px;
    height: 142px;
  }

  #services .infra-module:not(:first-child) .infra-visual {
    width: 88px;
    height: 78px;
  }
}

#services .infra-hero {
  text-align: center;
}

#services .infra-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-width: 220px;
  margin: 0 auto 12px;
  padding: 6px 28px;
  border: 1px solid rgba(29,158,117,.92);
  border-radius: 999px;
  color: #9FE1CB;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.45;
  letter-spacing: .04em;
  background: rgba(5, 18, 12, .34);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 0 34px rgba(29,158,117,.08);
}

#services .infra-pill span {
  color: #1D9E75;
  font-size: 24px;
  line-height: 0;
}

#services .infra-hero h2 {
  color: #fff;
  text-shadow: 0 10px 34px rgba(0,0,0,.28);
}

#services .infra-hero p {
  color: #5DCAA5;
  font-weight: 600;
}

#scenarios.ai-solutions {
  margin-top: 0;
}

#services .infra-module,
#services .infra-module.reverse,
#services .infra-module:not(:first-child),
#services .infra-module:first-child {
  grid-template-columns: minmax(0, 1fr);
}

#services .infra-module:first-child .infra-copy,
#services .infra-copy p {
  max-width: none;
}

/* Premium lower homepage rebuild. */
#capability.premium-capability,
#training.premium-delivery,
#resources.premium-resources,
#about.premium-about,
#contact.premium-contact {
  min-height: 100svh;
  padding: 98px 0;
  border-top: 1px solid rgba(255,255,255,.055);
  overflow: hidden;
  background:
    radial-gradient(circle at 82% 22%, rgba(29,158,117,.12), transparent 28%),
    radial-gradient(circle at 14% 68%, rgba(29,158,117,.075), transparent 30%),
    linear-gradient(180deg, #050807 0%, #07100b 52%, #040706 100%);
}

#capability.premium-capability::before,
#training.premium-delivery::before,
#resources.premium-resources::before,
#about.premium-about::before,
#contact.premium-contact::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .24;
  background-image:
    radial-gradient(rgba(157, 255, 207, .26) 1px, transparent 1.5px),
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px);
  background-size: 92px 92px, 140px 140px;
  mask-image: radial-gradient(circle at 50% 44%, #000 0 48%, transparent 78%);
}

.section-mark {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
  color: #5DCAA5;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .24em;
}

.section-mark::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #20f3a0;
  box-shadow: 0 0 18px rgba(32,243,160,.62);
}

.capability-stage,
.delivery-stage,
.resource-stage,
.about-stage,
.contact-stage {
  position: relative;
  z-index: 1;
  width: min(1180px, calc(100% - 96px));
}

.capability-stage {
  display: grid;
  grid-template-columns: .86fr 1.14fr;
  gap: 76px;
  align-items: center;
}

.capability-copy h2,
.stage-head h2,
.resource-main h2,
.about-stage h2,
.contact-stage h2 {
  margin: 0;
  color: #fff;
  font-size: clamp(34px, 3.1vw, 48px);
  line-height: 1.12;
  font-weight: 760;
  letter-spacing: 0;
}

.capability-copy p,
.stage-head p,
.resource-main p,
.about-lines p,
.contact-stage p {
  max-width: 620px;
  margin: 20px 0 0;
  color: #8BBFAA;
  font-size: 14px;
  line-height: 1.82;
}

.tech-console {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  min-height: 520px;
  padding: 20px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 14px;
  background:
    radial-gradient(circle at 52% 50%, rgba(32,243,160,.13), transparent 28%),
    rgba(255,255,255,.018);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10), 0 48px 120px rgba(0,0,0,.38);
  backdrop-filter: blur(18px);
}

.console-orbit {
  position: absolute;
  inset: 18%;
  border: 1px solid rgba(32,243,160,.18);
  border-radius: 50%;
  box-shadow: 0 0 88px rgba(32,243,160,.12), inset 0 0 60px rgba(32,243,160,.07);
  animation: slowRotate 28s linear infinite;
}

.tech-console article,
.delivery-track article,
.resource-panels article {
  position: relative;
  z-index: 1;
  min-height: 210px;
  padding: 24px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 12px;
  background:
    radial-gradient(circle at 84% 18%, rgba(32,243,160,.12), transparent 34%),
    rgba(255,255,255,.025);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
  backdrop-filter: blur(16px);
}

.tech-console article span,
.delivery-track article span,
.resource-panels article span {
  display: block;
  margin-bottom: 30px;
  color: #5DCAA5;
  font-size: 11px;
  letter-spacing: .22em;
}

.tech-console article strong,
.delivery-track article h3,
.resource-panels article h3 {
  display: block;
  margin: 0 0 12px;
  color: #D4F5E9;
  font-size: 22px;
  line-height: 1.24;
  font-weight: 720;
}

.tech-console article em,
.delivery-track article p,
.resource-panels article p {
  color: #8BBFAA;
  font-size: 13px;
  line-height: 1.7;
  font-style: normal;
}

.delivery-stage {
  display: grid;
  gap: 40px;
  align-content: center;
}

.stage-head {
  max-width: 840px;
  margin: 0 auto;
  text-align: center;
}

.stage-head p {
  margin-left: auto;
  margin-right: auto;
}

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

.delivery-track article {
  min-height: 260px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.delivery-track article::before {
  content: "";
  position: absolute;
  left: 24px;
  top: 74px;
  width: 42px;
  height: 2px;
  background: #20f3a0;
  box-shadow: 0 0 22px rgba(32,243,160,.48);
}

.resource-stage {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: 56px;
  align-items: center;
}

.resource-main {
  min-height: 430px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 42px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 12px;
  background:
    radial-gradient(circle at 82% 18%, rgba(32,243,160,.16), transparent 34%),
    rgba(255,255,255,.02);
}

.resource-panels {
  display: grid;
  gap: 16px;
}

.resource-panels article {
  min-height: 132px;
}

.resource-panels article span {
  margin-bottom: 16px;
}

.about-stage {
  display: grid;
  grid-template-columns: .86fr 1.14fr;
  gap: 70px;
  align-items: center;
  min-height: 520px;
  padding: 54px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 12px;
  background:
    linear-gradient(90deg, rgba(255,255,255,.045), rgba(255,255,255,.012)),
    radial-gradient(circle at 86% 30%, rgba(32,243,160,.13), transparent 34%);
}

.about-lines {
  display: grid;
  gap: 22px;
}

.about-lines p {
  max-width: none;
  margin: 0;
  padding-left: 24px;
  border-left: 2px solid rgba(32,243,160,.42);
}

.contact-stage {
  display: grid;
  grid-template-columns: .92fr 1.08fr;
  gap: 56px;
  align-items: stretch;
  min-height: 500px;
  padding: 54px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 12px;
  background:
    radial-gradient(circle at 92% 14%, rgba(32,243,160,.16), transparent 32%),
    rgba(255,255,255,.022);
  box-shadow: 0 54px 140px rgba(0,0,0,.36);
}

.contact-stage dl {
  display: grid;
  align-content: center;
  gap: 0;
  margin: 0;
}

.contact-stage dl div {
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: 24px;
  padding: 18px 0;
  border-bottom: 1px solid rgba(255,255,255,.09);
}

.contact-stage dl div:last-child {
  border-bottom: 0;
}

.contact-stage dt {
  color: rgba(255,255,255,.42);
  font-size: 13px;
}

.contact-stage dd {
  margin: 0;
  color: rgba(255,255,255,.86);
  font-size: 14px;
  line-height: 1.7;
}

.contact-stage dd a {
  color: #9FE1CB;
  text-decoration: none;
}

.site-footer {
  background: #020403;
  border-top: 1px solid rgba(255,255,255,.08);
}

.footer-grid {
  gap: 34px;
}

.footer-brand img {
  filter: brightness(0) invert(1);
}

@media (max-width: 980px) {
  #capability.premium-capability,
  #training.premium-delivery,
  #resources.premium-resources,
  #about.premium-about,
  #contact.premium-contact {
    min-height: auto;
    padding: 78px 0;
  }

  .capability-stage,
  .resource-stage,
  .about-stage,
  .contact-stage {
    grid-template-columns: 1fr;
    width: min(100% - 36px, 1180px);
    gap: 34px;
  }

  .tech-console,
  .delivery-track {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .about-stage,
  .contact-stage,
  .resource-main {
    padding: 28px;
  }
}

@media (max-width: 640px) {
  .capability-copy h2,
  .stage-head h2,
  .resource-main h2,
  .about-stage h2,
  .contact-stage h2 {
    font-size: 28px;
  }

  .tech-console,
  .delivery-track {
    grid-template-columns: 1fr;
  }

  .tech-console {
    min-height: auto;
  }

  .delivery-track article,
  .tech-console article {
    min-height: 190px;
  }

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

/* Core technology section: compact two-column architecture screen. */
#capability.core-tech-section {
  position: relative;
  display: block;
  height: auto;
  min-height: 0;
  padding: 80px 120px;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 70% 50%, rgba(29,158,117,.08) 0%, transparent 60%),
    #0a1a10;
  border-top: 1px solid rgba(29,158,117,.16);
}

#capability.core-tech-section::before {
  display: none;
}

#capability.core-tech-section .capability-stage {
  position: relative;
  z-index: 1;
  width: min(1200px, 100%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 40%) minmax(0, 60%);
  gap: 48px;
  align-items: center;
}

#capability.core-tech-section .capability-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-self: center;
}

.core-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  margin: 0 0 24px;
  padding: 4px 14px;
  border: 1px solid #1D9E75;
  border-radius: 20px;
  color: #9FE1CB;
  font-size: 12px;
  line-height: 1.5;
  letter-spacing: .08em;
}

.core-badge span {
  color: #1D9E75;
}

#capability.core-tech-section .capability-copy h2 {
  max-width: 720px;
  margin: 0 0 20px;
  color: #fff;
  font-size: clamp(34px, 3vw, 46px);
  font-weight: 600;
  line-height: 1.22;
  letter-spacing: 0;
  white-space: normal;
}

#capability.core-tech-section .capability-copy p {
  max-width: 420px;
  margin: 0 0 32px;
  color: #8BBFAA;
  font-size: 14px;
  line-height: 1.9;
}

.core-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  padding: 10px 24px;
  border: 1px solid #1D9E75;
  border-radius: 8px;
  color: #1D9E75;
  font-size: 13px;
  line-height: 1.4;
  text-decoration: none;
  background: transparent;
  transition: background .24s ease, transform .24s ease, border-color .24s ease;
}

.core-cta:hover {
  background: rgba(29,158,117,.08);
  border-color: #5DCAA5;
  transform: translateY(-1px);
}

#capability.core-tech-section .tech-console.core-card-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  min-height: 0;
  padding: 16px;
  border: 0;
  border-radius: 16px;
  background: #0d1f14;
  box-shadow: none;
  backdrop-filter: none;
}

#capability.core-tech-section .tech-console.core-card-grid::before {
  content: "";
  position: absolute;
  inset: -18%;
  pointer-events: none;
  background: radial-gradient(ellipse at 70% 50%, rgba(29,158,117,.08) 0%, transparent 60%);
}

#capability.core-tech-section .core-tech-card {
  position: relative;
  z-index: 1;
  min-height: 180px;
  padding: 24px;
  border: 1px solid rgba(29,158,117,.15);
  border-radius: 12px;
  background: #0a2818;
  box-shadow: none;
  backdrop-filter: none;
  transition: border-color .3s ease, background .3s ease, transform .3s ease;
}

#capability.core-tech-section .core-tech-card:hover {
  border-color: #1D9E75;
  background: #0d2a1c;
  transform: translateY(-3px);
}

#capability.core-tech-section .tech-icon {
  display: block;
  width: 46px;
  height: 46px;
  margin: 0 0 18px;
  color: #20f3a0;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.45;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 16px rgba(32,243,160,.42));
  opacity: .96;
}

#capability.core-tech-section .core-tech-card::before {
  content: "";
  position: absolute;
  left: 21px;
  top: 20px;
  width: 62px;
  height: 62px;
  border-radius: 18px;
  background: radial-gradient(circle at 50% 50%, rgba(32,243,160,.12), transparent 64%);
  pointer-events: none;
}

#capability.core-tech-section .core-tech-card:hover .tech-icon {
  transform: translateY(-1px) scale(1.04);
}

#capability.core-tech-section .core-tech-card span {
  display: block;
  margin: 0 0 8px;
  color: rgba(29,158,117,.5);
  font-size: 11px;
  line-height: 1.4;
  letter-spacing: 2px;
}

#capability.core-tech-section .core-tech-card h3 {
  margin: 0 0 8px;
  color: #fff;
  font-size: 17px;
  font-weight: 500;
  line-height: 1.35;
}

#capability.core-tech-section .core-tech-card p {
  margin: 0 0 10px;
  color: #5DCAA5;
  font-size: 12px;
  line-height: 1.65;
}

#capability.core-tech-section .core-tech-card em {
  display: block;
  margin: 10px 0 0;
  padding-top: 10px;
  border-top: 1px solid rgba(29,158,117,.13);
  color: rgba(139,191,170,.4);
  font-size: 11px;
  line-height: 1.7;
  font-style: normal;
}

.core-dot {
  position: absolute;
  z-index: 0;
  width: 3px;
  height: 3px;
  border-radius: 999px;
  background: #1D9E75;
  opacity: .3;
  box-shadow: 0 0 18px rgba(29,158,117,.5);
}

.core-dot-a { top: 18%; left: 9%; }
.core-dot-b { top: 28%; right: 16%; }
.core-dot-c { bottom: 22%; left: 44%; }
.core-dot-d { bottom: 30%; right: 7%; }

@media (max-width: 1100px) {
  #capability.core-tech-section {
    padding: 72px 40px;
  }

  #capability.core-tech-section .capability-stage {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  #capability.core-tech-section .capability-copy p {
    max-width: 640px;
  }

  #capability.core-tech-section .capability-copy h2 {
    max-width: 760px;
    font-size: clamp(38px, 6.2vw, 60px);
    line-height: 1.18;
  }
}

@media (max-width: 680px) {
  #capability.core-tech-section {
    padding: 64px 24px;
  }

  #capability.core-tech-section .capability-copy h2 {
    font-size: 30px;
    white-space: normal;
  }

  #capability.core-tech-section .tech-console.core-card-grid {
    grid-template-columns: 1fr;
  }
}

/* Final services spacing lock. */
#services.ai-origin {
  position: relative;
  height: auto;
  min-height: 100svh;
  margin-bottom: 0;
  padding-top: 92px;
  padding-bottom: 76px;
  display: flex;
  align-items: center;
  background:
    radial-gradient(circle at 50% 16%, rgba(29,158,117,.075), transparent 24%),
    radial-gradient(circle at 76% 56%, rgba(29,158,117,.16), transparent 30%),
    radial-gradient(circle at 12% 78%, rgba(29,158,117,.06), transparent 32%),
    linear-gradient(180deg, #050807 0%, #060908 46%, #050807 100%);
}

#services .infrastructure-section {
  position: relative;
  z-index: 3;
  min-height: 0;
  width: min(1120px, calc(100% - 112px));
  margin: 0 auto;
}

.services-depth-field {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
  perspective: 900px;
  opacity: .98;
}

.services-depth-field::before {
  content: "";
  position: absolute;
  inset: 8% -6% 0;
  background:
    linear-gradient(112deg, transparent 0 22%, rgba(80,245,190,.12) 22.3%, transparent 23.2% 47%, rgba(80,245,190,.08) 47.3%, transparent 48.2%),
    linear-gradient(162deg, transparent 0 31%, rgba(159,225,203,.10) 31.3%, transparent 32.1% 64%, rgba(80,245,190,.07) 64.3%, transparent 65%),
    linear-gradient(24deg, transparent 0 39%, rgba(80,245,190,.08) 39.3%, transparent 40.1% 74%, rgba(159,225,203,.07) 74.3%, transparent 75%);
  transform: rotateX(58deg) rotateZ(-8deg) translate3d(0, 80px, -120px) scale(1.18);
  transform-origin: center;
  opacity: .7;
  filter: blur(.2px);
  animation: depthPlaneDrift 14s ease-in-out infinite alternate;
}

.services-depth-field::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 10% 34%, rgba(159,225,203,.9) 0 2px, rgba(80,245,190,.28) 3px 10px, transparent 16px),
    radial-gradient(circle at 24% 21%, rgba(80,245,190,.78) 0 2px, rgba(80,245,190,.22) 3px 9px, transparent 15px),
    radial-gradient(circle at 38% 63%, rgba(159,225,203,.75) 0 2px, rgba(80,245,190,.20) 3px 11px, transparent 16px),
    radial-gradient(circle at 61% 18%, rgba(80,245,190,.86) 0 2px, rgba(80,245,190,.23) 3px 12px, transparent 18px),
    radial-gradient(circle at 77% 43%, rgba(159,225,203,.72) 0 2px, rgba(80,245,190,.18) 3px 10px, transparent 16px),
    radial-gradient(circle at 89% 68%, rgba(80,245,190,.82) 0 2px, rgba(80,245,190,.22) 3px 12px, transparent 18px);
  opacity: .56;
  animation: depthNodePulse 5.2s ease-in-out infinite;
}

.depth-layer {
  position: absolute;
  inset: 0;
  display: block;
  transform-style: preserve-3d;
}

.depth-layer-back {
  background:
    radial-gradient(circle at 18% 72%, rgba(80,245,190,.45) 0 2px, transparent 4px),
    radial-gradient(circle at 46% 20%, rgba(159,225,203,.42) 0 2px, transparent 4px),
    radial-gradient(circle at 83% 28%, rgba(80,245,190,.38) 0 2px, transparent 4px),
    linear-gradient(100deg, transparent 18%, rgba(80,245,190,.06) 18.2%, transparent 19% 68%, rgba(80,245,190,.06) 68.2%, transparent 69%);
  transform: translateZ(-220px) scale(1.28);
  opacity: .5;
  animation: depthBackFloat 18s ease-in-out infinite alternate;
}

.depth-layer-mid {
  background:
    radial-gradient(circle at 16% 48%, rgba(159,225,203,.70) 0 2px, transparent 5px),
    radial-gradient(circle at 34% 34%, rgba(80,245,190,.62) 0 2px, transparent 5px),
    radial-gradient(circle at 56% 72%, rgba(159,225,203,.58) 0 2px, transparent 5px),
    radial-gradient(circle at 72% 24%, rgba(80,245,190,.70) 0 2px, transparent 5px),
    radial-gradient(circle at 92% 52%, rgba(159,225,203,.60) 0 2px, transparent 5px),
    linear-gradient(30deg, transparent 0 23%, rgba(80,245,190,.08) 23.2%, transparent 24% 55%, rgba(159,225,203,.07) 55.2%, transparent 56%),
    linear-gradient(148deg, transparent 0 37%, rgba(80,245,190,.08) 37.2%, transparent 38%);
  transform: rotateX(18deg) translateZ(-80px) scale(1.08);
  opacity: .68;
  animation: depthMidFloat 11s ease-in-out infinite alternate;
}

.depth-layer-front {
  background:
    radial-gradient(circle at 7% 80%, rgba(159,225,203,.88) 0 2px, rgba(80,245,190,.22) 3px 11px, transparent 18px),
    radial-gradient(circle at 49% 44%, rgba(80,245,190,.72) 0 2px, rgba(80,245,190,.18) 3px 10px, transparent 17px),
    radial-gradient(circle at 82% 76%, rgba(159,225,203,.76) 0 2px, rgba(80,245,190,.18) 3px 10px, transparent 17px),
    linear-gradient(72deg, transparent 0 28%, rgba(159,225,203,.08) 28.2%, transparent 29%),
    linear-gradient(132deg, transparent 0 62%, rgba(80,245,190,.09) 62.2%, transparent 63%);
  transform: translateZ(80px) scale(.95);
  opacity: .62;
  animation: depthFrontFloat 8s ease-in-out infinite alternate;
}

@keyframes depthPlaneDrift {
  from { transform: rotateX(58deg) rotateZ(-8deg) translate3d(-16px, 72px, -120px) scale(1.18); }
  to { transform: rotateX(58deg) rotateZ(-6deg) translate3d(18px, 92px, -120px) scale(1.2); }
}

@keyframes depthNodePulse {
  0%, 100% { opacity: .44; filter: blur(0); }
  50% { opacity: .72; filter: blur(.2px); }
}

@keyframes depthBackFloat {
  from { transform: translate3d(-22px, -8px, -220px) scale(1.28); }
  to { transform: translate3d(18px, 12px, -220px) scale(1.31); }
}

@keyframes depthMidFloat {
  from { transform: rotateX(18deg) translate3d(18px, -10px, -80px) scale(1.08); }
  to { transform: rotateX(18deg) translate3d(-14px, 14px, -80px) scale(1.1); }
}

@keyframes depthFrontFloat {
  from { transform: translate3d(-10px, 8px, 80px) scale(.95); }
  to { transform: translate3d(16px, -10px, 80px) scale(.97); }
}

#scenarios.ai-solutions {
  margin-top: 0;
}

#services .infra-pill::before {
  display: none;
}

@media (max-width: 980px) {
  #services.ai-origin {
    min-height: 100svh;
    padding-top: 78px;
    padding-bottom: 64px;
  }

  #services .infrastructure-section {
    width: min(100% - 36px, 1120px);
  }
}

/* Services typography and animated 3D orb refinement. */
#services .infra-copy span {
  color: #5DCAA5;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
}

#services .infra-copy h3,
#services .infra-module:first-child .infra-copy h3 {
  font-size: 28px;
  line-height: 1.18;
  font-weight: 720;
}

#services .infra-copy p,
#services .infra-module:first-child .infra-copy p {
  color: #8BBFAA;
  font-size: 13px;
  line-height: 1.68;
}

#services .infra-copy li {
  font-size: 12px;
  line-height: 1.55;
}

#services .infra-module:first-child {
  position: relative;
  overflow: hidden;
}

.infra-orb-3d {
  position: absolute;
  right: 40px;
  bottom: 34px;
  width: 178px;
  height: 178px;
  pointer-events: none;
  perspective: 700px;
  filter: drop-shadow(0 0 30px rgba(32,243,160,.42));
}

.infra-orb-3d::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -18px;
  width: 136px;
  height: 26px;
  border-radius: 999px;
  background: radial-gradient(ellipse at center, rgba(32,243,160,.28), rgba(32,243,160,.08) 52%, transparent 72%);
  transform: translateX(-50%);
  filter: blur(2px);
}

.orb-core {
  position: absolute;
  inset: 12px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 34% 26%, rgba(255,255,255,.58), transparent 10%),
    radial-gradient(circle at 64% 62%, rgba(255,255,255,.22), transparent 14%),
    radial-gradient(circle at 50% 50%, rgba(32,243,160,.94), rgba(17,162,118,.68) 47%, rgba(7,54,38,.5) 72%, rgba(0,0,0,.18));
  box-shadow:
    inset 18px -22px 34px rgba(0,0,0,.26),
    inset -16px 20px 38px rgba(159,225,203,.22),
    0 0 46px rgba(32,243,160,.38);
  animation: orbFloat3d 4.8s ease-in-out infinite;
}

.orb-ring,
.orb-node {
  position: absolute;
  inset: 20px;
  border-radius: 50%;
}

.orb-ring {
  border: 1px solid rgba(159,225,203,.55);
  transform-style: preserve-3d;
  animation: orbSpin 7.5s linear infinite;
}

.orb-ring-a {
  transform: rotateX(66deg) rotateZ(12deg);
}

.orb-ring-b {
  inset: 34px;
  border-color: rgba(32,243,160,.46);
  animation-duration: 10s;
  animation-direction: reverse;
  transform: rotateY(58deg) rotateZ(-24deg);
}

.orb-node {
  width: 10px;
  height: 10px;
  inset: auto;
  background: #D4F5E9;
  box-shadow: 0 0 18px rgba(212,245,233,.8);
}

.orb-node-a { top: 36px; right: 30px; animation: orbNodeA 7.5s linear infinite; }
.orb-node-b { left: 28px; bottom: 54px; animation: orbNodeB 8.8s linear infinite; }
.orb-node-c { right: 56px; bottom: 20px; animation: orbNodeC 9.5s linear infinite; }

@keyframes orbFloat3d {
  0%, 100% { transform: translateY(0) rotateZ(0deg) scale(1); }
  50% { transform: translateY(-8px) rotateZ(3deg) scale(1.025); }
}

@keyframes orbSpin {
  from { transform: rotateX(66deg) rotateZ(0deg); }
  to { transform: rotateX(66deg) rotateZ(360deg); }
}

@keyframes orbNodeA {
  from { transform: rotate(0deg) translateX(7px); }
  to { transform: rotate(360deg) translateX(7px); }
}

@keyframes orbNodeB {
  from { transform: rotate(360deg) translateX(6px); }
  to { transform: rotate(0deg) translateX(6px); }
}

@keyframes orbNodeC {
  0%, 100% { transform: translateY(0); opacity: .85; }
  50% { transform: translateY(-8px); opacity: 1; }
}

/* Delivery section icons. */
.delivery-track article {
  justify-content: flex-end;
  gap: 0;
}

.delivery-icon {
  position: absolute;
  left: 24px;
  top: 28px;
  width: 38px;
  height: 38px;
  fill: none;
  stroke: #20f3a0;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 18px rgba(32,243,160,.42));
  opacity: .94;
}

.delivery-track article::before {
  top: 82px;
  width: 36px;
}

.delivery-track article span {
  margin-bottom: 22px;
}

.delivery-track article h3 {
  font-size: 22px;
}

.delivery-track article p {
  font-size: 13px;
}

@media (max-width: 980px) {
  .infra-orb-3d {
    right: 26px;
    bottom: 24px;
    width: 140px;
    height: 140px;
  }
}

/* Restore service module icons without image backgrounds and prevent title clipping. */
#services .infra-showcase {
  grid-template-rows: repeat(3, minmax(142px, 1fr));
}

#services .infra-module:not(:first-child) {
  grid-template-columns: minmax(0, 1fr) 118px;
  min-height: 142px;
  padding: 24px 28px;
  overflow: hidden;
}

#services .infra-module:not(:first-child) .infra-copy {
  max-width: none;
  min-width: 0;
}

#services .infra-module:not(:first-child) .infra-copy h3 {
  margin-bottom: 10px;
  color: #D4F5E9;
  font-size: 26px;
  line-height: 1.24;
  font-weight: 720;
  white-space: nowrap;
}

#services .infra-module:not(:first-child) .infra-copy p {
  max-width: 100%;
  margin: 0;
  color: #8BBFAA;
  font-size: 13px;
  line-height: 1.62;
}

.infra-mini-icon {
  position: relative;
  justify-self: end;
  align-self: center;
  width: 92px;
  height: 92px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  filter: drop-shadow(0 0 18px rgba(32,243,160,.46));
  opacity: .96;
}

.infra-mini-icon::before,
.infra-mini-icon::after,
.infra-mini-icon i {
  content: "";
  position: absolute;
  display: block;
  border-color: #54f5bd;
}

.workflow-icon::before,
.workflow-icon::after {
  left: 20px;
  right: 18px;
  height: 2px;
  background: linear-gradient(90deg, rgba(84,245,189,.25), #54f5bd, rgba(84,245,189,.25));
  transform-origin: center;
}

.workflow-icon::before {
  top: 34px;
  transform: rotate(-22deg);
}

.workflow-icon::after {
  top: 56px;
  transform: rotate(22deg);
}

.workflow-icon i {
  width: 17px;
  height: 17px;
  border: 2px solid #54f5bd;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(84,245,189,.96), rgba(25,160,116,.36) 62%, transparent 70%);
}

.workflow-icon i:nth-child(1) { left: 8px; top: 33px; }
.workflow-icon i:nth-child(2) { left: 34px; top: 20px; }
.workflow-icon i:nth-child(3) { right: 8px; top: 31px; }
.workflow-icon i:nth-child(4) { left: 34px; bottom: 20px; }
.workflow-icon i:nth-child(5) { right: 10px; bottom: 26px; opacity: .78; }

.person-icon::before {
  left: 31px;
  top: 17px;
  width: 28px;
  height: 28px;
  border: 2px solid #54f5bd;
  border-radius: 50%;
  background: radial-gradient(circle at 42% 38%, #bfffe8, rgba(32,243,160,.72) 46%, rgba(8,88,62,.42) 70%);
}

.person-icon::after {
  left: 19px;
  bottom: 14px;
  width: 52px;
  height: 36px;
  border: 2px solid #54f5bd;
  border-radius: 46px 46px 18px 18px;
  background: radial-gradient(ellipse at 50% 35%, rgba(159,225,203,.55), rgba(32,243,160,.24) 58%, rgba(0,0,0,0));
}

.person-icon i:nth-child(1) {
  inset: 8px;
  border-radius: 50%;
  border: 1px solid rgba(84,245,189,.22);
  box-shadow: 0 0 28px rgba(32,243,160,.32);
}

.person-icon i:nth-child(2) {
  left: 10px;
  top: 10px;
  right: 10px;
  bottom: 10px;
  border-radius: 50%;
  background-image: radial-gradient(rgba(84,245,189,.72) 1px, transparent 1.8px);
  background-size: 16px 16px;
  opacity: .34;
}

.growth-icon::before {
  left: 14px;
  bottom: 18px;
  width: 58px;
  height: 44px;
  border-left: 2px solid rgba(84,245,189,.7);
  border-bottom: 2px solid rgba(84,245,189,.7);
}

.growth-icon::after {
  left: 19px;
  bottom: 25px;
  width: 56px;
  height: 42px;
  border-top: 4px solid #54f5bd;
  border-right: 4px solid #54f5bd;
  transform: skewY(-28deg) rotate(-12deg);
  transform-origin: right top;
}

.growth-icon i {
  bottom: 20px;
  width: 12px;
  border: 1px solid rgba(84,245,189,.78);
  background: linear-gradient(180deg, rgba(159,225,203,.55), rgba(32,243,160,.22));
  box-shadow: inset 0 0 14px rgba(32,243,160,.24), 0 0 12px rgba(32,243,160,.22);
}

.growth-icon i:nth-child(1) { left: 18px; height: 18px; }
.growth-icon i:nth-child(2) { left: 36px; height: 30px; }
.growth-icon i:nth-child(3) { left: 54px; height: 44px; }
.growth-icon i:nth-child(4) { left: 72px; height: 58px; opacity: .7; }

@media (max-width: 980px) {
  #services .infra-module:not(:first-child) {
    grid-template-columns: minmax(0, 1fr) 86px;
  }

  .infra-mini-icon {
    width: 76px;
    height: 76px;
  }
}

/* Premium rebuild for resources, about and footer. */
#resources.premium-resources,
#about.premium-about {
  min-height: auto;
  padding: 96px 0;
  background:
    radial-gradient(circle at 18% 28%, rgba(29,158,117,.10), transparent 28%),
    radial-gradient(circle at 86% 60%, rgba(29,158,117,.13), transparent 32%),
    linear-gradient(180deg, #050807 0%, #07110c 50%, #050807 100%);
}

#resources.premium-resources::before,
#about.premium-about::before {
  opacity: .18;
  mask-image: linear-gradient(180deg, transparent 0%, #000 16%, #000 82%, transparent 100%);
}

#resources .resource-stage {
  width: min(1180px, calc(100% - 112px));
  grid-template-columns: .9fr 1.1fr;
  gap: 28px;
  align-items: stretch;
}

#resources .resource-main {
  min-height: 420px;
  padding: 44px;
  border-radius: 12px;
  background:
    radial-gradient(circle at 70% 20%, rgba(32,243,160,.13), transparent 34%),
    linear-gradient(135deg, rgba(255,255,255,.05), rgba(255,255,255,.012));
}

#resources .resource-main h2 {
  max-width: 560px;
  font-size: clamp(34px, 3.1vw, 48px);
  line-height: 1.16;
}

#resources .resource-main p {
  max-width: 580px;
}

#resources .resource-panels {
  gap: 14px;
}

#resources .resource-panels article {
  min-height: 132px;
  padding: 24px 26px 24px 104px;
  border-radius: 12px;
  overflow: hidden;
}

#resources .resource-panels article::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(32,243,160,.08));
  opacity: .5;
}

.resource-icon {
  position: absolute;
  left: 28px;
  top: 50%;
  width: 46px;
  height: 46px;
  transform: translateY(-50%);
  fill: none;
  stroke: #20f3a0;
  stroke-width: 1.55;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 18px rgba(32,243,160,.42));
}

#resources .resource-panels article span {
  margin-bottom: 10px;
  color: #5DCAA5;
  font-size: 11px;
}

#resources .resource-panels article h3 {
  color: #D4F5E9;
  font-size: 22px;
}

#resources .resource-panels article p {
  max-width: 520px;
  color: #8BBFAA;
}

#about.premium-about {
  padding-top: 100px;
  padding-bottom: 108px;
}

#about .about-stage {
  width: min(1180px, calc(100% - 112px));
  min-height: 0;
  display: grid;
  grid-template-columns: .88fr 1.12fr;
  gap: 54px;
  align-items: center;
  padding: 0;
  border: 0;
  background: transparent;
}

.about-narrative {
  position: relative;
  z-index: 2;
}

.about-narrative h2 {
  margin: 0;
  color: #fff;
  font-size: clamp(42px, 4.3vw, 68px);
  line-height: 1.18;
  font-weight: 520;
  letter-spacing: 0;
}

.about-narrative p {
  max-width: 620px;
  margin: 28px 0 0;
  color: rgba(212,245,233,.72);
  font-size: 17px;
  line-height: 1.95;
}

.about-facts {
  display: grid;
  gap: 12px;
  margin-top: 34px;
}

.about-facts span {
  position: relative;
  padding-left: 22px;
  color: #8BBFAA;
  font-size: 13px;
  letter-spacing: .02em;
}

.about-facts span::before {
  content: "";
  position: absolute;
  left: 0;
  top: .62em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #20f3a0;
  box-shadow: 0 0 18px rgba(32,243,160,.5);
}

.about-cinema {
  position: relative;
  min-height: 420px;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.10);
  background:
    radial-gradient(circle at 52% 46%, rgba(255,255,255,.18), transparent 8%),
    radial-gradient(circle at 52% 48%, rgba(32,243,160,.16), transparent 30%),
    linear-gradient(140deg, #020403 0%, #0c1310 52%, #050807 100%);
  box-shadow: 0 60px 160px rgba(0,0,0,.42);
}

.about-cinema::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(110deg, transparent 0 28%, rgba(255,255,255,.08) 29%, transparent 43%),
    radial-gradient(circle at 72% 10%, rgba(255,255,255,.16), transparent 16%);
  opacity: .62;
  animation: aboutLightMove 7s ease-in-out infinite alternate;
}

.about-cinema-mark {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 230px;
  height: 230px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 1px solid rgba(159,225,203,.42);
  filter: drop-shadow(0 0 28px rgba(32,243,160,.26));
}

.about-cinema-mark span {
  position: absolute;
  left: 50%;
  bottom: 28px;
  width: 2px;
  height: 168px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(212,245,233,.86), rgba(32,243,160,.18));
  transform-origin: bottom center;
  animation: aboutBranchGlow 4.8s ease-in-out infinite;
}

.about-cinema-mark span:nth-child(1) { transform: translateX(-50%) rotate(0deg); }
.about-cinema-mark span:nth-child(2) { transform: translateX(-50%) rotate(-34deg); animation-delay: .2s; }
.about-cinema-mark span:nth-child(3) { transform: translateX(-50%) rotate(34deg); animation-delay: .4s; }
.about-cinema-mark span:nth-child(4) { transform: translateX(-50%) rotate(-64deg); height: 130px; animation-delay: .6s; }
.about-cinema-mark span:nth-child(5) { transform: translateX(-50%) rotate(64deg); height: 130px; animation-delay: .8s; }

.about-scanline {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(159,225,203,.2), transparent);
  transform: translateX(-120%);
  animation: aboutScan 5.8s ease-in-out infinite;
}

@keyframes aboutLightMove {
  from { transform: translateX(-2%); opacity: .45; }
  to { transform: translateX(4%); opacity: .78; }
}

@keyframes aboutBranchGlow {
  0%, 100% { opacity: .38; }
  50% { opacity: .95; }
}

@keyframes aboutScan {
  0%, 35% { transform: translateX(-120%); opacity: 0; }
  52% { opacity: .8; }
  70%, 100% { transform: translateX(120%); opacity: 0; }
}

.site-footer {
  position: relative;
  overflow: hidden;
  padding: 72px 0 28px;
  background:
    radial-gradient(circle at 15% 20%, rgba(29,158,117,.13), transparent 30%),
    linear-gradient(180deg, #050807 0%, #020403 100%);
  border-top: 1px solid rgba(29,158,117,.18);
}

.site-footer::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: radial-gradient(rgba(159,225,203,.10) 1px, transparent 1.5px);
  background-size: 42px 42px;
  opacity: .18;
}

.footer-premium {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: 64px;
  padding-bottom: 52px;
}

.footer-identity img {
  width: 168px;
  height: auto;
  filter: brightness(0) invert(1);
}

.footer-identity h2 {
  max-width: 620px;
  margin: 34px 0 18px;
  color: #fff;
  font-size: clamp(32px, 3.4vw, 52px);
  line-height: 1.15;
  font-weight: 620;
}

.footer-identity p {
  max-width: 560px;
  margin: 0;
  color: #8BBFAA;
  font-size: 14px;
  line-height: 1.9;
}

.footer-map {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  padding: 30px;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 12px;
  background: rgba(255,255,255,.018);
  backdrop-filter: blur(18px);
}

.footer-map h3 {
  margin: 0 0 18px;
  color: #D4F5E9;
  font-size: 13px;
  font-weight: 650;
}

.footer-map a,
.footer-map span {
  display: block;
  margin: 0 0 12px;
  color: rgba(212,245,233,.56);
  font-size: 12px;
  line-height: 1.7;
  text-decoration: none;
}

.footer-map a:hover {
  color: #20f3a0;
}

.footer-bottom {
  position: relative;
  z-index: 1;
  border-top: 1px solid rgba(255,255,255,.08);
  padding-top: 22px;
}

@media (max-width: 980px) {
  #resources.premium-resources,
  #about.premium-about {
    padding: 76px 0;
  }

  #resources .resource-stage,
  #about .about-stage,
  .footer-premium {
    width: min(100% - 36px, 1180px);
    grid-template-columns: 1fr;
  }

  #resources .resource-main {
    min-height: auto;
  }

  .about-cinema {
    min-height: 320px;
  }

  .footer-map {
    grid-template-columns: 1fr;
  }
}

/* About section: Xiaopeng-style brand intro above a cinematic video canvas. */
#about.premium-about {
  padding: 112px 0 120px;
  background:
    radial-gradient(circle at 18% 18%, rgba(29,158,117,.12), transparent 28%),
    radial-gradient(circle at 82% 68%, rgba(29,158,117,.10), transparent 30%),
    linear-gradient(180deg, #050807 0%, #07110c 45%, #050807 100%);
}

#about .about-stage {
  width: min(1280px, calc(100% - 112px));
  display: block;
}

.about-narrative-center {
  max-width: 980px;
  margin: 0 auto 76px;
  text-align: center;
}

.about-narrative-center .section-mark {
  justify-content: center;
  color: #20f3a0;
}

.about-narrative-center h2 {
  margin-top: 26px;
  color: rgba(255,255,255,.92);
  font-size: clamp(42px, 4vw, 64px);
  line-height: 1.16;
  font-weight: 420;
  letter-spacing: .04em;
}

.about-narrative-center p {
  max-width: 760px;
  margin: 28px auto 0;
  color: rgba(212,245,233,.62);
  font-size: clamp(16px, 1.28vw, 20px);
  line-height: 1.9;
}

.about-video-frame {
  width: 100%;
  min-height: clamp(420px, 47vw, 650px);
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,.10);
  background:
    radial-gradient(circle at 52% 42%, rgba(32,243,160,.18), transparent 10%),
    radial-gradient(circle at 52% 48%, rgba(32,243,160,.13), transparent 30%),
    linear-gradient(135deg, rgba(255,255,255,.03), transparent 28%),
    linear-gradient(140deg, #010302 0%, #0b1210 48%, #030605 100%);
  box-shadow: 0 72px 180px rgba(0,0,0,.48);
}

.about-video-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(0,0,0,.50), transparent 18%, transparent 82%, rgba(0,0,0,.38)),
    linear-gradient(180deg, rgba(255,255,255,.04), transparent 32%, rgba(0,0,0,.30));
}

.about-video-frame .about-cinema-mark {
  width: clamp(210px, 20vw, 310px);
  height: clamp(210px, 20vw, 310px);
  opacity: .82;
}

.about-video-frame .about-cinema-mark span {
  height: clamp(150px, 14vw, 224px);
}

.about-video-frame .about-cinema-mark span:nth-child(4),
.about-video-frame .about-cinema-mark span:nth-child(5) {
  height: clamp(118px, 11vw, 178px);
}

.about-play {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 3;
  width: 58px;
  height: 58px;
  border: 1px solid rgba(212,245,233,.45);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: rgba(255,255,255,.03);
  box-shadow: 0 0 40px rgba(32,243,160,.18);
  backdrop-filter: blur(10px);
}

.about-play::before {
  content: "";
  position: absolute;
  left: 23px;
  top: 18px;
  width: 0;
  height: 0;
  border-top: 11px solid transparent;
  border-bottom: 11px solid transparent;
  border-left: 15px solid rgba(212,245,233,.84);
}

@media (max-width: 980px) {
  #about.premium-about {
    padding: 76px 0 86px;
  }

  #about .about-stage {
    width: min(100% - 36px, 1180px);
  }

  .about-narrative-center {
    margin-bottom: 46px;
    text-align: left;
  }

  .about-narrative-center .section-mark {
    justify-content: flex-start;
  }

  .about-narrative-center h2 {
    font-size: 34px;
    letter-spacing: 0;
  }

  .about-narrative-center p {
    margin-left: 0;
    font-size: 15px;
  }

  .about-video-frame {
    min-height: 300px;
  }
}

/* 2026-05-29 premium system pass: interaction, about video and DJI-style footer. */
body.modal-open {
  overflow: hidden;
}

#services .infra-module {
  cursor: pointer;
  transition:
    transform .34s ease,
    border-color .34s ease,
    box-shadow .34s ease,
    background .34s ease;
}

#services .infra-module:hover,
#services .infra-module:focus-visible {
  transform: translateY(-4px);
  border-color: rgba(32, 243, 160, .5);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 26px 70px rgba(0,0,0,.38),
    0 0 44px rgba(32,243,160,.12);
  outline: 0;
}

#services .infra-module:hover .infra-copy h3,
#services .infra-module:focus-visible .infra-copy h3 {
  color: #fff;
}

#services .infra-module:hover .infra-visual,
#services .infra-module:focus-visible .infra-visual {
  transform: translateY(-4px) scale(1.035);
}

#services .infra-visual {
  transition: transform .34s ease, filter .34s ease;
}

#services .infra-visual-base img {
  transform-origin: 50% 50%;
  animation: siweishuOrbTurn 9s ease-in-out infinite;
}

#services .infra-module:first-child:hover .infra-visual-base img,
#services .infra-module:first-child:focus-visible .infra-visual-base img {
  animation-duration: 3.8s;
  filter: brightness(1.18) contrast(1.08) drop-shadow(0 0 34px rgba(32,243,160,.48));
}

@keyframes siweishuOrbTurn {
  0%, 100% { transform: perspective(700px) rotateY(-14deg) rotateZ(0deg) translateY(0); }
  50% { transform: perspective(700px) rotateY(18deg) rotateZ(1.5deg) translateY(-8px); }
}

#resources.premium-resources {
  background:
    radial-gradient(circle at 76% 34%, rgba(29,158,117,.16), transparent 30%),
    linear-gradient(180deg, #06110b 0%, #020504 100%);
}

#resources .resource-stage {
  align-items: stretch;
}

#resources .resource-main {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 82% 72%, rgba(32,243,160,.18), transparent 30%),
    linear-gradient(145deg, rgba(255,255,255,.045), rgba(255,255,255,.01));
}

#resources .resource-main::after {
  content: "";
  position: absolute;
  right: -54px;
  bottom: -54px;
  width: 210px;
  height: 210px;
  border: 1px solid rgba(32,243,160,.22);
  border-radius: 50%;
  box-shadow: inset 0 0 52px rgba(32,243,160,.08), 0 0 80px rgba(32,243,160,.08);
}

#resources .resource-panels {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}

#resources .resource-panels article {
  min-height: 150px;
  transition: transform .28s ease, border-color .28s ease, background .28s ease;
}

#resources .resource-panels article:hover {
  transform: translateX(6px);
  border-color: rgba(32,243,160,.38);
  background:
    radial-gradient(circle at 88% 50%, rgba(32,243,160,.12), transparent 38%),
    rgba(255,255,255,.025);
}

#capability.core-tech-section .core-tech-card {
  background:
    linear-gradient(145deg, rgba(29,158,117,.08), transparent 46%),
    #071b11;
}

#capability.core-tech-section .core-tech-card:nth-child(even) {
  transform: translateY(18px);
}

#capability.core-tech-section .core-tech-card:nth-child(even):hover {
  transform: translateY(14px);
}

#capability.core-tech-section .tech-console.core-card-grid {
  gap: 16px;
  background:
    radial-gradient(circle at 50% 50%, rgba(32,243,160,.08), transparent 42%),
    rgba(255,255,255,.018);
}

.about-video-frame {
  display: block;
  padding: 0;
  cursor: pointer;
  text-align: initial;
  appearance: none;
}

.about-video-frame:hover,
.about-video-frame:focus-visible {
  border-color: rgba(32,243,160,.45);
  outline: 0;
}

.about-video-frame:hover .about-play,
.about-video-frame:focus-visible .about-play {
  transform: translate(-50%, -50%) scale(1.08);
  border-color: rgba(32,243,160,.85);
  box-shadow: 0 0 72px rgba(32,243,160,.28);
}

.about-video-modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: 40px;
  background: rgba(0,0,0,.72);
  opacity: 0;
  pointer-events: none;
  transition: opacity .24s ease;
  backdrop-filter: blur(14px);
}

.about-video-modal.is-open {
  opacity: 1;
  pointer-events: auto;
}

.about-video-panel {
  position: relative;
  width: min(1080px, 94vw);
  aspect-ratio: 16 / 9;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 10px;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 44%, rgba(32,243,160,.20), transparent 24%),
    linear-gradient(140deg, #020403, #0b1510);
  box-shadow: 0 60px 180px rgba(0,0,0,.65);
}

.about-video-close {
  position: absolute;
  right: 16px;
  top: 14px;
  z-index: 4;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 50%;
  color: #fff;
  background: rgba(255,255,255,.05);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}

.about-video-placeholder {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: rgba(212,245,233,.72);
  text-align: center;
}

.about-video-placeholder .about-cinema-mark {
  opacity: .44;
}

.about-video-placeholder p,
.about-video-placeholder small {
  position: relative;
  z-index: 2;
  margin: 0;
}

.about-video-placeholder p {
  margin-top: 160px;
  color: #fff;
  font-size: 20px;
}

.about-video-placeholder small {
  margin-top: 8px;
  color: rgba(212,245,233,.52);
  font-size: 12px;
}

.dji-footer {
  padding: 0;
  color: rgba(255,255,255,.78);
  background: #242424;
  border-top: 1px solid rgba(255,255,255,.10);
}

.dji-footer::before {
  display: none;
}

.footer-download {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  padding: 48px 0 54px;
  border-bottom: 1px solid rgba(255,255,255,.15);
  text-align: center;
}

.footer-download p {
  margin: 0;
  color: rgba(255,255,255,.92);
  font-size: 18px;
  line-height: 1.8;
}

.footer-download a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  padding: 0 28px;
  border-radius: 999px;
  color: #fff;
  background: rgba(255,255,255,.12);
  text-decoration: none;
  font-weight: 700;
}

.footer-mega {
  display: grid;
  grid-template-columns: 1.18fr 1.18fr 1.18fr 1.18fr 1.3fr;
  gap: 58px;
  padding: 54px 0 74px;
}

.footer-column h3 {
  margin: 0 0 18px;
  color: #fff;
  font-size: 14px;
  font-weight: 750;
}

.footer-column h3:not(:first-child) {
  margin-top: 34px;
}

.footer-column a,
.footer-column span {
  display: block;
  margin: 0 0 15px;
  color: rgba(255,255,255,.72);
  font-size: 13px;
  line-height: 1.7;
  text-decoration: none;
}

.footer-column a:hover {
  color: #fff;
}

.footer-mailbox {
  display: grid;
  grid-template-columns: 1fr 48px;
  width: min(100%, 300px);
  height: 44px;
  margin-top: 24px;
  border: 1px solid rgba(255,255,255,.26);
  border-radius: 4px;
  overflow: hidden;
}

.footer-mailbox span {
  display: flex;
  align-items: center;
  margin: 0;
  padding-left: 14px;
  color: rgba(255,255,255,.52);
}

.footer-mailbox button {
  border: 0;
  color: #fff;
  background: rgba(255,255,255,.20);
  cursor: pointer;
}

.footer-brandbar {
  display: flex;
  align-items: center;
  gap: 44px;
  padding: 24px 0;
  border-top: 1px solid rgba(255,255,255,.14);
}

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

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

.footer-brandbar a {
  color: rgba(255,255,255,.82);
  font-size: 13px;
  text-decoration: none;
}

.footer-legal {
  display: flex;
  justify-content: space-between;
  gap: 28px;
  padding: 22px 0 34px;
  border-top: 1px solid rgba(255,255,255,.12);
}

.footer-legal p {
  margin: 0;
  color: rgba(255,255,255,.50);
  font-size: 12px;
}

@media (max-width: 980px) {
  .footer-mega {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 34px;
  }

  .footer-brandbar,
  .footer-legal {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 640px) {
  .footer-mega {
    grid-template-columns: 1fr;
  }

  .about-video-modal {
    padding: 18px;
  }
}

/* Visual hierarchy pass: differentiated backgrounds, hero anchor, metrics and varied card weight. */
.agent-slide .hero-stage {
  grid-template-columns: minmax(0, .86fr) minmax(320px, .64fr);
  gap: min(9vw, 120px);
  align-items: center;
}

.hero-intelligence-core {
  position: relative;
  justify-self: end;
  width: clamp(280px, 28vw, 470px);
  aspect-ratio: 1;
  border-radius: 50%;
  opacity: .92;
  filter: drop-shadow(0 0 54px rgba(32,243,160,.18));
}

.hero-intelligence-core::before {
  content: "";
  position: absolute;
  inset: 20%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 45% 40%, rgba(255,255,255,.35), transparent 8%),
    radial-gradient(circle at 50% 50%, rgba(32,243,160,.55), rgba(7,54,38,.18) 56%, transparent 72%);
  box-shadow: inset 0 0 50px rgba(255,255,255,.08), 0 0 86px rgba(32,243,160,.22);
  animation: heroCoreBreathe 5.6s ease-in-out infinite;
}

.hero-intelligence-core::after {
  content: "";
  position: absolute;
  inset: 6%;
  border-radius: 50%;
  border: 1px solid rgba(212,245,233,.22);
  background:
    linear-gradient(28deg, transparent 47%, rgba(212,245,233,.38) 48%, transparent 50%),
    linear-gradient(112deg, transparent 46%, rgba(32,243,160,.24) 47%, transparent 51%),
    linear-gradient(164deg, transparent 46%, rgba(212,245,233,.20) 47%, transparent 52%);
  animation: heroCoreRotate 22s linear infinite;
}

.core-ring,
.core-node,
.core-pulse {
  position: absolute;
  display: block;
  pointer-events: none;
}

.core-ring {
  inset: 18%;
  border: 1px solid rgba(159,225,203,.18);
  border-radius: 50%;
}

.core-ring-a {
  transform: rotateX(64deg) rotateZ(20deg);
}

.core-ring-b {
  inset: 28%;
  transform: rotateY(62deg) rotateZ(-28deg);
}

.core-node {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #D4F5E9;
  box-shadow: 0 0 22px rgba(212,245,233,.9);
}

.core-node-a { left: 28%; top: 33%; }
.core-node-b { right: 25%; top: 44%; }
.core-node-c { left: 52%; bottom: 23%; }

.core-pulse {
  inset: 35%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(32,243,160,.28), transparent 62%);
  animation: heroPulse 2.7s ease-in-out infinite;
}

.hero-metrics,
.infra-metrics {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 34px;
}

.hero-metrics span,
.infra-metrics span {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  min-height: 36px;
  padding: 0 14px;
  border: 1px solid rgba(212,245,233,.16);
  border-radius: 999px;
  color: rgba(212,245,233,.68);
  font-size: 12px;
  background: rgba(0,0,0,.18);
  backdrop-filter: blur(10px);
}

.hero-metrics strong,
.infra-metrics strong {
  color: #20f3a0;
  font-size: 18px;
  font-weight: 760;
  letter-spacing: .02em;
}

#services.ai-origin {
  background:
    radial-gradient(circle at 48% 18%, rgba(32,243,160,.12), transparent 20%),
    radial-gradient(circle at 82% 54%, rgba(29,158,117,.18), transparent 32%),
    linear-gradient(180deg, #020504 0%, #07110c 52%, #020403 100%);
}

#scenarios.ai-solutions {
  background:
    radial-gradient(circle at 18% 22%, rgba(32,243,160,.10), transparent 26%),
    linear-gradient(135deg, #04110a 0%, #0a1f13 45%, #030605 100%);
}

#capability.core-tech-section {
  background:
    radial-gradient(circle at 18% 78%, rgba(32,243,160,.09), transparent 26%),
    radial-gradient(ellipse at 74% 42%, rgba(29,158,117,.12), transparent 58%),
    #08160d;
}

#training.premium-delivery {
  background:
    radial-gradient(circle at 50% 12%, rgba(32,243,160,.08), transparent 24%),
    linear-gradient(180deg, #040706 0%, #0a120d 48%, #050807 100%);
}

#resources.premium-resources {
  background:
    radial-gradient(circle at 16% 62%, rgba(32,243,160,.12), transparent 24%),
    linear-gradient(135deg, #020403 0%, #071a10 52%, #030605 100%);
}

#about.premium-about {
  background:
    radial-gradient(circle at 50% 70%, rgba(32,243,160,.10), transparent 24%),
    linear-gradient(180deg, #060807 0%, #0d100d 48%, #050807 100%);
}

.infra-metrics {
  justify-content: center;
  margin-top: 18px;
}

.infra-metrics span {
  min-height: 32px;
  color: rgba(159,225,203,.72);
  border-color: rgba(32,243,160,.18);
}

.infra-metrics strong {
  color: #D4F5E9;
}

#services .infra-module:first-child {
  background:
    radial-gradient(circle at 78% 72%, rgba(32,243,160,.24), transparent 34%),
    radial-gradient(circle at 22% 18%, rgba(255,255,255,.045), transparent 28%),
    rgba(255,255,255,.028);
}

#services .infra-module:not(:first-child) {
  background:
    linear-gradient(100deg, rgba(255,255,255,.032), transparent 62%),
    radial-gradient(circle at 86% 50%, rgba(32,243,160,.13), transparent 30%),
    rgba(255,255,255,.018);
}

.solution-board {
  grid-template-columns: 1.22fr 1fr 1fr;
  grid-auto-rows: minmax(210px, auto);
}

.solution-card:first-child {
  grid-row: span 2;
  min-height: 440px;
  background:
    radial-gradient(circle at 64% 22%, rgba(32,243,160,.18), transparent 32%),
    linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.014));
}

.solution-card:first-child .solution-visual {
  height: 240px;
}

.solution-card:first-child .solution-icon {
  width: 128px;
  height: 128px;
}

.solution-card:first-child h3 {
  font-size: 26px;
}

.solution-card:nth-child(3),
.solution-card:nth-child(5) {
  transform: translateY(22px);
}

.solution-card:nth-child(3):hover,
.solution-card:nth-child(5):hover {
  transform: translateY(16px);
}

.solution-content span {
  color: #20f3a0;
  font-weight: 760;
}

.solution-card h3 {
  color: #fff;
}

.solution-icon {
  stroke: #20f3a0;
  filter: drop-shadow(0 0 22px rgba(32,243,160,.28));
}

#training .delivery-track article:nth-child(1),
#training .delivery-track article:nth-child(4) {
  min-height: 300px;
}

#training .delivery-track article:nth-child(2),
#training .delivery-track article:nth-child(3) {
  margin-top: 36px;
}

#training .delivery-track article {
  background:
    linear-gradient(180deg, rgba(255,255,255,.034), rgba(255,255,255,.012)),
    radial-gradient(circle at 70% 18%, rgba(32,243,160,.12), transparent 32%);
}

@keyframes heroCoreBreathe {
  0%, 100% { transform: scale(.98); opacity: .72; }
  50% { transform: scale(1.04); opacity: 1; }
}

@keyframes heroCoreRotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes heroPulse {
  0%, 100% { transform: scale(.82); opacity: .24; }
  50% { transform: scale(1.35); opacity: .68; }
}

@media (max-width: 980px) {
  .agent-slide .hero-stage {
    grid-template-columns: 1fr;
  }

  .hero-intelligence-core {
    display: none;
  }

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

  .solution-card:first-child {
    grid-row: auto;
    min-height: 0;
  }

  .solution-card:nth-child(3),
  .solution-card:nth-child(5),
  #training .delivery-track article:nth-child(2),
  #training .delivery-track article:nth-child(3) {
    transform: none;
    margin-top: 0;
  }
}

@media (max-width: 640px) {
  .solution-board {
    grid-template-columns: 1fr;
  }

  .hero-metrics,
  .infra-metrics {
    gap: 8px;
  }
}

/* Brand-system refinement: stronger section identity, data narrative and less template-like rhythm. */
.hero--agent {
  isolation: isolate;
}

.agent-slide .hero-content {
  position: relative;
  z-index: 2;
}

.agent-slide .hero-content::before {
  content: "";
  position: absolute;
  left: -22px;
  top: 6px;
  width: 3px;
  height: 112px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(32,243,160,.95), rgba(32,243,160,0));
  box-shadow: 0 0 28px rgba(32,243,160,.34);
}

.hero-intelligence-core {
  transform-style: preserve-3d;
}

.hero-intelligence-core .core-ring-a {
  animation: heroCoreTiltA 13s linear infinite;
}

.hero-intelligence-core .core-ring-b {
  animation: heroCoreTiltB 17s linear infinite reverse;
}

.hero-metrics {
  max-width: 620px;
}

.hero-metrics span:first-child,
.infra-metrics span:first-child,
.solution-stats span:first-child {
  border-color: rgba(32,243,160,.46);
  background: rgba(32,243,160,.10);
}

#services.ai-origin,
#scenarios.ai-solutions,
#capability.core-tech-section,
#training.premium-delivery,
#resources.premium-resources,
#about.premium-about {
  position: relative;
  overflow: hidden;
}

#services.ai-origin::after,
#scenarios.ai-solutions::after,
#capability.core-tech-section::after,
#training.premium-delivery::after,
#resources.premium-resources::after,
#about.premium-about::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .45;
  mix-blend-mode: screen;
}

#services.ai-origin::after {
  background:
    linear-gradient(90deg, transparent 0 48%, rgba(32,243,160,.075) 48% 52%, transparent 52%),
    radial-gradient(circle at 52% 18%, rgba(32,243,160,.12), transparent 22%);
}

#scenarios.ai-solutions::after {
  background:
    linear-gradient(135deg, transparent 0 58%, rgba(32,243,160,.065) 58% 59%, transparent 59%),
    radial-gradient(circle at 82% 24%, rgba(32,243,160,.12), transparent 26%);
}

#capability.core-tech-section::after {
  background:
    linear-gradient(180deg, transparent 0 42%, rgba(255,255,255,.035) 42% 43%, transparent 43%),
    radial-gradient(circle at 75% 46%, rgba(32,243,160,.10), transparent 30%);
}

#training.premium-delivery::after {
  background:
    radial-gradient(circle at 20% 20%, rgba(32,243,160,.10), transparent 22%),
    linear-gradient(120deg, transparent 0 62%, rgba(32,243,160,.055) 62% 63%, transparent 63%);
}

#resources.premium-resources::after {
  background:
    linear-gradient(90deg, rgba(32,243,160,.06), transparent 28%, transparent 72%, rgba(32,243,160,.035)),
    radial-gradient(circle at 30% 70%, rgba(32,243,160,.12), transparent 24%);
}

#about.premium-about::after {
  background:
    radial-gradient(ellipse at 50% 78%, rgba(255,255,255,.08), transparent 28%),
    linear-gradient(180deg, rgba(255,255,255,.035), transparent 36%);
}

.solution-stats {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
  margin: 22px auto 0;
}

.solution-stats span {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  min-height: 32px;
  padding: 0 14px;
  border: 1px solid rgba(93,202,165,.22);
  border-radius: 999px;
  background: rgba(255,255,255,.025);
  color: rgba(139,191,170,.82);
  font-size: 12px;
  backdrop-filter: blur(12px);
}

.solution-stats strong {
  color: #D4F5E9;
  font-size: 17px;
  font-weight: 760;
}

#scenarios .solution-divider {
  margin-top: 28px;
}

#scenarios .solution-board {
  align-items: stretch;
  grid-template-columns: minmax(300px, 1.16fr) repeat(2, minmax(230px, .92fr));
  gap: 18px;
}

#scenarios .solution-card {
  min-height: 224px;
  border-radius: 12px;
}

#scenarios .solution-card:first-child {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 466px;
  padding-bottom: 4px;
  border-color: rgba(32,243,160,.28);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 28px 80px rgba(0,0,0,.22);
}

#scenarios .solution-card:first-child::after {
  content: "AI";
  position: absolute;
  right: 24px;
  top: 18px;
  color: rgba(32,243,160,.10);
  font-size: 90px;
  font-weight: 800;
  letter-spacing: -.08em;
  pointer-events: none;
}

#scenarios .solution-card:first-child .solution-content {
  padding: 28px;
}

#scenarios .solution-card:first-child .solution-content span {
  font-size: 13px;
}

#scenarios .solution-card:first-child .solution-content p {
  max-width: 360px;
  font-size: 14px;
  color: rgba(159,225,203,.82);
}

#scenarios .solution-card:not(:first-child) {
  display: grid;
  grid-template-rows: 112px 1fr;
}

#scenarios .solution-card:not(:first-child) .solution-visual {
  height: auto;
  min-height: 112px;
}

#scenarios .solution-card:not(:first-child) .solution-icon {
  width: 70px;
  height: 70px;
  opacity: .78;
}

#scenarios .solution-card:not(:first-child) h3 {
  font-size: 20px;
}

#scenarios .solution-card:nth-child(4) {
  background:
    linear-gradient(145deg, rgba(32,243,160,.095), rgba(255,255,255,.012)),
    rgba(255,255,255,.018);
}

#scenarios .solution-card:nth-child(6) {
  border-color: rgba(212,245,233,.18);
}

#training .delivery-track {
  grid-template-columns: 1.08fr .92fr .92fr 1.08fr;
}

#training .delivery-track article:nth-child(1) {
  background:
    radial-gradient(circle at 22% 18%, rgba(32,243,160,.18), transparent 28%),
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.012));
}

#resources .resource-stage {
  grid-template-columns: minmax(360px, .92fr) minmax(480px, 1.08fr);
}

#resources .resource-main::before {
  content: "200+";
  position: absolute;
  right: 36px;
  bottom: 26px;
  color: rgba(32,243,160,.13);
  font-size: 96px;
  font-weight: 800;
  line-height: 1;
  pointer-events: none;
}

#resources .resource-panels article:nth-child(2) {
  margin-left: 42px;
}

#resources .resource-panels article:nth-child(3) {
  margin-left: 88px;
}

#about .about-stage {
  min-height: auto;
}

@keyframes heroCoreTiltA {
  from { transform: rotateX(64deg) rotateZ(20deg); }
  to { transform: rotateX(64deg) rotateZ(380deg); }
}

@keyframes heroCoreTiltB {
  from { transform: rotateY(62deg) rotateZ(-28deg); }
  to { transform: rotateY(62deg) rotateZ(332deg); }
}

@media (max-width: 1180px) {
  #scenarios .solution-board {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #scenarios .solution-card:first-child {
    grid-row: auto;
    min-height: 0;
  }

  #resources .resource-panels article:nth-child(2),
  #resources .resource-panels article:nth-child(3) {
    margin-left: 0;
  }
}

@media (max-width: 760px) {
  .agent-slide .hero-content::before {
    left: -12px;
    height: 80px;
  }

  .solution-stats,
  .hero-metrics,
  .infra-metrics {
    justify-content: flex-start;
  }

  #scenarios .solution-board,
  #training .delivery-track,
  #resources .resource-stage {
    grid-template-columns: 1fr;
  }
}

/* 2026-05-29 rhythm3: rebuild homepage section rhythm, hierarchy and empty-space control. */
:root {
  --rhythm-bg: #020604;
  --rhythm-green: #18d894;
  --rhythm-green-soft: #8bbfaa;
  --rhythm-title: clamp(36px, 3.9vw, 56px);
  --rhythm-sub: 15px;
  --rhythm-card-radius: 14px;
  --rhythm-container: min(1340px, calc(100% - 112px));
}

html {
  scroll-behavior: smooth;
}

body {
  background: var(--rhythm-bg) !important;
}

main,
.ai-home {
  background: var(--rhythm-bg) !important;
}

.ai-section {
  position: relative !important;
  overflow: hidden !important;
  scroll-margin-top: 78px !important;
}

.ai-section .container {
  position: relative !important;
  z-index: 2 !important;
}

/* Keep the first three carousel slides clean: no ghost leaf/circle or footer-copy overlays. */
.hero-intelligence-core,
.hero-metrics,
.hero::after,
.agent-slide .hero-content::before,
.agent-slide .hero-content::after,
.hero-slide.agent-slide::after {
  display: none !important;
  content: none !important;
}

.agent-canvas {
  opacity: .44 !important;
  mix-blend-mode: screen !important;
}

.hero-overlay {
  background:
    linear-gradient(90deg, rgba(0, 0, 0, .52) 0%, rgba(0, 0, 0, .24) 43%, rgba(0, 0, 0, .12) 100%),
    linear-gradient(180deg, rgba(0, 0, 0, .22), rgba(0, 0, 0, .18)) !important;
}

/* Screen 2: product infrastructure, compact enough for one screen with visible 3D hierarchy. */
#services.ai-origin {
  min-height: calc(100svh - 78px) !important;
  padding: 76px 0 54px !important;
  margin: 0 !important;
  background:
    radial-gradient(circle at 76% 24%, rgba(30, 214, 147, .14), transparent 30%),
    radial-gradient(circle at 22% 64%, rgba(30, 214, 147, .08), transparent 26%),
    linear-gradient(145deg, #030706 0%, #06130d 52%, #010302 100%) !important;
}

#services.ai-origin::before {
  background:
    linear-gradient(110deg, transparent 0 18%, rgba(255,255,255,.026) 18.2% 18.7%, transparent 19% 48%, rgba(30,214,147,.05) 48.2% 49%, transparent 49.5%),
    radial-gradient(circle at 20% 20%, rgba(143, 255, 216, .16) 0 1px, transparent 2px),
    radial-gradient(circle at 72% 30%, rgba(143, 255, 216, .16) 0 1px, transparent 2px) !important;
  background-size: 100% 100%, 150px 150px, 210px 210px !important;
  opacity: .56 !important;
}

#services .infrastructure-section {
  width: var(--rhythm-container) !important;
  min-height: auto !important;
  gap: 30px !important;
}

#services .infra-hero {
  max-width: 760px !important;
  margin: 0 auto 28px !important;
  text-align: center !important;
}

#services .infra-pill,
#scenarios .solution-badge,
#capability .core-badge {
  min-height: 34px !important;
  padding: 6px 18px !important;
  border-radius: 999px !important;
  font-size: 13px !important;
  letter-spacing: 1px !important;
}

#services .infra-hero h2,
#scenarios .solution-hero h2,
#training .stage-head h2,
#resources .resource-main h2,
#about .about-narrative-center h2 {
  font-size: var(--rhythm-title) !important;
  line-height: 1.13 !important;
  font-weight: 650 !important;
  letter-spacing: 0 !important;
  color: #fff !important;
}

#services .infra-hero h2 {
  margin: 13px 0 10px !important;
  color: #f3fff9 !important;
}

#services .infra-hero p {
  max-width: 760px !important;
  margin: 0 auto !important;
  color: #78d9bb !important;
  font-size: var(--rhythm-sub) !important;
  line-height: 1.65 !important;
}

#services .infra-metrics {
  display: none !important;
}

#services .infra-showcase {
  width: min(1180px, 100%) !important;
  min-height: 486px !important;
  max-height: none !important;
  margin: 0 auto !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr) !important;
  grid-template-rows: repeat(3, minmax(136px, 1fr)) !important;
  gap: 16px 20px !important;
  align-items: stretch !important;
}

#services .infra-module,
#services .infra-module:first-child,
#services .infra-module:not(:first-child) {
  position: relative !important;
  min-height: 0 !important;
  height: auto !important;
  border-radius: var(--rhythm-card-radius) !important;
  padding: 26px !important;
  overflow: hidden !important;
  background:
    radial-gradient(circle at 78% 58%, rgba(30, 214, 147, .15), transparent 35%),
    rgba(255, 255, 255, .025) !important;
  border: 1px solid rgba(157, 225, 203, .16) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.08), 0 24px 60px rgba(0,0,0,.22) !important;
}

#services .infra-module:first-child {
  grid-column: 1 !important;
  grid-row: 1 / 4 !important;
  display: block !important;
  padding: 34px !important;
}

#services .infra-module:not(:first-child) {
  grid-column: 2 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 118px !important;
  align-items: center !important;
  column-gap: 18px !important;
}

#services .infra-module:nth-child(2) { grid-row: 1 !important; }
#services .infra-module:nth-child(3) { grid-row: 2 !important; }
#services .infra-module:nth-child(4) { grid-row: 3 !important; }

#services .infra-copy {
  position: relative !important;
  z-index: 2 !important;
  max-width: 560px !important;
}

#services .infra-copy span,
#services .infra-copy li::marker {
  color: #5dcaa5 !important;
}

#services .infra-copy h3 {
  font-size: clamp(28px, 2.4vw, 40px) !important;
  line-height: 1.16 !important;
  color: #fff !important;
  margin: 14px 0 16px !important;
  white-space: nowrap !important;
}

#services .infra-module:not(:first-child) .infra-copy h3 {
  color: #d4f5e9 !important;
  font-size: clamp(26px, 2.05vw, 34px) !important;
  margin: 8px 0 10px !important;
}

#services .infra-copy p {
  color: #8bbfaa !important;
  font-size: 15px !important;
  line-height: 1.74 !important;
}

#services .infra-module:not(:first-child) .infra-copy p {
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  max-width: 500px !important;
  font-size: 14px !important;
  line-height: 1.58 !important;
}

#services .infra-copy ul {
  margin-top: 28px !important;
  gap: 10px !important;
}

#services .infra-copy li {
  color: rgba(255,255,255,.86) !important;
  font-size: 14px !important;
}

#services .infra-visual {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

#services .infra-visual img {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  object-fit: contain !important;
}

#services .infra-module:not(:first-child) .infra-visual {
  position: relative !important;
  right: auto !important;
  top: auto !important;
  width: 112px !important;
  height: 112px !important;
  justify-self: end !important;
  align-self: center !important;
  opacity: .96 !important;
  transform: none !important;
}

#services .infra-module:not(:first-child) .infra-visual img {
  width: 112px !important;
  height: 112px !important;
  mix-blend-mode: screen !important;
  filter: brightness(1.08) drop-shadow(0 0 18px rgba(32,243,160,.3)) !important;
}

#services .infra-module:first-child .infra-visual-base {
  position: absolute !important;
  width: clamp(210px, 20vw, 280px) !important;
  height: clamp(210px, 20vw, 280px) !important;
  right: 24px !important;
  bottom: 18px !important;
  transform: none !important;
  overflow: visible !important;
}

#services .infra-orb-static {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  transform: none !important;
  opacity: 1 !important;
  mix-blend-mode: screen !important;
  filter: brightness(1.08) saturate(1.08) drop-shadow(0 0 26px rgba(32,243,160,.36)) !important;
}

#services .infra-orb-spin {
  display: none !important;
}

#services .infra-visual-base::before {
  content: "" !important;
  position: absolute !important;
  left: 15% !important;
  top: 9% !important;
  width: 70% !important;
  height: 70% !important;
  border-radius: 50% !important;
  background:
    linear-gradient(90deg, transparent 0 34%, rgba(255,255,255,.18) 42%, transparent 50% 100%),
    repeating-radial-gradient(ellipse at center, transparent 0 15px, rgba(185,255,231,.22) 16px 17px, transparent 18px 32px) !important;
  mix-blend-mode: screen !important;
  opacity: .58 !important;
  animation: siweishuOrbSweep 8s linear infinite !important;
  pointer-events: none !important;
}

#services .infra-visual-base::after {
  content: "" !important;
  position: absolute !important;
  left: 18% !important;
  bottom: 7% !important;
  width: 63% !important;
  height: 16% !important;
  border-radius: 50% !important;
  background: radial-gradient(ellipse, rgba(36, 255, 175, .28), transparent 68%) !important;
  filter: blur(4px) !important;
  opacity: .78 !important;
  pointer-events: none !important;
}

@keyframes siweishuOrbSweep {
  from { transform: rotateY(0deg) rotateZ(0deg); }
  to { transform: rotateY(360deg) rotateZ(360deg); }
}

/* Screen 3: scenarios become a compact bento narrative with visible icons and no empty center void. */
#scenarios.ai-solutions {
  min-height: calc(100svh - 78px) !important;
  padding: 82px 0 60px !important;
  display: grid !important;
  grid-template-columns: minmax(320px, .76fr) minmax(0, 1.34fr) !important;
  gap: 46px !important;
  align-items: center !important;
  background:
    radial-gradient(circle at 84% 20%, rgba(30, 214, 147, .12), transparent 28%),
    linear-gradient(180deg, #020706 0%, #050806 100%) !important;
}

#scenarios .solution-glow {
  display: none !important;
}

#scenarios .solution-hero {
  width: min(440px, 100%) !important;
  margin-left: max(56px, calc((100vw - 1340px) / 2)) !important;
  align-self: center !important;
}

#scenarios .solution-badge {
  margin-bottom: 24px !important;
}

#scenarios .solution-hero h2 {
  max-width: 430px !important;
  font-size: clamp(34px, 3.2vw, 52px) !important;
  line-height: 1.12 !important;
  white-space: normal !important;
}

#scenarios .solution-subtitle {
  max-width: 410px !important;
  margin-top: 22px !important;
  font-size: 15px !important;
  line-height: 1.75 !important;
}

#scenarios .solution-stats {
  margin-top: 22px !important;
}

#scenarios .solution-divider {
  display: none !important;
}

#scenarios .solution-board {
  width: min(920px, calc(100vw - 540px)) !important;
  margin-right: max(56px, calc((100vw - 1340px) / 2)) !important;
  display: grid !important;
  grid-template-columns: 1.12fr .82fr .82fr !important;
  grid-template-rows: repeat(2, minmax(204px, 1fr)) !important;
  gap: 16px !important;
}

#scenarios .solution-card,
#scenarios .solution-card:first-child,
#scenarios .solution-card:nth-child(2),
#scenarios .solution-card:nth-child(3),
#scenarios .solution-card:nth-child(4),
#scenarios .solution-card:nth-child(5),
#scenarios .solution-card:nth-child(6) {
  min-height: 0 !important;
  border-radius: 14px !important;
  padding: 0 !important;
  overflow: hidden !important;
  background:
    radial-gradient(circle at 70% 12%, rgba(30, 214, 147, .13), transparent 34%),
    rgba(9, 39, 25, .72) !important;
  border: 1px solid rgba(29, 158, 117, .32) !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  grid-template-rows: 82px 1fr !important;
}

#scenarios .solution-card:first-child {
  grid-column: 1 !important;
  grid-row: 1 / 3 !important;
  grid-template-rows: 170px 1fr !important;
}

#scenarios .solution-card:nth-child(2) { grid-column: 2 !important; grid-row: 1 !important; }
#scenarios .solution-card:nth-child(3) { grid-column: 3 !important; grid-row: 1 !important; }
#scenarios .solution-card:nth-child(4) { grid-column: 1 !important; grid-row: 2 !important; transform: translateY(0) !important; }
#scenarios .solution-card:nth-child(5) { grid-column: 2 !important; grid-row: 2 !important; transform: translateY(0) !important; }
#scenarios .solution-card:nth-child(6) { grid-column: 3 !important; grid-row: 2 !important; }
#scenarios .solution-card:first-child + .solution-card + .solution-card + .solution-card {
  grid-column: 1 !important;
  grid-row: 2 !important;
}

/* Re-position the first card as the main Bento card and keep 4/5/6 visible. */
#scenarios .solution-card:nth-child(4) {
  grid-column: 1 !important;
  grid-row: 2 !important;
}

#scenarios .solution-card:first-child {
  grid-row: 1 !important;
}

#scenarios .solution-card:nth-child(4),
#scenarios .solution-card:nth-child(5),
#scenarios .solution-card:nth-child(6) {
  grid-template-rows: 76px 1fr !important;
}

#scenarios .solution-visual,
#scenarios .solution-card:first-child .solution-visual,
#scenarios .solution-card:nth-child(4) .solution-visual,
#scenarios .solution-card:nth-child(5) .solution-visual,
#scenarios .solution-card:nth-child(6) .solution-visual {
  height: auto !important;
  padding: 22px 26px 0 !important;
  opacity: 1 !important;
}

#scenarios .solution-icon,
#scenarios .solution-card:first-child .solution-icon,
#scenarios .solution-card:not(:first-child) .solution-icon,
#scenarios .solution-card:nth-child(4) .solution-icon,
#scenarios .solution-card:nth-child(5) .solution-icon,
#scenarios .solution-card:nth-child(6) .solution-icon {
  width: 58px !important;
  height: 58px !important;
  color: var(--rhythm-green) !important;
  stroke: currentColor !important;
  opacity: .92 !important;
  filter: drop-shadow(0 0 18px rgba(32, 243, 160, .22)) !important;
}

#scenarios .solution-content,
#scenarios .solution-card:first-child .solution-content,
#scenarios .solution-card:nth-child(4) .solution-content,
#scenarios .solution-card:nth-child(5) .solution-content,
#scenarios .solution-card:nth-child(6) .solution-content {
  padding: 14px 26px 24px !important;
}

#scenarios .solution-content span {
  color: #1ddc98 !important;
  font-size: 13px !important;
  letter-spacing: 4px !important;
}

#scenarios .solution-card h3,
#scenarios .solution-card:first-child h3,
#scenarios .solution-card:nth-child(4) h3,
#scenarios .solution-card:nth-child(5) h3,
#scenarios .solution-card:nth-child(6) h3 {
  font-size: clamp(20px, 1.45vw, 25px) !important;
  line-height: 1.2 !important;
  margin: 12px 0 12px !important;
  color: #fff !important;
}

#scenarios .solution-card p,
#scenarios .solution-card:first-child .solution-content p,
#scenarios .solution-card:nth-child(4) p,
#scenarios .solution-card:nth-child(5) p,
#scenarios .solution-card:nth-child(6) p {
  font-size: 13px !important;
  line-height: 1.65 !important;
  color: #8bbfaa !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

/* Screen 4: cooler architecture screen, with title fit and larger, readable icons. */
#capability.core-tech-section {
  min-height: calc(100svh - 78px) !important;
  padding: 80px 0 68px !important;
  background:
    radial-gradient(circle at 72% 42%, rgba(30, 214, 147, .09), transparent 28%),
    linear-gradient(180deg, #061422 0%, #04111e 54%, #02070d 100%) !important;
}

#capability .capability-stage {
  width: var(--rhythm-container) !important;
  min-height: auto !important;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr) !important;
  gap: 60px !important;
  align-items: center !important;
}

#capability.core-tech-section .capability-copy h2 {
  max-width: 760px !important;
  font-size: clamp(34px, 3.1vw, 48px) !important;
  line-height: 1.15 !important;
  letter-spacing: 0 !important;
  word-break: normal !important;
}

#capability .capability-copy p {
  max-width: 620px !important;
  font-size: 15px !important;
  line-height: 1.85 !important;
}

#capability .tech-console.core-card-grid {
  min-height: auto !important;
  padding: 18px !important;
  gap: 16px !important;
}

#capability .core-tech-card {
  min-height: 232px !important;
  padding: 28px !important;
}

#capability .tech-icon {
  width: 70px !important;
  height: 70px !important;
  margin-bottom: 22px !important;
  stroke-width: 1.45 !important;
  filter: drop-shadow(0 0 18px rgba(32,243,160,.34)) !important;
}

#capability .core-tech-card h3 {
  font-size: 24px !important;
  line-height: 1.22 !important;
}

#capability .core-tech-card em {
  min-height: 0 !important;
  line-height: 1.55 !important;
  color: rgba(139,191,170,.62) !important;
}

/* Screen 5: delivery as a process, not another equal-card grid. */
#training.ai-delivery {
  min-height: calc(100svh - 78px) !important;
  padding: 82px 0 70px !important;
  background:
    radial-gradient(circle at 84% 18%, rgba(30, 214, 147, .08), transparent 30%),
    linear-gradient(180deg, #101111 0%, #070807 100%) !important;
}

#training .delivery-stage {
  width: var(--rhythm-container) !important;
  min-height: auto !important;
  display: grid !important;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr) !important;
  gap: 70px !important;
  align-items: center !important;
}

#training .stage-head h2 {
  font-size: var(--rhythm-title) !important;
  max-width: 620px !important;
}

#training .stage-head p {
  max-width: 540px !important;
  font-size: 15px !important;
}

#training .delivery-track {
  position: relative !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 16px !important;
  padding-left: 38px !important;
}

#training .delivery-track::before {
  content: "" !important;
  position: absolute !important;
  left: 15px !important;
  top: 18px !important;
  bottom: 18px !important;
  width: 1px !important;
  background: linear-gradient(180deg, transparent, rgba(30,214,147,.8), transparent) !important;
}

#training .delivery-track article {
  min-height: 116px !important;
  padding: 20px 22px !important;
  border-radius: 14px !important;
  display: grid !important;
  grid-template-columns: 46px 48px 1fr !important;
  align-items: center !important;
  column-gap: 18px !important;
}

#training .delivery-track article::before {
  content: "" !important;
  position: absolute !important;
  left: -30px !important;
  width: 12px !important;
  height: 12px !important;
  border-radius: 50% !important;
  background: var(--rhythm-green) !important;
  box-shadow: 0 0 20px rgba(30,214,147,.8) !important;
}

#training .delivery-icon {
  width: 34px !important;
  height: 34px !important;
  color: var(--rhythm-green) !important;
}

#training .delivery-track article h3 {
  font-size: 24px !important;
  white-space: nowrap !important;
}

#training .delivery-track article p {
  display: block !important;
  font-size: 13px !important;
  line-height: 1.55 !important;
}

/* Screen 6: resources uses a tabbed product-console layout instead of repeated blocks. */
#resources.ai-resources {
  min-height: calc(100svh - 78px) !important;
  padding: 86px 0 72px !important;
  background:
    radial-gradient(circle at 35% 20%, rgba(30, 214, 147, .10), transparent 31%),
    linear-gradient(180deg, #06130d 0%, #02110a 100%) !important;
}

#resources .resource-stage {
  width: var(--rhythm-container) !important;
  min-height: auto !important;
  display: grid !important;
  grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr) !important;
  gap: 56px !important;
  align-items: center !important;
}

#resources .resource-main {
  min-height: 520px !important;
  border: 1px solid rgba(29, 158, 117, .28) !important;
  border-radius: 18px !important;
  padding: 48px !important;
  background:
    radial-gradient(circle at 86% 76%, rgba(30,214,147,.16), transparent 34%),
    rgba(255,255,255,.018) !important;
}

#resources .resource-main h2 {
  max-width: 560px !important;
  font-size: clamp(34px, 3.7vw, 54px) !important;
}

#resources .resource-main p {
  max-width: 560px !important;
  font-size: 15px !important;
  line-height: 1.8 !important;
}

#resources .resource-tabs {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 12px !important;
  margin-top: 42px !important;
}

#resources .resource-tabs button {
  min-height: 46px !important;
  border-radius: 999px !important;
}

#resources .resource-panels {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 18px !important;
}

#resources .resource-panels article {
  position: relative !important;
  min-height: 156px !important;
  display: grid !important;
  grid-template-columns: 1fr 74px !important;
  grid-template-areas:
    "eyebrow icon"
    "title icon"
    "desc icon" !important;
  align-items: center !important;
  gap: 4px 26px !important;
  padding: 26px 28px !important;
  border-radius: 14px !important;
  background: rgba(255,255,255,.025) !important;
}

#resources .resource-panels article::before,
#resources .resource-panels article::after {
  display: none !important;
}

#resources .resource-icon {
  grid-area: icon !important;
  position: static !important;
  width: 58px !important;
  height: 58px !important;
  justify-self: end !important;
  align-self: center !important;
  margin: 0 !important;
  color: var(--rhythm-green) !important;
  opacity: .82 !important;
  filter: drop-shadow(0 0 18px rgba(32,243,160,.28)) !important;
}

#resources .resource-panels article span {
  grid-area: eyebrow !important;
  color: #5dcaa5 !important;
  font-size: 12px !important;
  letter-spacing: 3px !important;
}

#resources .resource-panels article h3 {
  grid-area: title !important;
  font-size: 28px !important;
  margin: 0 !important;
  color: #fff !important;
}

#resources .resource-panels article p {
  grid-area: desc !important;
  margin: 0 !important;
  font-size: 14px !important;
  line-height: 1.65 !important;
}

/* Screen 7: company intro should feel like an about film, simple copy above a clickable frame. */
#about.ai-about {
  min-height: calc(100svh - 78px) !important;
  padding: 88px 0 78px !important;
  background:
    radial-gradient(circle at 78% 22%, rgba(30, 214, 147, .08), transparent 30%),
    linear-gradient(180deg, #0b0c0c 0%, #050806 100%) !important;
}

#about .about-stage {
  width: var(--rhythm-container) !important;
  min-height: auto !important;
  display: grid !important;
  grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr) !important;
  gap: 64px !important;
  align-items: center !important;
}

#about .about-narrative-center {
  text-align: left !important;
}

#about .about-narrative-center h2 {
  max-width: 650px !important;
  font-size: clamp(40px, 4.8vw, 72px) !important;
  line-height: 1.16 !important;
  white-space: normal !important;
}

#about .about-narrative-center p {
  max-width: 640px !important;
  margin: 28px 0 0 !important;
  font-size: 17px !important;
  line-height: 1.85 !important;
}

#about .about-video-frame {
  min-height: 430px !important;
  height: min(46vw, 520px) !important;
  border-radius: 18px !important;
  cursor: pointer !important;
}

#about .about-video-frame:hover {
  border-color: rgba(157, 225, 203, .38) !important;
  transform: translateY(-3px) !important;
}

#about .about-play {
  opacity: 1 !important;
}

/* Footer: DJI-like grouped columns, then one-line license/copyright row on desktop. */
.dji-footer {
  background: #202220 !important;
  color: rgba(255,255,255,.76) !important;
}

.dji-footer .footer-download {
  min-height: 104px !important;
  padding: 28px 0 32px !important;
  border-bottom: 1px solid rgba(255,255,255,.12) !important;
}

.dji-footer .footer-mega {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 48px !important;
  padding: 42px 0 38px !important;
}

.dji-footer .footer-column h3 {
  color: #fff !important;
  font-size: 14px !important;
  margin: 0 0 16px !important;
}

.dji-footer .footer-column a,
.dji-footer .footer-column span {
  color: rgba(255,255,255,.64) !important;
  font-size: 13px !important;
  line-height: 1.8 !important;
}

.dji-footer .footer-brandbar {
  display: flex !important;
  align-items: center !important;
  gap: 36px !important;
  padding: 24px 0 !important;
  border-top: 1px solid rgba(255,255,255,.12) !important;
}

.dji-footer .footer-brandbar img {
  width: 140px !important;
  height: auto !important;
}

.dji-footer .footer-brandbar nav {
  display: flex !important;
  flex: 1 !important;
  flex-wrap: wrap !important;
  gap: 22px !important;
}

.footer-social {
  display: flex !important;
  gap: 10px !important;
}

.footer-social a {
  width: 34px !important;
  min-width: 34px !important;
  height: 34px !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  color: transparent !important;
  font-size: 0 !important;
  background: rgba(255,255,255,.04) !important;
}

.footer-social a::before {
  color: rgba(255,255,255,.78) !important;
  font-size: 13px !important;
  line-height: 1 !important;
}

.footer-social a[aria-label="微博"]::before { content: "微"; }
.footer-social a[aria-label="微信"]::before { content: "信"; }
.footer-social a[aria-label="腾讯"]::before { content: "腾"; }
.footer-social a[aria-label="抖音"]::before { content: "抖"; }

.dji-footer .footer-legal {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 24px !important;
  padding: 18px 0 28px !important;
  border-top: 1px solid rgba(255,255,255,.12) !important;
}

.footer-records {
  display: flex !important;
  align-items: center !important;
  flex: 1 1 auto !important;
  flex-wrap: nowrap !important;
  gap: 0 !important;
  min-width: 0 !important;
}

.footer-records a,
.footer-records span {
  margin: 0 !important;
  padding-right: 20px !important;
  color: rgba(255,255,255,.5) !important;
  font-size: 13px !important;
  white-space: nowrap !important;
}

.footer-records a + span,
.footer-records span + a,
.footer-records a + a,
.footer-records span + span {
  padding-left: 20px !important;
  border-left: 1px solid rgba(255,255,255,.14) !important;
}

.footer-records .footer-copyright::before,
.footer-records .footer-tagline::before {
  display: none !important;
}

.footer-locale {
  display: inline-flex !important;
  flex: 0 0 auto !important;
  align-items: center !important;
  gap: 10px !important;
}

@media (max-width: 1180px) {
  :root {
    --rhythm-container: min(100% - 48px, 900px);
  }

  #services.ai-origin,
  #scenarios.ai-solutions,
  #capability.core-tech-section,
  #training.ai-delivery,
  #resources.ai-resources,
  #about.ai-about {
    min-height: auto !important;
    padding-top: 70px !important;
    padding-bottom: 70px !important;
  }

  #services .infra-showcase,
  #capability .capability-stage,
  #training .delivery-stage,
  #resources .resource-stage,
  #about .about-stage {
    grid-template-columns: 1fr !important;
  }

  #services .infra-showcase {
    grid-template-rows: auto !important;
  }

  #services .infra-module:first-child,
  #services .infra-module:not(:first-child) {
    grid-column: auto !important;
    grid-row: auto !important;
  }

  #scenarios.ai-solutions {
    grid-template-columns: 1fr !important;
  }

  #scenarios .solution-hero,
  #scenarios .solution-board {
    width: var(--rhythm-container) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  #scenarios .solution-board {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-template-rows: auto !important;
  }

  #scenarios .solution-card,
  #scenarios .solution-card:first-child,
  #scenarios .solution-card:nth-child(2),
  #scenarios .solution-card:nth-child(3),
  #scenarios .solution-card:nth-child(4),
  #scenarios .solution-card:nth-child(5),
  #scenarios .solution-card:nth-child(6) {
    grid-column: auto !important;
    grid-row: auto !important;
    min-height: 220px !important;
  }

  .dji-footer .footer-mega {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .footer-records {
    flex-wrap: wrap !important;
    gap: 10px 0 !important;
  }
}

@media (max-width: 760px) {
  :root {
    --rhythm-container: min(100% - 28px, 640px);
    --rhythm-title: clamp(30px, 8.5vw, 42px);
  }

  #services .infra-module:not(:first-child) {
    grid-template-columns: 1fr 88px !important;
  }

  #services .infra-module:first-child .infra-visual-base {
    width: 170px !important;
    height: 170px !important;
    right: 10px !important;
    bottom: 10px !important;
  }

  #scenarios .solution-board,
  #capability .tech-console.core-card-grid,
  #training .delivery-stage,
  #resources .resource-stage,
  #about .about-stage {
    grid-template-columns: 1fr !important;
  }

  #scenarios .solution-card,
  #scenarios .solution-card:first-child {
    min-height: 210px !important;
  }

  #training .delivery-track article {
    grid-template-columns: 38px 42px 1fr !important;
  }

  #resources .resource-main {
    min-height: auto !important;
    padding: 28px !important;
  }

  #resources .resource-panels article {
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "icon"
      "eyebrow"
      "title"
      "desc" !important;
  }

  #resources .resource-icon {
    justify-self: start !important;
  }

  .dji-footer .footer-mega {
    grid-template-columns: 1fr !important;
  }

  .dji-footer .footer-brandbar {
    align-items: flex-start !important;
    flex-direction: column !important;
  }
}

/* Rhythm system pass: section temperature, Bento hierarchy, timeline delivery and resource tabs. */
:root {
  --sws-black: #010f0a;
  --sws-neutral: #0c0c0c;
  --sws-blueblack: #04111e;
  --sws-footer: #07180f;
}

.hero--agent {
  background-color: #000805;
}

.ai-home {
  background:
    linear-gradient(180deg, #010f0a 0%, #010f0a 22%, #04111e 44%, #0c0c0c 66%, #07180f 100%);
}

#services.ai-origin {
  min-height: 100vh;
  padding-top: 88px;
  padding-bottom: 88px;
  background:
    radial-gradient(circle at 82% 18%, rgba(32,243,160,.16), transparent 26%),
    radial-gradient(circle at 16% 82%, rgba(32,243,160,.08), transparent 28%),
    linear-gradient(180deg, #010f0a 0%, #020a07 100%);
}

#services .infrastructure-section {
  position: relative;
  z-index: 2;
}

#services .infra-hero {
  max-width: 900px;
  margin: 0 auto 40px;
  padding: 0;
}

#services .infra-hero h2 {
  font-size: clamp(42px, 5vw, 76px);
  line-height: 1.02;
  letter-spacing: -.02em;
}

#services .infra-hero h2 span {
  color: #20f3a0;
  text-shadow: 0 0 34px rgba(32,243,160,.25);
}

#services .infra-hero p {
  max-width: 680px;
  margin: 20px auto 0;
  color: rgba(212,245,233,.72);
  font-size: clamp(15px, 1.15vw, 19px);
  line-height: 1.8;
}

.infra-switch {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 30px;
}

.infra-switch button,
.resource-tabs button {
  min-height: 36px;
  padding: 0 20px;
  border: 1px solid rgba(32,243,160,.32);
  border-radius: 999px;
  color: rgba(212,245,233,.82);
  font: inherit;
  font-size: 13px;
  background: rgba(32,243,160,.055);
  cursor: pointer;
  transition: color .22s ease, border-color .22s ease, background .22s ease, transform .22s ease;
}

.infra-switch button:first-child,
.resource-tabs button.is-active {
  color: #20f3a0;
  border-color: rgba(32,243,160,.72);
  background: rgba(32,243,160,.12);
}

.infra-switch button:hover,
.resource-tabs button:hover {
  transform: translateY(-2px);
  border-color: rgba(32,243,160,.7);
  color: #fff;
}

#services .infra-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(120px, 1fr));
  width: min(620px, 100%);
  margin: 34px auto 0;
  padding-top: 26px;
  border-top: 1px solid rgba(32,243,160,.16);
}

#services .infra-metrics span {
  display: grid;
  justify-items: center;
  gap: 4px;
  min-height: auto;
  padding: 0 20px;
  border: 0;
  border-right: 1px solid rgba(255,255,255,.10);
  border-radius: 0;
  background: transparent;
}

#services .infra-metrics span:last-child {
  border-right: 0;
}

#services .infra-metrics strong {
  font-size: clamp(24px, 2.2vw, 34px);
}

#services .infra-showcase {
  grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
  gap: 18px 24px;
  align-items: stretch;
}

#services .infra-module {
  border-radius: 12px;
}

#services .infra-module:not(:first-child) {
  min-height: 154px;
  grid-template-columns: minmax(0, 1fr) 118px;
}

#services .infra-module:not(:first-child) .infra-visual {
  width: 112px;
  height: 112px;
}

#services .infra-module:not(:first-child) .infra-visual img {
  width: 112px;
  height: 112px;
}

#scenarios.ai-solutions {
  min-height: 100vh;
  padding: 78px 0 86px;
  background:
    radial-gradient(circle at 78% 12%, rgba(32,243,160,.08), transparent 22%),
    linear-gradient(180deg, #0c0c0c 0%, #050706 100%);
}

#scenarios .solution-hero {
  max-width: 1040px;
  margin: 0 auto 34px;
}

#scenarios .solution-badge {
  margin-bottom: 22px;
}

#scenarios .solution-hero h2 {
  max-width: 980px;
  margin: 0 auto;
  font-size: clamp(40px, 4.4vw, 64px);
  line-height: 1.12;
  text-align: center;
}

#scenarios .solution-subtitle {
  max-width: 700px;
  margin: 18px auto 0;
  text-align: center;
}

#scenarios .solution-board {
  width: min(1180px, calc(100% - 80px));
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.18fr .82fr .82fr;
  grid-template-rows: 196px 196px 132px;
  gap: 16px;
}

#scenarios .solution-card {
  min-height: 0;
  border-radius: 12px;
  background:
    linear-gradient(135deg, rgba(32,243,160,.055), rgba(255,255,255,.012)),
    #06100b;
}

#scenarios .solution-card:first-child {
  grid-row: 1 / span 2;
  min-height: 0;
}

#scenarios .solution-card:nth-child(2) {
  grid-column: 2 / span 1;
}

#scenarios .solution-card:nth-child(3) {
  grid-column: 3 / span 1;
}

#scenarios .solution-card:nth-child(4),
#scenarios .solution-card:nth-child(5),
#scenarios .solution-card:nth-child(6) {
  display: block;
}

#scenarios .solution-card:nth-child(4) {
  grid-column: 1 / span 1;
}

#scenarios .solution-card:nth-child(5) {
  grid-column: 2 / span 1;
}

#scenarios .solution-card:nth-child(6) {
  grid-column: 3 / span 1;
}

#scenarios .solution-card:nth-child(4) .solution-visual,
#scenarios .solution-card:nth-child(5) .solution-visual,
#scenarios .solution-card:nth-child(6) .solution-visual {
  display: none;
}

#scenarios .solution-card:nth-child(4) .solution-content,
#scenarios .solution-card:nth-child(5) .solution-content,
#scenarios .solution-card:nth-child(6) .solution-content {
  padding: 24px;
}

#scenarios .solution-card:nth-child(4) h3,
#scenarios .solution-card:nth-child(5) h3,
#scenarios .solution-card:nth-child(6) h3 {
  margin-bottom: 0;
  font-size: 22px;
}

#scenarios .solution-card:nth-child(4) p,
#scenarios .solution-card:nth-child(5) p,
#scenarios .solution-card:nth-child(6) p {
  display: none;
}

#scenarios .solution-card:nth-child(3),
#scenarios .solution-card:nth-child(5),
#scenarios .solution-card:nth-child(3):hover,
#scenarios .solution-card:nth-child(5):hover {
  transform: none;
}

#capability.core-tech-section {
  background:
    radial-gradient(circle at 74% 52%, rgba(56,125,255,.12), transparent 34%),
    radial-gradient(circle at 16% 24%, rgba(32,243,160,.08), transparent 24%),
    linear-gradient(180deg, #04111e 0%, #06101b 100%);
}

#capability.core-tech-section .capability-copy h2 {
  font-size: clamp(40px, 4.1vw, 62px);
  max-width: 760px;
}

#training.premium-delivery {
  min-height: auto;
  padding: 90px 0;
  background:
    radial-gradient(circle at 24% 20%, rgba(32,243,160,.08), transparent 24%),
    linear-gradient(180deg, #0c0c0c 0%, #050505 100%);
}

#training .delivery-stage {
  display: grid;
  grid-template-columns: minmax(320px, .88fr) minmax(520px, 1.12fr);
  gap: 70px;
  align-items: center;
}

#training .stage-head {
  text-align: left;
}

#training .stage-head p {
  max-width: 430px;
}

#training .delivery-track {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}

#training .delivery-track::before {
  content: "";
  position: absolute;
  left: 20px;
  top: 18px;
  bottom: 18px;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(32,243,160,.72), transparent);
  box-shadow: 0 0 18px rgba(32,243,160,.28);
}

#training .delivery-track article,
#training .delivery-track article:nth-child(1),
#training .delivery-track article:nth-child(4) {
  min-height: 118px;
  margin-top: 0;
  padding: 24px 28px 24px 72px;
  border-radius: 12px;
}

#training .delivery-track article:nth-child(2),
#training .delivery-track article:nth-child(3) {
  margin-top: 0;
}

#training .delivery-track article::before {
  content: "";
  position: absolute;
  left: 14px;
  top: 34px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #20f3a0;
  box-shadow: 0 0 24px rgba(32,243,160,.62);
}

#training .delivery-icon {
  display: none;
}

#resources.premium-resources {
  min-height: auto;
  padding: 94px 0;
  background:
    radial-gradient(circle at 84% 20%, rgba(56,125,255,.10), transparent 26%),
    radial-gradient(circle at 24% 72%, rgba(32,243,160,.10), transparent 28%),
    linear-gradient(180deg, #04111e 0%, #06120d 100%);
}

.resource-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 34px;
}

#resources .resource-panels {
  perspective: 900px;
}

#resources .resource-panels article {
  opacity: .58;
  transform: translateX(0) scale(.98);
}

#resources .resource-panels article.is-active {
  opacity: 1;
  border-color: rgba(32,243,160,.54);
  background:
    radial-gradient(circle at 88% 50%, rgba(32,243,160,.17), transparent 38%),
    rgba(255,255,255,.032);
  transform: translateX(0) scale(1);
}

#resources .resource-panels article.is-active h3 {
  color: #fff;
}

#about.premium-about {
  background:
    radial-gradient(circle at 52% 76%, rgba(32,243,160,.10), transparent 26%),
    linear-gradient(180deg, #0c0c0c 0%, #07180f 100%);
}

.site-footer {
  background:
    radial-gradient(circle at 16% 24%, rgba(32,243,160,.15), transparent 32%),
    linear-gradient(180deg, #07180f 0%, #020403 100%);
}

@media (max-width: 1100px) {
  #services .infra-showcase,
  #training .delivery-stage,
  #resources .resource-stage {
    grid-template-columns: 1fr;
  }

  #scenarios .solution-board {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: auto;
  }

  #scenarios .solution-card,
  #scenarios .solution-card:first-child,
  #scenarios .solution-card:nth-child(2),
  #scenarios .solution-card:nth-child(3),
  #scenarios .solution-card:nth-child(4),
  #scenarios .solution-card:nth-child(5),
  #scenarios .solution-card:nth-child(6) {
    grid-column: auto;
    grid-row: auto;
    min-height: 220px;
  }

  #scenarios .solution-card:nth-child(4) .solution-visual,
  #scenarios .solution-card:nth-child(5) .solution-visual,
  #scenarios .solution-card:nth-child(6) .solution-visual {
    display: block;
  }

  #scenarios .solution-card:nth-child(4) p,
  #scenarios .solution-card:nth-child(5) p,
  #scenarios .solution-card:nth-child(6) p {
    display: block;
  }
}

@media (max-width: 700px) {
  #services .infra-metrics {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  #services .infra-metrics span {
    border-right: 0;
  }

  #scenarios .solution-board {
    width: min(100% - 36px, 1180px);
    grid-template-columns: 1fr;
  }
}

/* Clean pass: keep hero purely cinematic and make footer compact again. */
.agent-slide .hero-stage {
  grid-template-columns: minmax(0, 720px);
}

.agent-slide .hero-content::before,
.hero-intelligence-core,
.hero-metrics {
  display: none !important;
}

.dji-footer {
  padding: 56px 0 28px;
}

.dji-footer .footer-download {
  display: none;
}

.dji-footer .footer-mega {
  width: min(1180px, calc(100% - 72px));
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 42px;
  padding: 0 0 44px;
  border-bottom: 1px solid rgba(255,255,255,.10);
}

.dji-footer .footer-column h3 {
  margin: 0 0 14px;
  color: rgba(255,255,255,.86);
  font-size: 13px;
  line-height: 1.4;
  font-weight: 650;
  letter-spacing: 0;
}

.dji-footer .footer-column h3:not(:first-child) {
  margin-top: 26px;
}

.dji-footer .footer-column a,
.dji-footer .footer-column span {
  display: block;
  margin: 0 0 10px;
  color: rgba(212,245,233,.54);
  font-size: 12px;
  line-height: 1.65;
  text-decoration: none;
}

.dji-footer .footer-column a:hover {
  color: #20f3a0;
}

.dji-footer .footer-mailbox {
  margin-top: 16px;
  height: 38px;
  display: grid;
  grid-template-columns: 1fr 42px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 4px;
  overflow: hidden;
  background: rgba(255,255,255,.03);
}

.dji-footer .footer-mailbox span {
  margin: 0;
  padding: 0 12px;
  display: flex;
  align-items: center;
  color: rgba(255,255,255,.50);
}

.dji-footer .footer-mailbox button {
  border: 0;
  color: #fff;
  background: rgba(255,255,255,.12);
  font-size: 16px;
}

.dji-footer .footer-brandbar {
  width: min(1180px, calc(100% - 72px));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  padding: 26px 0 18px;
}

.dji-footer .footer-brandbar img {
  width: 148px;
  height: auto;
  filter: brightness(0) invert(1);
}

.dji-footer .footer-brandbar nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
}

.dji-footer .footer-brandbar a {
  color: rgba(255,255,255,.68);
  font-size: 13px;
  text-decoration: none;
}

.dji-footer .footer-brandbar nav a {
  padding: 0 14px;
  border-right: 1px solid rgba(255,255,255,.16);
}

.dji-footer .footer-brandbar nav a:first-child {
  padding-left: 0;
}

.dji-footer .footer-brandbar nav a:last-child {
  padding-right: 0;
  border-right: 0;
}

.dji-footer .footer-brandbar a:hover {
  color: #20f3a0;
}

.footer-social {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 10px;
}

.footer-social a {
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,.82);
  background: rgba(255,255,255,.05);
  font-size: 10px;
  font-weight: 650;
  line-height: 1;
}

.footer-social a:hover {
  color: #20f3a0;
  border-color: rgba(32,243,160,.42);
  background: rgba(32,243,160,.10);
}

.dji-footer .footer-legal {
  width: min(1180px, calc(100% - 72px));
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px 24px;
  padding: 18px 0 0;
  border-top: 1px solid rgba(255,255,255,.08);
}

.footer-records {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 16px;
}

.footer-records a,
.footer-records span {
  color: rgba(255,255,255,.46);
  font-size: 12px;
  line-height: 1.7;
  text-decoration: none;
}

.footer-records a:hover {
  color: #20f3a0;
}

.footer-records .footer-copyright,
.footer-records .footer-tagline {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}

.footer-records .footer-copyright::before,
.footer-records .footer-tagline::before {
  content: "";
  width: 1px;
  height: 12px;
  margin-right: 16px;
  background: rgba(255,255,255,.16);
}

.footer-locale {
  display: flex;
  align-items: center;
  gap: 10px;
  color: rgba(255,255,255,.86);
  font-size: 13px;
  font-weight: 650;
  letter-spacing: .04em;
}

.footer-flag {
  font-size: 18px;
  line-height: 1;
}

@media (max-width: 900px) {
  .dji-footer .footer-mega {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 34px 28px;
  }

  .dji-footer .footer-brandbar,
  .dji-footer .footer-legal {
    justify-content: flex-start;
    grid-template-columns: 1fr;
    align-items: flex-start;
  }

  .footer-social {
    margin-left: 0;
  }
}

@media (max-width: 560px) {
  .dji-footer .footer-mega {
    grid-template-columns: 1fr;
  }
}

/* Final layout audit: unify non-hero typography and keep each major screen readable. */
:root {
  --sws-section-title: clamp(34px, 3.05vw, 46px);
  --sws-section-title-tight: clamp(32px, 2.7vw, 42px);
  --sws-card-title: clamp(22px, 1.75vw, 30px);
  --sws-card-title-small: clamp(20px, 1.45vw, 26px);
  --sws-body: clamp(14px, .95vw, 16px);
  --sws-small: 12px;
}

.ai-home .ai-section:not(.hero-section) h2,
#services .infra-hero h2,
#scenarios .solution-hero h2,
#capability .capability-copy h2,
#training .stage-head h2,
#resources .resource-main h2,
#about .about-copy h2 {
  font-size: var(--sws-section-title) !important;
  line-height: 1.16 !important;
  letter-spacing: -.02em !important;
}

#services .infra-hero p,
#scenarios .solution-subtitle,
#capability .capability-copy p,
#training .stage-head p,
#resources .resource-main p,
#about .about-copy p {
  font-size: var(--sws-body) !important;
  line-height: 1.72 !important;
}

#services.ai-origin,
#scenarios.ai-solutions,
#capability.core-tech-section,
#training.premium-delivery,
#resources.premium-resources {
  min-height: 100svh !important;
  box-sizing: border-box;
}

/* Screen 2: compact infrastructure board so it fits one viewport. */
#services.ai-origin {
  display: flex;
  align-items: center;
  padding: 72px 0 52px !important;
}

#services .infrastructure-section {
  width: min(1180px, calc(100% - 72px));
}

#services .infra-hero {
  margin: 0 auto 26px !important;
}

#services .infra-hero h2 {
  font-size: clamp(32px, 3vw, 44px) !important;
}

#services .infra-hero p {
  max-width: 640px;
  margin-top: 12px !important;
}

#services .infra-switch {
  margin-top: 18px !important;
  gap: 10px;
}

#services .infra-switch button {
  min-height: 32px;
  padding: 0 16px;
  font-size: 12px;
}

#services .infra-metrics {
  display: none !important;
}

#services .infra-showcase {
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr) !important;
  gap: 14px 20px !important;
  align-items: stretch !important;
}

#services .infra-module {
  overflow: hidden;
  border-radius: 12px !important;
}

#services .infra-module:first-child {
  min-height: 420px !important;
  padding: 28px !important;
}

#services .infra-module:first-child .infra-copy {
  max-width: 430px;
}

#services .infra-module:first-child .infra-copy h3,
#services .infra-module:not(:first-child) .infra-copy h3 {
  font-size: var(--sws-card-title-small) !important;
  line-height: 1.18 !important;
}

#services .infra-module:first-child .infra-copy p,
#services .infra-module:not(:first-child) .infra-copy p,
#services .infra-copy li {
  font-size: 13px !important;
  line-height: 1.6 !important;
}

#services .infra-module:first-child .infra-visual {
  right: 20px !important;
  bottom: 18px !important;
  width: 210px !important;
  height: 210px !important;
}

#services .infra-module:first-child .infra-visual img {
  width: 210px !important;
  height: 210px !important;
  object-fit: contain;
}

#services .infra-module:not(:first-child) {
  min-height: 128px !important;
  padding: 22px 24px !important;
  grid-template-columns: minmax(0, 1fr) 108px !important;
  align-items: center !important;
}

#services .infra-module:not(:first-child) .infra-copy {
  min-width: 0;
}

#services .infra-module:not(:first-child) .infra-visual,
#services .infra-module:not(:first-child) .infra-visual img {
  width: 96px !important;
  height: 96px !important;
  object-fit: contain;
}

#services .infra-copy span {
  font-size: 11px !important;
}

/* Screen 3: solution bento, no oversized headline and no cropped copy. */
#scenarios.ai-solutions {
  display: block !important;
  padding: 96px 0 58px !important;
}

#scenarios .solution-hero {
  width: min(1180px, calc(100% - 72px));
  margin: 0 auto 30px !important;
  text-align: center;
}

#scenarios .solution-badge {
  margin: 0 0 16px !important;
}

#scenarios .solution-hero h2 {
  max-width: 760px !important;
  margin: 0 auto !important;
  text-align: center !important;
  font-size: clamp(32px, 3vw, 44px) !important;
}

#scenarios .solution-subtitle {
  max-width: 720px;
  margin: 12px auto 0 !important;
  text-align: center !important;
}

#scenarios .solution-stats {
  justify-content: center !important;
  margin: 18px 0 0 !important;
}

#scenarios .solution-divider {
  display: none !important;
}

#scenarios .solution-board {
  width: min(1180px, calc(100% - 72px)) !important;
  grid-template-columns: 1.14fr .86fr .86fr !important;
  grid-template-rows: 178px 178px 136px !important;
  gap: 14px !important;
}

#scenarios .solution-card {
  min-height: 0 !important;
  overflow: hidden !important;
  border-radius: 12px !important;
}

#scenarios .solution-card:first-child {
  grid-row: 1 / span 2 !important;
  padding: 0 !important;
}

#scenarios .solution-card:not(:first-child) {
  display: grid !important;
  grid-template-rows: 88px minmax(0, 1fr) !important;
}

#scenarios .solution-card:nth-child(4),
#scenarios .solution-card:nth-child(5),
#scenarios .solution-card:nth-child(6) {
  display: flex !important;
  align-items: center;
}

#scenarios .solution-card:nth-child(4) .solution-visual,
#scenarios .solution-card:nth-child(5) .solution-visual,
#scenarios .solution-card:nth-child(6) .solution-visual {
  display: none !important;
}

#scenarios .solution-content,
#scenarios .solution-card:first-child .solution-content,
#scenarios .solution-card:nth-child(4) .solution-content,
#scenarios .solution-card:nth-child(5) .solution-content,
#scenarios .solution-card:nth-child(6) .solution-content {
  padding: 22px 24px !important;
}

#scenarios .solution-card h3,
#scenarios .solution-card:first-child h3,
#scenarios .solution-card:nth-child(4) h3,
#scenarios .solution-card:nth-child(5) h3,
#scenarios .solution-card:nth-child(6) h3 {
  font-size: var(--sws-card-title-small) !important;
  line-height: 1.2 !important;
  margin: 8px 0 10px !important;
}

#scenarios .solution-card p,
#scenarios .solution-card:first-child .solution-content p {
  display: block !important;
  max-width: 100% !important;
  font-size: 13px !important;
  line-height: 1.65 !important;
  color: rgba(139,191,170,.86) !important;
}

#scenarios .solution-card:nth-child(4) p,
#scenarios .solution-card:nth-child(5) p,
#scenarios .solution-card:nth-child(6) p {
  display: none !important;
}

#scenarios .solution-visual {
  min-height: 0 !important;
}

#scenarios .solution-icon,
#scenarios .solution-card:not(:first-child) .solution-icon {
  width: 56px !important;
  height: 56px !important;
}

#scenarios .solution-card:first-child .solution-icon {
  width: 82px !important;
  height: 82px !important;
}

/* Screen 4: core technology, reduce title and prevent card text clipping. */
#capability.core-tech-section {
  display: flex;
  align-items: center;
  padding: 76px 0 64px !important;
}

#capability .capability-stage {
  width: min(1180px, calc(100% - 72px));
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr) !important;
  gap: 54px !important;
  align-items: center !important;
}

#capability.core-tech-section .capability-copy h2 {
  font-size: clamp(32px, 3vw, 44px) !important;
  line-height: 1.22 !important;
  max-width: 620px !important;
}

#capability .capability-copy p {
  max-width: 560px !important;
}

#capability .tech-console.core-card-grid {
  gap: 12px !important;
  padding: 14px !important;
}

#capability .core-tech-card {
  min-height: 0 !important;
  padding: 22px !important;
  overflow: hidden !important;
}

#capability .tech-icon {
  width: 34px !important;
  height: 34px !important;
  margin-bottom: 14px !important;
}

#capability .core-tech-card h3 {
  font-size: 21px !important;
  line-height: 1.22 !important;
}

#capability .core-tech-card p {
  font-size: 13px !important;
  line-height: 1.45 !important;
}

#capability .core-tech-card em {
  display: block;
  font-size: 12px !important;
  line-height: 1.55 !important;
  max-height: none !important;
}

/* Training/resources: match the same title rhythm and keep content inside cards. */
#training .stage-head h2,
#resources .resource-main h2,
#about .about-copy h2 {
  font-size: clamp(32px, 3vw, 44px) !important;
}

#training .delivery-track article h3,
#resources .resource-panels article h3 {
  font-size: var(--sws-card-title-small) !important;
  line-height: 1.34 !important;
}

#training .delivery-track article p,
#resources .resource-panels article p {
  font-size: 13px !important;
  line-height: 1.65 !important;
}

#training .delivery-track article,
#resources .resource-panels article {
  overflow: hidden !important;
}

@media (max-width: 1180px) {
  #services .infra-showcase,
  #capability .capability-stage {
    grid-template-columns: 1fr !important;
  }

  #services.ai-origin,
  #scenarios.ai-solutions,
  #capability.core-tech-section {
    display: block;
    min-height: auto !important;
  }

  #scenarios .solution-board {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-template-rows: auto !important;
  }

  #scenarios .solution-card,
  #scenarios .solution-card:first-child,
  #scenarios .solution-card:nth-child(2),
  #scenarios .solution-card:nth-child(3),
  #scenarios .solution-card:nth-child(4),
  #scenarios .solution-card:nth-child(5),
  #scenarios .solution-card:nth-child(6) {
    grid-column: auto !important;
    grid-row: auto !important;
    min-height: 210px !important;
  }
}

@media (max-width: 760px) {
  #services .infrastructure-section,
  #scenarios .solution-hero,
  #scenarios .solution-board,
  #capability .capability-stage {
    width: min(100% - 36px, 1180px) !important;
  }

  #scenarios .solution-board {
    grid-template-columns: 1fr !important;
  }

  #services .infra-module:not(:first-child) {
    grid-template-columns: 1fr !important;
  }

  #services .infra-module:not(:first-child) .infra-visual {
    display: none;
  }
}

/* Layout audit pass 2: tighten section rhythm and repair screens 2-4. */
:root {
  --sws-section-title: clamp(32px, 2.65vw, 42px);
  --sws-section-title-tight: clamp(30px, 2.45vw, 40px);
  --sws-card-title: clamp(22px, 1.55vw, 28px);
  --sws-card-title-small: clamp(20px, 1.35vw, 24px);
  --sws-body: clamp(13px, .86vw, 15px);
}

.ai-home .ai-section:not(.hero-section) h2,
#services .infra-hero h2,
#scenarios .solution-hero h2,
#capability .capability-copy h2,
#training .stage-head h2,
#resources .resource-main h2,
#about .about-copy h2 {
  font-size: var(--sws-section-title) !important;
  line-height: 1.14 !important;
}

#services.ai-origin,
#scenarios.ai-solutions,
#capability.core-tech-section {
  overflow: hidden !important;
}

/* Screen 2: keep the infrastructure story inside one desktop viewport. */
#services.ai-origin {
  min-height: 100svh !important;
  padding: 62px 0 46px !important;
}

#services .infrastructure-section {
  width: min(1120px, calc(100% - 72px)) !important;
}

#services .infra-hero {
  margin-bottom: 20px !important;
}

#services .infra-pill {
  min-height: 30px !important;
  padding: 0 18px !important;
  font-size: 12px !important;
}

#services .infra-hero h2 {
  font-size: var(--sws-section-title) !important;
  line-height: 1.12 !important;
  margin-top: 12px !important;
}

#services .infra-hero p {
  max-width: 600px !important;
  margin-top: 10px !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
}

#services .infra-switch {
  margin-top: 14px !important;
}

#services .infra-switch button {
  min-height: 30px !important;
  padding: 0 14px !important;
}

#services .infra-showcase {
  grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr) !important;
  gap: 12px 18px !important;
}

#services .infra-module:first-child {
  min-height: 388px !important;
  padding: 24px !important;
}

#services .infra-module:first-child .infra-copy {
  max-width: 390px !important;
}

#services .infra-module:first-child .infra-copy h3,
#services .infra-module:not(:first-child) .infra-copy h3 {
  font-size: var(--sws-card-title-small) !important;
}

#services .infra-module:first-child .infra-copy p,
#services .infra-module:not(:first-child) .infra-copy p,
#services .infra-copy li {
  font-size: 12.5px !important;
  line-height: 1.55 !important;
}

#services .infra-copy ul {
  margin-top: 20px !important;
  gap: 8px !important;
}

#services .infra-module:first-child .infra-visual {
  width: 195px !important;
  height: 195px !important;
  right: 16px !important;
  bottom: 14px !important;
}

#services .infra-module:first-child .infra-visual img {
  width: 195px !important;
  height: 195px !important;
}

#services .infra-module:not(:first-child) {
  min-height: 118px !important;
  padding: 18px 22px !important;
  grid-template-columns: minmax(0, 1fr) 94px !important;
}

#services .infra-module:not(:first-child) .infra-visual,
#services .infra-module:not(:first-child) .infra-visual img {
  width: 84px !important;
  height: 84px !important;
}

#services .infra-module:not(:first-child) .infra-copy p {
  display: -webkit-box !important;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden !important;
}

/* Screen 3: restore a premium top-headline + bento composition. */
#scenarios.ai-solutions {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  min-height: 100svh !important;
  padding: 64px 0 58px !important;
}

#scenarios .solution-hero {
  width: min(1120px, calc(100% - 72px)) !important;
  max-width: 1120px !important;
  margin: 0 auto 22px !important;
  text-align: center !important;
}

#scenarios .solution-badge {
  margin: 0 auto 14px !important;
  min-height: 30px !important;
  font-size: 12px !important;
}

#scenarios .solution-hero h2 {
  max-width: 780px !important;
  margin: 0 auto !important;
  font-size: var(--sws-section-title) !important;
  line-height: 1.16 !important;
  text-align: center !important;
}

#scenarios .solution-subtitle {
  max-width: 620px !important;
  margin: 10px auto 0 !important;
  font-size: 14px !important;
  line-height: 1.58 !important;
  text-align: center !important;
}

#scenarios .solution-stats {
  margin: 14px auto 0 !important;
  justify-content: center !important;
  gap: 10px !important;
}

#scenarios .solution-stats span {
  min-height: 30px !important;
  padding: 0 14px !important;
  font-size: 12px !important;
}

#scenarios .solution-board {
  width: min(1120px, calc(100% - 72px)) !important;
  margin: 0 auto !important;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr) minmax(0, .92fr) !important;
  grid-template-rows: 174px 174px 138px !important;
  gap: 12px !important;
}

#scenarios .solution-card {
  border-radius: 12px !important;
}

#scenarios .solution-card:first-child {
  grid-column: 1 / span 1 !important;
  grid-row: 1 / span 2 !important;
}

#scenarios .solution-card:nth-child(2) {
  grid-column: 2 / span 1 !important;
  grid-row: 1 / span 1 !important;
}

#scenarios .solution-card:nth-child(3) {
  grid-column: 3 / span 1 !important;
  grid-row: 1 / span 1 !important;
}

#scenarios .solution-card:nth-child(4) {
  grid-column: 1 / span 1 !important;
  grid-row: 3 / span 1 !important;
}

#scenarios .solution-card:nth-child(5) {
  grid-column: 2 / span 1 !important;
  grid-row: 2 / span 2 !important;
}

#scenarios .solution-card:nth-child(6) {
  grid-column: 3 / span 1 !important;
  grid-row: 2 / span 2 !important;
}

#scenarios .solution-card:not(:first-child) {
  display: grid !important;
  grid-template-rows: 70px minmax(0, 1fr) !important;
}

#scenarios .solution-card:nth-child(4) {
  display: flex !important;
  align-items: center !important;
}

#scenarios .solution-card:nth-child(5),
#scenarios .solution-card:nth-child(6) {
  display: grid !important;
  grid-template-rows: 80px minmax(0, 1fr) !important;
}

#scenarios .solution-card:nth-child(4) .solution-visual {
  display: flex !important;
}

#scenarios .solution-card:nth-child(5) .solution-visual,
#scenarios .solution-card:nth-child(6) .solution-visual {
  display: flex !important;
}

#scenarios .solution-card:nth-child(4) {
  display: grid !important;
  grid-template-columns: 72px minmax(0, 1fr) !important;
  grid-template-rows: 1fr !important;
  align-items: center !important;
}

#scenarios .solution-card:nth-child(4) .solution-visual {
  height: 100% !important;
  min-height: 0 !important;
  align-items: center !important;
  justify-content: center !important;
}

#scenarios .solution-card:nth-child(4) .solution-content {
  padding-left: 4px !important;
}

#scenarios .solution-content,
#scenarios .solution-card:first-child .solution-content,
#scenarios .solution-card:nth-child(4) .solution-content,
#scenarios .solution-card:nth-child(5) .solution-content,
#scenarios .solution-card:nth-child(6) .solution-content {
  padding: 18px 20px !important;
}

#scenarios .solution-card h3,
#scenarios .solution-card:first-child h3,
#scenarios .solution-card:nth-child(4) h3,
#scenarios .solution-card:nth-child(5) h3,
#scenarios .solution-card:nth-child(6) h3 {
  font-size: clamp(19px, 1.25vw, 23px) !important;
  line-height: 1.18 !important;
  margin: 6px 0 8px !important;
}

#scenarios .solution-card p,
#scenarios .solution-card:first-child .solution-content p {
  font-size: 12.5px !important;
  line-height: 1.55 !important;
}

#scenarios .solution-card:nth-child(4) p {
  display: -webkit-box !important;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden !important;
}

#scenarios .solution-card:nth-child(5) p,
#scenarios .solution-card:nth-child(6) p {
  display: -webkit-box !important;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden !important;
}

#scenarios .solution-card:not(:first-child) .solution-icon {
  width: 48px !important;
  height: 48px !important;
}

#scenarios .solution-card:nth-child(4) .solution-icon,
#scenarios .solution-card:nth-child(5) .solution-icon,
#scenarios .solution-card:nth-child(6) .solution-icon {
  width: 46px !important;
  height: 46px !important;
}

#scenarios .solution-card:first-child .solution-icon {
  width: 76px !important;
  height: 76px !important;
}

/* Screen 4: same scale, less empty area, no clipped card text. */
#capability.core-tech-section {
  min-height: 100svh !important;
  padding: 70px 0 58px !important;
}

#capability .capability-stage {
  width: min(1120px, calc(100% - 72px)) !important;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr) !important;
  gap: 42px !important;
}

#capability.core-tech-section .capability-copy h2 {
  font-size: var(--sws-section-title-tight) !important;
  line-height: 1.18 !important;
  max-width: 560px !important;
}

#capability .capability-copy p {
  max-width: 520px !important;
  font-size: 14px !important;
  line-height: 1.65 !important;
}

#capability .tech-console.core-card-grid {
  gap: 12px !important;
  padding: 12px !important;
}

#capability .core-tech-card {
  padding: 20px !important;
}

#capability .tech-icon {
  width: 42px !important;
  height: 42px !important;
  margin-bottom: 16px !important;
}

#capability .core-tech-card h3 {
  font-size: clamp(20px, 1.35vw, 24px) !important;
}

#capability .core-tech-card p {
  font-size: 12.5px !important;
  line-height: 1.45 !important;
}

#capability .core-tech-card em {
  color: rgba(139,191,170,.72) !important;
  font-size: 11.5px !important;
  line-height: 1.48 !important;
}

@media (max-width: 1180px) {
  #services.ai-origin,
  #scenarios.ai-solutions,
  #capability.core-tech-section {
    min-height: auto !important;
    padding-top: 72px !important;
    padding-bottom: 56px !important;
  }

  #scenarios .solution-board {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-template-rows: auto !important;
  }

  #scenarios .solution-card,
  #scenarios .solution-card:first-child,
  #scenarios .solution-card:nth-child(2),
  #scenarios .solution-card:nth-child(3),
  #scenarios .solution-card:nth-child(4),
  #scenarios .solution-card:nth-child(5),
  #scenarios .solution-card:nth-child(6) {
    grid-column: auto !important;
    grid-row: auto !important;
    min-height: 190px !important;
  }
}

/* Final fix: keep scenario cards 04/05/06 icons visible after compact layout overrides. */
#scenarios .solution-card:nth-child(4),
#scenarios .solution-card:nth-child(5),
#scenarios .solution-card:nth-child(6) {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 72px !important;
  grid-template-rows: 1fr !important;
  align-items: center !important;
  gap: 12px !important;
}

#scenarios .solution-card:nth-child(4) .solution-content,
#scenarios .solution-card:nth-child(5) .solution-content,
#scenarios .solution-card:nth-child(6) .solution-content {
  grid-column: 1 !important;
  grid-row: 1 !important;
  min-width: 0 !important;
  padding: 18px 0 18px 20px !important;
}

#scenarios .solution-card:nth-child(4) .solution-visual,
#scenarios .solution-card:nth-child(5) .solution-visual,
#scenarios .solution-card:nth-child(6) .solution-visual {
  display: flex !important;
  grid-column: 2 !important;
  grid-row: 1 !important;
  width: 72px !important;
  height: 100% !important;
  min-height: 0 !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  overflow: visible !important;
}

#scenarios .solution-card:nth-child(4) .solution-icon,
#scenarios .solution-card:nth-child(5) .solution-icon,
#scenarios .solution-card:nth-child(6) .solution-icon {
  display: block !important;
  width: 52px !important;
  height: 52px !important;
  opacity: .96 !important;
  color: #20f0aa !important;
  stroke: #20f0aa !important;
  filter: drop-shadow(0 0 16px rgba(32, 240, 170, .42)) !important;
}

#scenarios .solution-card:nth-child(4) .solution-icon path,
#scenarios .solution-card:nth-child(4) .solution-icon circle,
#scenarios .solution-card:nth-child(4) .solution-icon rect,
#scenarios .solution-card:nth-child(4) .solution-icon ellipse,
#scenarios .solution-card:nth-child(5) .solution-icon path,
#scenarios .solution-card:nth-child(5) .solution-icon circle,
#scenarios .solution-card:nth-child(5) .solution-icon rect,
#scenarios .solution-card:nth-child(5) .solution-icon ellipse,
#scenarios .solution-card:nth-child(6) .solution-icon path,
#scenarios .solution-card:nth-child(6) .solution-icon circle,
#scenarios .solution-card:nth-child(6) .solution-icon rect,
#scenarios .solution-card:nth-child(6) .solution-icon ellipse {
  stroke: #20f0aa !important;
  stroke-width: 3 !important;
}

#scenarios .solution-card:nth-child(4) p,
#scenarios .solution-card:nth-child(5) p,
#scenarios .solution-card:nth-child(6) p {
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

/* Make the first infrastructure orb read as a rotating 3D energy core. */
#services .infra-module:first-child .infra-visual-base {
  perspective: 900px !important;
  overflow: visible !important;
  isolation: isolate !important;
}

#services .infra-module:first-child .infra-visual-base::before {
  content: "" !important;
  position: absolute !important;
  inset: 14% !important;
  border-radius: 50% !important;
  border: 1px solid rgba(220, 255, 242, .36) !important;
  border-left-color: rgba(32, 243, 160, .92) !important;
  border-bottom-color: rgba(32, 243, 160, .12) !important;
  box-shadow:
    0 0 22px rgba(32, 243, 160, .26),
    inset 0 0 18px rgba(32, 243, 160, .18) !important;
  transform: rotateX(66deg) rotateZ(0deg) !important;
  animation: siweishuOrbEquator 3.8s linear infinite !important;
  pointer-events: none !important;
  z-index: 3 !important;
}

#services .infra-module:first-child .infra-visual-base::after {
  content: "" !important;
  position: absolute !important;
  inset: 20% 10% !important;
  border-radius: 50% !important;
  background:
    linear-gradient(90deg, transparent 0%, rgba(255,255,255,.42) 42%, rgba(32,243,160,.45) 50%, transparent 62%) !important;
  filter: blur(10px) !important;
  mix-blend-mode: screen !important;
  opacity: .55 !important;
  transform: translateX(-26%) rotate(-18deg) !important;
  animation: siweishuOrbLightSweep 4.6s ease-in-out infinite !important;
  pointer-events: none !important;
  z-index: 4 !important;
}

#services .infra-module:first-child .infra-visual-base img {
  animation: siweishuOrbSpinVisible 6.8s linear infinite !important;
  transform-origin: 50% 50% !important;
  will-change: transform, filter !important;
  filter: brightness(1.12) contrast(1.08) drop-shadow(0 0 30px rgba(32,243,160,.42)) !important;
}

#services .infra-module:first-child:hover .infra-visual-base img,
#services .infra-module:first-child:focus-visible .infra-visual-base img {
  animation-duration: 3.4s !important;
}

@keyframes siweishuOrbSpinVisible {
  0% {
    transform: perspective(900px) rotateY(-18deg) rotateZ(0deg) scale(1);
  }
  50% {
    transform: perspective(900px) rotateY(18deg) rotateZ(180deg) scale(1.025);
  }
  100% {
    transform: perspective(900px) rotateY(-18deg) rotateZ(360deg) scale(1);
  }
}

@keyframes siweishuOrbEquator {
  from {
    transform: rotateX(66deg) rotateZ(0deg);
  }
  to {
    transform: rotateX(66deg) rotateZ(360deg);
  }
}

@keyframes siweishuOrbLightSweep {
  0%, 100% {
    opacity: .22;
    transform: translateX(-34%) rotate(-18deg);
  }
  50% {
    opacity: .72;
    transform: translateX(34%) rotate(-18deg);
  }
}

/* Final fix: restore incubation/delivery icons after timeline layout overrides. */
#training .delivery-track article {
  position: relative !important;
  padding-left: 88px !important;
}

#training .delivery-icon {
  display: block !important;
  position: absolute !important;
  left: 38px !important;
  top: 26px !important;
  width: 32px !important;
  height: 32px !important;
  fill: none !important;
  stroke: #20f3a0 !important;
  stroke-width: 1.9 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  opacity: .96 !important;
  filter: drop-shadow(0 0 16px rgba(32, 243, 160, .42)) !important;
  z-index: 2 !important;
}

#training .delivery-track article::before {
  left: 13px !important;
  top: 36px !important;
}

#training .delivery-track article span {
  margin-left: 0 !important;
}

/* Orb refinement: keep the base still, rotate only the globe surface. */
#services .infra-module:first-child .infra-visual-base {
  position: absolute !important;
}

#services .infra-module:first-child .infra-visual-base img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  transform-origin: 50% 50% !important;
}

#services .infra-module:first-child .infra-visual-base .infra-orb-static {
  animation: none !important;
  transform: none !important;
  opacity: 1 !important;
  filter: brightness(1.08) contrast(1.06) drop-shadow(0 0 26px rgba(32, 243, 160, .34)) !important;
  z-index: 1 !important;
}

#services .infra-module:first-child .infra-visual-base .infra-orb-spin {
  clip-path: ellipse(41% 39% at 54% 42%) !important;
  animation: siweishuOrbSurfaceTurn 8.2s linear infinite !important;
  opacity: .72 !important;
  filter: brightness(1.22) contrast(1.12) drop-shadow(0 0 24px rgba(32, 243, 160, .42)) !important;
  mix-blend-mode: screen !important;
  transform-origin: 54% 42% !important;
  z-index: 2 !important;
}

#services .infra-module:first-child:hover .infra-visual-base .infra-orb-spin,
#services .infra-module:first-child:focus-visible .infra-visual-base .infra-orb-spin {
  animation-duration: 4.8s !important;
}

#services .infra-module:first-child:hover .infra-visual-base .infra-orb-static,
#services .infra-module:first-child:focus-visible .infra-visual-base .infra-orb-static {
  animation: none !important;
  transform: none !important;
}

@keyframes siweishuOrbSurfaceTurn {
  0% {
    transform: rotate(0deg) scale(1.01);
  }
  50% {
    transform: rotate(180deg) scale(1.035);
  }
  100% {
    transform: rotate(360deg) scale(1.01);
  }
}

/* Final orb polish: remove the visible slice artifact and use a clean sphere-surface shimmer. */
#services .infra-module:first-child .infra-visual-base {
  overflow: visible !important;
  isolation: isolate !important;
}

#services .infra-module:first-child .infra-visual-base .infra-orb-static {
  display: block !important;
  animation: none !important;
  transform: none !important;
  opacity: 1 !important;
  z-index: 1 !important;
}

#services .infra-module:first-child .infra-visual-base .infra-orb-spin {
  display: none !important;
}

#services .infra-module:first-child .infra-visual-base::before,
#services .infra-module:first-child .infra-visual-base::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  pointer-events: none !important;
  clip-path: ellipse(37% 35% at 55% 47%) !important;
  transform: none !important;
}

#services .infra-module:first-child .infra-visual-base::before {
  z-index: 2 !important;
  opacity: .42 !important;
  mix-blend-mode: screen !important;
  filter: blur(.15px) !important;
  background:
    radial-gradient(circle at 72% 22%, rgba(255,255,255,.66) 0 3px, transparent 9px),
    repeating-linear-gradient(102deg, transparent 0 18px, rgba(220,255,242,.18) 19px 21px, transparent 22px 42px),
    repeating-linear-gradient(18deg, transparent 0 24px, rgba(32,243,160,.16) 25px 27px, transparent 28px 54px) !important;
  background-size: 100% 100%, 150px 150px, 180px 180px !important;
  background-position: 0 0, 0 0, 0 0 !important;
  animation: siweishuOrbCleanSurface 8.8s linear infinite !important;
}

#services .infra-module:first-child .infra-visual-base::after {
  z-index: 3 !important;
  opacity: .34 !important;
  mix-blend-mode: screen !important;
  filter: blur(5px) !important;
  background:
    radial-gradient(circle at 68% 24%, rgba(255,255,255,.72) 0 4px, rgba(255,255,255,.18) 9px, transparent 26px),
    linear-gradient(100deg, transparent 16%, rgba(255,255,255,.16) 42%, rgba(32,243,160,.24) 50%, transparent 70%) !important;
  background-size: 100% 100%, 170% 100% !important;
  background-position: 0 0, -70% 0 !important;
  animation: siweishuOrbCleanHighlight 5.8s ease-in-out infinite !important;
}

@keyframes siweishuOrbCleanSurface {
  from {
    background-position: 0 0, 0 0, 0 0;
  }
  to {
    background-position: 0 0, 150px 0, -180px 0;
  }
}

@keyframes siweishuOrbCleanHighlight {
  0%, 100% {
    opacity: .20;
    background-position: 0 0, -78% 0;
  }
  48% {
    opacity: .46;
    background-position: 0 0, 26% 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  #services .infra-module:first-child .infra-visual-base::before,
  #services .infra-module:first-child .infra-visual-base::after {
    animation: none !important;
  }
}

/* Navigation submenu system */
.site-nav .nav-item {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 72px;
}

.site-nav .nav-link {
  min-height: 72px;
}

.site-nav .nav-link.is-active {
  color: #20f3a0;
}

.site-nav .nav-link.is-active::after {
  width: 18px;
  background: #20f3a0;
}

.nav-panel {
  position: fixed;
  top: 72px;
  left: 50%;
  z-index: 19;
  width: min(980px, calc(100vw - 72px));
  display: grid;
  grid-template-columns: 270px 1fr;
  gap: 22px;
  padding: 22px;
  color: rgba(255, 255, 255, .86);
  background:
    radial-gradient(circle at 18% 0%, rgba(32, 243, 160, .14), transparent 34%),
    radial-gradient(circle at 82% 0%, rgba(93, 202, 165, .10), transparent 32%),
    rgba(2, 8, 7, .94);
  border: 1px solid rgba(255, 255, 255, .10);
  border-top: 0;
  border-radius: 0 0 14px 14px;
  box-shadow: 0 28px 80px rgba(0, 0, 0, .46);
  backdrop-filter: blur(24px) saturate(135%);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate(-50%, -10px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s ease;
}

.nav-item:hover .nav-panel,
.nav-item:focus-within .nav-panel,
.nav-item.is-open .nav-panel {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate(-50%, 0);
}

.nav-panel-intro {
  min-height: 176px;
  padding: 20px;
  border: 1px solid rgba(32, 243, 160, .16);
  border-radius: 12px;
  background:
    linear-gradient(135deg, rgba(32, 243, 160, .10), transparent 58%),
    rgba(255, 255, 255, .025);
}

.nav-panel-intro span,
.nav-panel-intro strong,
.nav-panel-intro em,
.nav-panel-grid strong,
.nav-panel-grid em {
  display: block;
}

.nav-panel-intro span {
  margin-bottom: 14px;
  color: #5dcaa5;
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.nav-panel-intro strong {
  margin-bottom: 10px;
  color: #fff;
  font-size: 17px;
  line-height: 1.45;
  font-weight: 500;
}

.nav-panel-intro em {
  color: #8bbfaa;
  font-size: 12px;
  line-height: 1.8;
  font-style: normal;
}

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

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

.nav-panel a {
  min-height: 0;
  padding: 16px;
  border: 1px solid rgba(255, 255, 255, .075);
  border-radius: 10px;
  background: rgba(255, 255, 255, .018);
  transition: border-color .2s ease, background .2s ease, transform .2s ease;
}

.nav-panel a::after {
  display: none;
}

.nav-panel a:hover {
  color: #fff;
  border-color: rgba(32, 243, 160, .42);
  background: rgba(32, 243, 160, .065);
  transform: translateY(-2px);
}

.nav-panel-grid strong {
  margin-bottom: 7px;
  color: #eefcf7;
  font-size: 14px;
  line-height: 1.35;
  font-weight: 500;
}

.nav-panel-grid em {
  color: rgba(139, 191, 170, .82);
  font-size: 12px;
  line-height: 1.65;
  font-style: normal;
  white-space: normal;
}

@media (max-width: 980px) {
  .site-nav .nav-item {
    display: block;
    min-height: 0;
  }

  .site-nav .nav-link {
    min-height: auto;
  }

  .nav-panel {
    position: static;
    width: auto;
    display: block;
    max-height: 0;
    padding: 0 10px;
    overflow: hidden;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
    transition: max-height .24s ease, padding .24s ease;
  }

  .nav-item:hover .nav-panel,
  .nav-item:focus-within .nav-panel {
    max-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    transform: none;
  }

  .nav-item.is-open .nav-panel {
    max-height: 680px;
    padding-top: 4px;
    padding-bottom: 12px;
    transform: none;
  }

  .nav-panel-intro {
    min-height: auto;
    padding: 14px;
    margin-bottom: 8px;
    border-radius: 10px;
  }

  .nav-panel-grid,
  .nav-panel-grid--wide {
    grid-template-columns: 1fr;
  }

  .nav-panel a {
    padding: 13px 14px;
    border-radius: 9px;
  }

  .site-nav.is-open ~ .mobile-action-nav {
    display: none;
  }
}

/* 2026-05-29 rhythm pass: make each homepage screen feel designed, not templated. */
:root {
  --rhythm-black: #020605;
  --rhythm-green-black: #06140d;
  --rhythm-green-deep: #071a10;
  --rhythm-blue: #03101c;
  --rhythm-graphite: #0b0c0c;
  --rhythm-footer: #151716;
  --rhythm-green: #20f3a0;
  --rhythm-green-soft: #5dcaa5;
  --rhythm-copy: #8bbfaa;
  --rhythm-copy-dim: rgba(139, 191, 170, .7);
  --rhythm-line: rgba(32, 243, 160, .18);
  --rhythm-glass: rgba(255, 255, 255, .035);
  --rhythm-radius: 14px;
  --rhythm-title: clamp(36px, 3.5vw, 54px);
  --rhythm-title-lg: clamp(42px, 4.8vw, 72px);
  --rhythm-card-title: clamp(23px, 1.7vw, 30px);
}

html {
  scroll-behavior: smooth;
}

body {
  background: var(--rhythm-black) !important;
  color: #fff;
}

.site-header {
  height: 72px !important;
  background: rgba(1, 5, 4, .82) !important;
  border-color: rgba(255, 255, 255, .06) !important;
  backdrop-filter: blur(22px) saturate(130%) !important;
}

.site-nav .nav-link {
  font-size: 15px !important;
  font-weight: 400 !important;
  letter-spacing: .02em !important;
  color: rgba(255, 255, 255, .72) !important;
}

.site-nav .nav-link:hover,
.site-nav .nav-link.is-active {
  color: var(--rhythm-green) !important;
}

.ai-home {
  background: var(--rhythm-black) !important;
  isolation: isolate;
}

.ai-home .ai-section {
  position: relative !important;
  overflow: hidden !important;
  min-height: auto !important;
}

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

.hero::before,
.hero::after,
.agent-slide .hero-content::before,
.agent-slide .hero-content::after {
  display: none !important;
}

.hero {
  background-color: #020605 !important;
}

.hero-copy {
  color: rgba(255, 255, 255, .72) !important;
}

.button,
.core-cta,
.footer-download a {
  border-radius: 8px !important;
}

/* Product platform: one premium product stage with metrics and a real visual anchor. */
#services.ai-origin {
  min-height: 100svh !important;
  padding: 82px 0 56px !important;
  background:
    radial-gradient(circle at 52% 18%, rgba(32, 243, 160, .12), transparent 28%),
    radial-gradient(circle at 96% 54%, rgba(32, 243, 160, .18), transparent 34%),
    linear-gradient(180deg, #020605 0%, #06140d 52%, #020605 100%) !important;
}

#services.ai-origin::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background:
    linear-gradient(rgba(32, 243, 160, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(32, 243, 160, .035) 1px, transparent 1px),
    radial-gradient(circle at 18% 35%, rgba(32, 243, 160, .12), transparent 22%),
    radial-gradient(circle at 84% 62%, rgba(32, 243, 160, .10), transparent 24%);
  background-size: 24px 24px, 24px 24px, 100% 100%, 100% 100%;
  opacity: .46 !important;
  pointer-events: none !important;
}

#services.ai-origin::after {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  height: 1px !important;
  background: linear-gradient(90deg, transparent, rgba(32, 243, 160, .24), transparent) !important;
}

#services .infrastructure-section {
  width: min(1280px, calc(100% - 96px)) !important;
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
  gap: clamp(28px, 3.2vh, 42px) !important;
  align-content: center !important;
  min-height: calc(100svh - 138px) !important;
}

#services .infra-hero {
  max-width: 880px !important;
  margin: 0 auto !important;
  text-align: center !important;
}

#services .infra-pill,
#scenarios .solution-badge,
.core-badge,
.section-mark {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  width: auto !important;
  margin-bottom: 16px !important;
  padding: 6px 18px !important;
  border: 1px solid rgba(32, 243, 160, .62) !important;
  border-radius: 999px !important;
  color: #9fe1cb !important;
  background: rgba(32, 243, 160, .035) !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  letter-spacing: .08em !important;
}

#services .infra-pill::before {
  display: none !important;
}

#services .infra-pill span,
#scenarios .solution-badge span,
.core-badge span {
  color: var(--rhythm-green) !important;
}

#services .infra-hero h2 {
  margin: 0 !important;
  font-size: var(--rhythm-title) !important;
  line-height: 1.12 !important;
  font-weight: 650 !important;
  letter-spacing: .01em !important;
  color: #fff !important;
}

#services .infra-hero p {
  max-width: 720px !important;
  margin: 14px auto 0 !important;
  color: #5dcaa5 !important;
  font-size: clamp(15px, 1.15vw, 18px) !important;
  line-height: 1.7 !important;
  font-weight: 400 !important;
}

#services .infra-metrics {
  display: flex !important;
  justify-content: center !important;
  gap: 0 !important;
  width: min(560px, 100%) !important;
  margin: 22px auto 0 !important;
  padding-top: 16px !important;
  border-top: 1px solid rgba(32, 243, 160, .18) !important;
}

#services .infra-metrics span {
  flex: 1 !important;
  display: grid !important;
  justify-items: center !important;
  gap: 4px !important;
  min-width: 0 !important;
  color: rgba(139, 191, 170, .72) !important;
  font-size: 12px !important;
  border-right: 1px solid rgba(255, 255, 255, .12) !important;
}

#services .infra-metrics span:last-child {
  border-right: 0 !important;
}

#services .infra-metrics strong {
  display: block !important;
  color: #dffcf2 !important;
  font-size: clamp(26px, 2.2vw, 36px) !important;
  line-height: 1 !important;
  font-weight: 650 !important;
}

#services .infra-showcase {
  width: 100% !important;
  max-width: none !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr) !important;
  grid-template-rows: repeat(3, minmax(136px, 1fr)) !important;
  gap: 16px !important;
}

#services .infra-module,
#services .infra-module.reverse,
#services .infra-module:not(:first-child) {
  position: relative !important;
  overflow: hidden !important;
  display: grid !important;
  align-items: center !important;
  border-radius: var(--rhythm-radius) !important;
  border: 1px solid rgba(255, 255, 255, .12) !important;
  background:
    radial-gradient(circle at 82% 50%, rgba(32, 243, 160, .22), transparent 36%),
    linear-gradient(135deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .012)) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .10), 0 20px 58px rgba(0, 0, 0, .26) !important;
  backdrop-filter: blur(18px) saturate(135%) !important;
}

#services .infra-module:hover,
#services .infra-module:focus-visible {
  border-color: rgba(32, 243, 160, .62) !important;
  transform: translateY(-3px) !important;
}

#services .infra-module:first-child {
  grid-column: 1 !important;
  grid-row: 1 / span 3 !important;
  min-height: 520px !important;
  grid-template-columns: minmax(0, .72fr) minmax(220px, .5fr) !important;
  padding: clamp(32px, 3.4vw, 48px) !important;
}

#services .infra-module:not(:first-child) {
  grid-column: 2 !important;
  min-height: 0 !important;
  grid-template-columns: minmax(0, 1fr) 118px !important;
  padding: 24px 24px 24px 28px !important;
}

#services .infra-module:nth-child(2) { grid-row: 1 !important; }
#services .infra-module:nth-child(3) { grid-row: 2 !important; }
#services .infra-module:nth-child(4) { grid-row: 3 !important; }

#services .infra-copy {
  position: relative !important;
  z-index: 3 !important;
  min-width: 0 !important;
}

#services .infra-copy span {
  display: inline-flex !important;
  align-items: center !important;
  gap: 12px !important;
  color: #5dcaa5 !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: .05em !important;
}

#services .infra-copy span::after {
  content: "" !important;
  display: block !important;
  width: 42px !important;
  height: 1px !important;
  background: rgba(32, 243, 160, .35) !important;
}

#services .infra-copy h3,
#services .infra-module:first-child .infra-copy h3 {
  margin: 18px 0 18px !important;
  color: #fff !important;
  font-size: var(--rhythm-card-title) !important;
  line-height: 1.15 !important;
  font-weight: 650 !important;
  letter-spacing: .01em !important;
}

#services .infra-copy h3::after {
  content: "" !important;
  display: block !important;
  width: 46px !important;
  height: 3px !important;
  margin-top: 18px !important;
  border-radius: 999px !important;
  background: var(--rhythm-green) !important;
}

#services .infra-copy p,
#services .infra-module:first-child .infra-copy p {
  max-width: 470px !important;
  color: var(--rhythm-copy) !important;
  font-size: 15px !important;
  line-height: 1.75 !important;
  margin: 0 !important;
}

#services .infra-module:not(:first-child) .infra-copy p {
  max-width: 440px !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

#services .infra-copy ul {
  display: grid !important;
  gap: 12px !important;
  margin: 28px 0 0 !important;
  padding: 0 !important;
}

#services .infra-copy li {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  color: rgba(255, 255, 255, .9) !important;
  font-size: 14px !important;
  line-height: 1.35 !important;
}

#services .infra-copy li::before {
  width: 9px !important;
  height: 9px !important;
  border: 2px solid var(--rhythm-green) !important;
  box-shadow: 0 0 12px rgba(32, 243, 160, .42) !important;
}

#services .infra-visual,
#services .infra-module:not(:first-child) .infra-visual {
  position: relative !important;
  width: 118px !important;
  height: 118px !important;
  min-width: 118px !important;
  align-self: center !important;
  justify-self: end !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
  filter: drop-shadow(0 0 26px rgba(32, 243, 160, .26)) !important;
}

#services .infra-visual img,
#services .infra-module:not(:first-child) .infra-visual img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  mix-blend-mode: screen !important;
}

#services .infra-module:first-child .infra-visual-base {
  position: absolute !important;
  right: clamp(42px, 5vw, 72px) !important;
  bottom: clamp(36px, 4vw, 58px) !important;
  width: clamp(190px, 18vw, 250px) !important;
  height: clamp(190px, 18vw, 250px) !important;
  z-index: 2 !important;
}

#services .infra-module:first-child .infra-visual-base .infra-orb-static {
  display: block !important;
  opacity: 1 !important;
  animation: siweishuOrbBreathe 5.2s ease-in-out infinite !important;
  filter: brightness(1.08) contrast(1.05) drop-shadow(0 0 36px rgba(32, 243, 160, .42)) !important;
  mix-blend-mode: screen !important;
}

#services .infra-module:first-child .infra-visual-base .infra-orb-spin {
  display: none !important;
}

#services .infra-module:first-child .infra-visual-base::before,
#services .infra-module:first-child .infra-visual-base::after {
  display: block !important;
  content: "" !important;
  position: absolute !important;
  pointer-events: none !important;
  border: 0 !important;
  box-shadow: none !important;
  z-index: 4 !important;
}

#services .infra-module:first-child .infra-visual-base::before {
  inset: 24% 18% 28% 18% !important;
  border-radius: 50% !important;
  background:
    repeating-linear-gradient(94deg, transparent 0 18px, rgba(231, 255, 247, .22) 20px 21px, transparent 23px 42px),
    repeating-linear-gradient(24deg, transparent 0 23px, rgba(32, 243, 160, .18) 24px 26px, transparent 27px 54px) !important;
  background-size: 130px 120px, 160px 140px !important;
  mix-blend-mode: screen !important;
  opacity: .48 !important;
  filter: blur(.2px) !important;
  animation: siweishuOrbSurfaceFlow 7s linear infinite !important;
}

#services .infra-module:first-child .infra-visual-base::after {
  left: 22% !important;
  right: 16% !important;
  top: 38% !important;
  height: 34% !important;
  border-radius: 50% !important;
  background: radial-gradient(ellipse at 62% 18%, rgba(255, 255, 255, .48), transparent 30%),
    linear-gradient(100deg, transparent, rgba(255, 255, 255, .14), rgba(32, 243, 160, .22), transparent) !important;
  background-size: 100% 100%, 180% 100% !important;
  background-position: 0 0, -90% 0 !important;
  mix-blend-mode: screen !important;
  opacity: .35 !important;
  filter: blur(5px) !important;
  animation: siweishuOrbHighlightFlow 5.8s ease-in-out infinite !important;
}

@keyframes siweishuOrbBreathe {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(0, -5px, 0) scale(1.018); }
}

@keyframes siweishuOrbSurfaceFlow {
  from { background-position: 0 0, 0 0; }
  to { background-position: 130px 0, -160px 0; }
}

@keyframes siweishuOrbHighlightFlow {
  0%, 100% { background-position: 0 0, -90% 0; opacity: .2; }
  48% { background-position: 0 0, 30% 0; opacity: .46; }
}

/* Solutions: replace flat cards with a compact Bento scene. */
#scenarios.ai-solutions {
  min-height: 100svh !important;
  padding: 76px 0 62px !important;
  background:
    radial-gradient(circle at 0% 8%, rgba(32, 243, 160, .13), transparent 28%),
    linear-gradient(115deg, #020605 0%, #061008 42%, #091b10 100%) !important;
}

#scenarios.ai-solutions::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background:
    linear-gradient(120deg, transparent 0 36%, rgba(32, 243, 160, .08) 36.5% 38%, transparent 38.5%),
    radial-gradient(circle at 78% 22%, rgba(32, 243, 160, .14), transparent 20%);
  opacity: .68 !important;
  pointer-events: none !important;
}

#scenarios .solution-hero {
  width: min(1280px, calc(100% - 96px)) !important;
  margin: 0 auto 26px !important;
  display: grid !important;
  grid-template-columns: minmax(280px, .45fr) minmax(0, .55fr) !important;
  column-gap: 42px !important;
  align-items: end !important;
  text-align: left !important;
}

#scenarios .solution-badge {
  grid-column: 1 !important;
  margin-bottom: 20px !important;
}

#scenarios .solution-hero h2 {
  grid-column: 1 !important;
  margin: 0 !important;
  max-width: 620px !important;
  color: #fff !important;
  font-size: var(--rhythm-title-lg) !important;
  line-height: 1.05 !important;
  font-weight: 650 !important;
  letter-spacing: .01em !important;
}

#scenarios .solution-subtitle {
  grid-column: 1 !important;
  max-width: 520px !important;
  margin: 20px 0 0 !important;
  color: var(--rhythm-copy) !important;
  font-size: 15px !important;
  line-height: 1.75 !important;
}

#scenarios .solution-stats {
  grid-column: 2 !important;
  grid-row: 1 / span 3 !important;
  align-self: end !important;
  justify-self: end !important;
  display: flex !important;
  gap: 0 !important;
  width: min(470px, 100%) !important;
  padding: 18px 0 0 !important;
  border-top: 1px solid rgba(32, 243, 160, .22) !important;
  background: transparent !important;
}

#scenarios .solution-stats span {
  flex: 1 !important;
  display: grid !important;
  gap: 5px !important;
  justify-items: center !important;
  color: rgba(139, 191, 170, .72) !important;
  border-right: 1px solid rgba(255, 255, 255, .12) !important;
  font-size: 12px !important;
}

#scenarios .solution-stats span:last-child {
  border-right: 0 !important;
}

#scenarios .solution-stats strong {
  color: #dffcf2 !important;
  font-size: 26px !important;
  line-height: 1 !important;
  font-weight: 650 !important;
}

#scenarios .solution-divider {
  display: none !important;
}

#scenarios .solution-board {
  width: min(1280px, calc(100% - 96px)) !important;
  margin: 0 auto !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, .72fr) minmax(0, .72fr) !important;
  grid-template-rows: minmax(186px, .92fr) minmax(150px, .72fr) minmax(150px, .72fr) !important;
  gap: 16px !important;
}

#scenarios .solution-card,
#scenarios .solution-card:first-child,
#scenarios .solution-card:nth-child(2),
#scenarios .solution-card:nth-child(3),
#scenarios .solution-card:nth-child(4),
#scenarios .solution-card:nth-child(5),
#scenarios .solution-card:nth-child(6) {
  position: relative !important;
  overflow: hidden !important;
  display: grid !important;
  min-height: 0 !important;
  border-radius: var(--rhythm-radius) !important;
  border: 1px solid rgba(32, 243, 160, .24) !important;
  background:
    radial-gradient(circle at 86% 16%, rgba(32, 243, 160, .14), transparent 28%),
    linear-gradient(145deg, rgba(13, 42, 28, .70), rgba(2, 10, 7, .88)) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 22px 54px rgba(0, 0, 0, .18) !important;
  backdrop-filter: blur(16px) !important;
}

#scenarios .solution-card:first-child {
  grid-column: 1 !important;
  grid-row: 1 / span 2 !important;
  grid-template-rows: 1fr auto !important;
}

#scenarios .solution-card:nth-child(2) {
  grid-column: 2 !important;
  grid-row: 1 !important;
}

#scenarios .solution-card:nth-child(3) {
  grid-column: 3 !important;
  grid-row: 1 !important;
}

#scenarios .solution-card:nth-child(4) {
  grid-column: 1 !important;
  grid-row: 3 !important;
  grid-template-columns: minmax(0, 1fr) 88px !important;
}

#scenarios .solution-card:nth-child(5) {
  grid-column: 2 !important;
  grid-row: 2 / span 2 !important;
}

#scenarios .solution-card:nth-child(6) {
  grid-column: 3 !important;
  grid-row: 2 / span 2 !important;
}

#scenarios .solution-card:hover {
  transform: translateY(-4px) !important;
  border-color: rgba(32, 243, 160, .58) !important;
}

#scenarios .solution-visual,
#scenarios .solution-card:not(:first-child) .solution-visual,
#scenarios .solution-card:nth-child(4) .solution-visual,
#scenarios .solution-card:nth-child(5) .solution-visual,
#scenarios .solution-card:nth-child(6) .solution-visual {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 92px !important;
  min-height: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  overflow: visible !important;
}

#scenarios .solution-card:first-child .solution-visual {
  align-items: center !important;
  justify-content: flex-start !important;
  height: auto !important;
  padding: 32px 34px 0 !important;
}

#scenarios .solution-card:nth-child(4) .solution-visual {
  grid-column: 2 !important;
  grid-row: 1 !important;
  width: 88px !important;
  height: 100% !important;
}

#scenarios .solution-icon,
#scenarios .solution-card:not(:first-child) .solution-icon,
#scenarios .solution-card:nth-child(4) .solution-icon,
#scenarios .solution-card:nth-child(5) .solution-icon,
#scenarios .solution-card:nth-child(6) .solution-icon {
  display: block !important;
  width: 62px !important;
  height: 62px !important;
  color: var(--rhythm-green) !important;
  stroke: var(--rhythm-green) !important;
  stroke-width: 2.4 !important;
  fill: none !important;
  filter: drop-shadow(0 0 18px rgba(32, 243, 160, .38)) !important;
  opacity: .98 !important;
}

#scenarios .solution-card:first-child .solution-icon {
  width: 94px !important;
  height: 94px !important;
}

#scenarios .solution-content,
#scenarios .solution-card:first-child .solution-content,
#scenarios .solution-card:nth-child(4) .solution-content,
#scenarios .solution-card:nth-child(5) .solution-content,
#scenarios .solution-card:nth-child(6) .solution-content {
  min-width: 0 !important;
  padding: 0 28px 26px !important;
  align-self: end !important;
}

#scenarios .solution-card:nth-child(4) .solution-content {
  grid-column: 1 !important;
  grid-row: 1 !important;
  padding: 26px 0 26px 28px !important;
}

#scenarios .solution-content span {
  display: block !important;
  margin: 0 0 12px !important;
  color: var(--rhythm-green-soft) !important;
  font-size: 13px !important;
  letter-spacing: .22em !important;
}

#scenarios .solution-card h3,
#scenarios .solution-card:first-child h3,
#scenarios .solution-card:nth-child(4) h3,
#scenarios .solution-card:nth-child(5) h3,
#scenarios .solution-card:nth-child(6) h3 {
  margin: 0 0 10px !important;
  color: #fff !important;
  font-size: clamp(20px, 1.5vw, 26px) !important;
  line-height: 1.2 !important;
  font-weight: 600 !important;
}

#scenarios .solution-card p,
#scenarios .solution-card:first-child .solution-content p,
#scenarios .solution-card:nth-child(4) p,
#scenarios .solution-card:nth-child(5) p,
#scenarios .solution-card:nth-child(6) p {
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  margin: 0 !important;
  color: var(--rhythm-copy) !important;
  font-size: 13px !important;
  line-height: 1.65 !important;
}

#scenarios .solution-card:first-child p {
  -webkit-line-clamp: 3 !important;
}

/* Core technology: different color temperature and stronger console object. */
#capability.core-tech-section {
  min-height: 100svh !important;
  padding: 86px 0 !important;
  background:
    radial-gradient(circle at 70% 45%, rgba(32, 243, 160, .09), transparent 32%),
    linear-gradient(180deg, #04111e 0%, #061522 48%, #02070d 100%) !important;
}

#capability.core-tech-section::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background:
    radial-gradient(circle at 18% 72%, rgba(37, 116, 255, .10), transparent 24%),
    linear-gradient(rgba(101, 167, 255, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(101, 167, 255, .025) 1px, transparent 1px);
  background-size: 100% 100%, 34px 34px, 34px 34px;
  pointer-events: none !important;
}

#capability .capability-stage {
  width: min(1280px, calc(100% - 96px)) !important;
  min-height: calc(100svh - 172px) !important;
  display: grid !important;
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.05fr) !important;
  gap: clamp(42px, 5vw, 70px) !important;
  align-items: center !important;
}

#capability.core-tech-section .capability-copy h2 {
  max-width: 670px !important;
  margin: 0 0 26px !important;
  color: #fff !important;
  font-size: clamp(40px, 4.1vw, 66px) !important;
  line-height: 1.12 !important;
  font-weight: 650 !important;
  letter-spacing: .01em !important;
}

#capability .capability-copy p {
  max-width: 610px !important;
  color: var(--rhythm-copy) !important;
  font-size: 15px !important;
  line-height: 1.8 !important;
}

#capability .tech-console.core-card-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 16px !important;
  padding: 18px !important;
  border-radius: 18px !important;
  background:
    radial-gradient(circle at 50% 50%, rgba(32, 243, 160, .12), transparent 46%),
    rgba(255, 255, 255, .035) !important;
  border: 1px solid rgba(255, 255, 255, .07) !important;
  box-shadow: 0 28px 70px rgba(0, 0, 0, .34) !important;
  backdrop-filter: blur(18px) !important;
}

#capability .core-tech-card {
  min-height: 228px !important;
  padding: 26px !important;
  border-radius: 14px !important;
  background: linear-gradient(145deg, rgba(5, 45, 27, .82), rgba(2, 19, 13, .92)) !important;
  border: 1px solid rgba(32, 243, 160, .18) !important;
}

#capability .tech-icon {
  width: 54px !important;
  height: 54px !important;
  margin-bottom: 22px !important;
  stroke: var(--rhythm-green) !important;
  filter: drop-shadow(0 0 16px rgba(32, 243, 160, .42)) !important;
}

#capability .core-tech-card h3 {
  color: #fff !important;
  font-size: clamp(20px, 1.6vw, 26px) !important;
  line-height: 1.2 !important;
}

#capability .core-tech-card p {
  color: #5dcaa5 !important;
  font-size: 13px !important;
  line-height: 1.55 !important;
}

#capability .core-tech-card em {
  display: block !important;
  color: rgba(139, 191, 170, .66) !important;
  font-size: 12px !important;
  line-height: 1.65 !important;
}

/* Delivery: change to timeline logic, not another card wall. */
#training.ai-delivery {
  min-height: 100svh !important;
  padding: 84px 0 !important;
  background:
    radial-gradient(circle at 85% 18%, rgba(32, 243, 160, .08), transparent 26%),
    linear-gradient(180deg, #101111 0%, #070807 100%) !important;
}

#training .delivery-stage {
  width: min(1240px, calc(100% - 96px)) !important;
  min-height: calc(100svh - 168px) !important;
  display: grid !important;
  grid-template-columns: minmax(0, .78fr) minmax(0, 1.12fr) !important;
  gap: clamp(44px, 6vw, 86px) !important;
  align-items: center !important;
}

#training .stage-head h2 {
  max-width: 540px !important;
  color: #fff !important;
  font-size: var(--rhythm-title) !important;
  line-height: 1.14 !important;
  font-weight: 650 !important;
}

#training .stage-head p {
  max-width: 520px !important;
  color: var(--rhythm-copy) !important;
  font-size: 15px !important;
  line-height: 1.85 !important;
}

#training .delivery-track {
  position: relative !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 18px !important;
  padding-left: 46px !important;
}

#training .delivery-track::before {
  content: "" !important;
  position: absolute !important;
  left: 18px !important;
  top: 26px !important;
  bottom: 26px !important;
  width: 1px !important;
  background: linear-gradient(180deg, transparent, var(--rhythm-green), transparent) !important;
  box-shadow: 0 0 18px rgba(32, 243, 160, .32) !important;
}

#training .delivery-track article,
#training .delivery-track article:nth-child(1),
#training .delivery-track article:nth-child(2),
#training .delivery-track article:nth-child(3),
#training .delivery-track article:nth-child(4) {
  position: relative !important;
  min-height: 128px !important;
  padding: 24px 26px 24px 82px !important;
  border-radius: 14px !important;
  border: 1px solid rgba(255, 255, 255, .11) !important;
  background:
    radial-gradient(circle at 92% 28%, rgba(32, 243, 160, .12), transparent 36%),
    rgba(255, 255, 255, .028) !important;
  backdrop-filter: blur(16px) !important;
}

#training .delivery-track article::before {
  left: -36px !important;
  top: 50% !important;
  width: 11px !important;
  height: 11px !important;
  margin-top: -5px !important;
  background: var(--rhythm-green) !important;
  box-shadow: 0 0 22px rgba(32, 243, 160, .7) !important;
}

#training .delivery-icon {
  left: 26px !important;
  top: 50% !important;
  width: 36px !important;
  height: 36px !important;
  transform: translateY(-50%) !important;
}

#training .delivery-track article h3 {
  color: #fff !important;
  font-size: 24px !important;
  line-height: 1.2 !important;
}

#training .delivery-track article p {
  color: var(--rhythm-copy) !important;
  font-size: 13px !important;
  line-height: 1.65 !important;
}

/* Resources: sidebar tabs plus one active stage for a different rhythm. */
#resources.ai-resources {
  min-height: 100svh !important;
  padding: 84px 0 !important;
  background:
    radial-gradient(circle at 26% 26%, rgba(32, 243, 160, .11), transparent 28%),
    linear-gradient(180deg, #06130d 0%, #03100a 100%) !important;
}

#resources .resource-stage {
  width: min(1240px, calc(100% - 96px)) !important;
  min-height: calc(100svh - 168px) !important;
  display: grid !important;
  grid-template-columns: minmax(280px, .8fr) minmax(0, 1.18fr) !important;
  gap: clamp(42px, 6vw, 84px) !important;
  align-items: center !important;
}

#resources .resource-main {
  position: relative !important;
  padding: 36px !important;
  border-radius: 18px !important;
  border: 1px solid rgba(255, 255, 255, .08) !important;
  background: linear-gradient(145deg, rgba(255,255,255,.035), rgba(255,255,255,.012)) !important;
}

#resources .resource-main h2 {
  color: #fff !important;
  font-size: var(--rhythm-title) !important;
  line-height: 1.15 !important;
}

#resources .resource-main p {
  color: var(--rhythm-copy) !important;
  font-size: 15px !important;
  line-height: 1.85 !important;
}

.resource-tabs {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 10px !important;
  margin-top: 30px !important;
}

.resource-tabs button {
  justify-content: space-between !important;
  width: 100% !important;
  padding: 14px 16px !important;
  border-radius: 12px !important;
}

#resources .resource-panels {
  display: grid !important;
  gap: 14px !important;
}

#resources .resource-panels article {
  position: relative !important;
  display: grid !important;
  grid-template-columns: 72px 1fr !important;
  column-gap: 22px !important;
  align-items: center !important;
  min-height: 148px !important;
  padding: 26px !important;
  border-radius: 16px !important;
  background:
    radial-gradient(circle at 88% 28%, rgba(32, 243, 160, .14), transparent 30%),
    rgba(255, 255, 255, .035) !important;
}

#resources .resource-panels article.is-active {
  min-height: 220px !important;
  border-color: rgba(32, 243, 160, .45) !important;
}

.resource-icon {
  grid-row: 1 / span 4 !important;
  width: 58px !important;
  height: 58px !important;
  stroke: var(--rhythm-green) !important;
  filter: drop-shadow(0 0 18px rgba(32, 243, 160, .38)) !important;
}

#resources .resource-panels article span {
  color: #5dcaa5 !important;
}

#resources .resource-panels article h3 {
  color: #fff !important;
  font-size: clamp(24px, 2vw, 32px) !important;
}

#resources .resource-panels article p {
  color: var(--rhythm-copy) !important;
  font-size: 14px !important;
}

/* About: cinematic company story, Xpeng/NIO-inspired without copying assets. */
#about.ai-about {
  min-height: 100svh !important;
  padding: 86px 0 !important;
  background:
    radial-gradient(circle at 74% 26%, rgba(32, 243, 160, .10), transparent 30%),
    linear-gradient(180deg, #0c0c0c 0%, #050806 100%) !important;
}

#about .about-stage {
  width: min(1280px, calc(100% - 96px)) !important;
  min-height: calc(100svh - 172px) !important;
  display: grid !important;
  grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr) !important;
  gap: clamp(50px, 6vw, 90px) !important;
  align-items: center !important;
}

#about .about-narrative-center {
  text-align: left !important;
  max-width: 620px !important;
}

#about .about-narrative-center .section-mark {
  margin-bottom: 22px !important;
}

#about .about-narrative-center h2 {
  max-width: 620px !important;
  margin: 0 0 28px !important;
  color: #fff !important;
  font-size: clamp(42px, 5vw, 76px) !important;
  line-height: 1.12 !important;
  font-weight: 520 !important;
  letter-spacing: .02em !important;
}

#about .about-narrative-center p {
  max-width: 560px !important;
  margin: 0 !important;
  color: var(--rhythm-copy) !important;
  font-size: 16px !important;
  line-height: 1.9 !important;
}

.about-video-frame {
  min-height: 0 !important;
  height: auto !important;
  aspect-ratio: 16 / 9 !important;
  border-radius: 16px !important;
  background:
    linear-gradient(120deg, rgba(255,255,255,.08), transparent 32%),
    radial-gradient(circle at 50% 46%, rgba(32, 243, 160, .16), transparent 28%),
    rgba(255, 255, 255, .025) !important;
}

.about-video-frame:hover {
  transform: translateY(-4px) !important;
  border-color: rgba(32, 243, 160, .45) !important;
}

/* Footer: DJI-like information density, but compact and aligned. */
.dji-footer {
  padding: 0 !important;
  background: #202220 !important;
}

.dji-footer .footer-download {
  min-height: 150px !important;
  padding: 34px 0 !important;
}

.dji-footer .footer-mega {
  width: min(1240px, calc(100% - 96px)) !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: clamp(28px, 4vw, 64px) !important;
  padding: 38px 0 42px !important;
}

.dji-footer .footer-column h3 {
  color: rgba(255, 255, 255, .92) !important;
  font-size: 14px !important;
}

.dji-footer .footer-column a,
.dji-footer .footer-column span {
  color: rgba(255, 255, 255, .62) !important;
  font-size: 13px !important;
  line-height: 1.7 !important;
}

.dji-footer .footer-brandbar,
.dji-footer .footer-legal {
  width: min(1240px, calc(100% - 96px)) !important;
}

.dji-footer .footer-brandbar {
  grid-template-columns: auto minmax(0, 1fr) auto !important;
  gap: 28px !important;
  padding: 24px 0 !important;
}

.footer-records {
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 22px !important;
}

.footer-records a,
.footer-records span {
  white-space: nowrap !important;
}

@media (max-width: 1180px) {
  #services .infrastructure-section,
  #scenarios .solution-hero,
  #scenarios .solution-board,
  #capability .capability-stage,
  #training .delivery-stage,
  #resources .resource-stage,
  #about .about-stage,
  .dji-footer .footer-mega,
  .dji-footer .footer-brandbar,
  .dji-footer .footer-legal {
    width: min(100% - 48px, 920px) !important;
  }

  #services .infra-showcase,
  #capability .capability-stage,
  #training .delivery-stage,
  #resources .resource-stage,
  #about .about-stage,
  #scenarios .solution-hero {
    grid-template-columns: 1fr !important;
  }

  #services .infra-module:first-child,
  #services .infra-module:not(:first-child),
  #services .infra-module:nth-child(2),
  #services .infra-module:nth-child(3),
  #services .infra-module:nth-child(4) {
    grid-column: auto !important;
    grid-row: auto !important;
  }

  #services .infra-showcase {
    grid-template-rows: auto !important;
  }

  #services .infra-module:first-child {
    min-height: 420px !important;
  }

  #scenarios .solution-hero {
    text-align: center !important;
    justify-items: center !important;
  }

  #scenarios .solution-badge,
  #scenarios .solution-hero h2,
  #scenarios .solution-subtitle,
  #scenarios .solution-stats {
    grid-column: 1 !important;
    grid-row: auto !important;
    justify-self: center !important;
  }

  #scenarios .solution-board {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-template-rows: auto !important;
  }

  #scenarios .solution-card,
  #scenarios .solution-card:first-child,
  #scenarios .solution-card:nth-child(2),
  #scenarios .solution-card:nth-child(3),
  #scenarios .solution-card:nth-child(4),
  #scenarios .solution-card:nth-child(5),
  #scenarios .solution-card:nth-child(6) {
    grid-column: auto !important;
    grid-row: auto !important;
    min-height: 220px !important;
  }

  .dji-footer .footer-mega {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .footer-records {
    flex-wrap: wrap !important;
  }
}

/* 2026-05-30 final rhythm layer
   Unifies the homepage into distinct, screen-sized chapters instead of repeated template blocks. */
@media (min-width: 1024px) {
  :root {
    --final-page-x: clamp(48px, 6vw, 108px);
    --final-container: min(1320px, calc(100% - (var(--final-page-x) * 2)));
    --final-title: clamp(34px, 3vw, 46px);
    --final-hero-title: clamp(42px, 4vw, 58px);
    --final-card-title: clamp(21px, 1.65vw, 28px);
    --final-copy: clamp(13px, .95vw, 15px);
    --final-muted: #8bbfaa;
    --final-green: #20f3a0;
    --final-green-soft: #5dcaa5;
    --final-radius: 12px;
  }

  html,
  body {
    background: #020605 !important;
  }

  .hero-intelligence-core,
  .hero-metrics,
  .hero-slide.agent-slide::after,
  .agent-slide .hero-content::before,
  .agent-slide .hero-content::after {
    display: none !important;
    content: none !important;
  }

  .ai-home {
    background:
      linear-gradient(180deg, #020605 0%, #020605 18%, #03111d 47%, #0b0b0a 67%, #06140d 100%) !important;
  }

  .ai-section {
    min-height: 100svh !important;
    overflow: hidden !important;
  }

  .infra-hero h2,
  .solution-hero h2,
  .capability-copy h2,
  .delivery-copy h2,
  .resource-copy h2,
  .about-copy h2 {
    font-size: var(--final-title) !important;
    line-height: 1.12 !important;
    letter-spacing: 0 !important;
  }

  .infra-hero p,
  .solution-subtitle,
  .capability-copy p,
  .delivery-copy p,
  .resource-copy p,
  .about-copy p,
  .infra-copy p,
  .solution-card p,
  .core-tech-card p,
  .delivery-node p,
  .resource-pane p {
    font-size: var(--final-copy) !important;
    line-height: 1.7 !important;
  }

  /* Screen 2: product platform */
  #services.ai-origin {
    height: 100svh !important;
    min-height: 100svh !important;
    padding: 50px 0 42px !important;
    background:
      radial-gradient(circle at 72% 24%, rgba(32, 243, 160, .14), transparent 34%),
      radial-gradient(circle at 20% 78%, rgba(32, 243, 160, .08), transparent 30%),
      linear-gradient(180deg, #020605 0%, #06140d 100%) !important;
  }

  #services.ai-origin::before {
    opacity: .38 !important;
    background-size: 24px 24px !important;
  }

  #services .infrastructure-section {
    width: var(--final-container) !important;
    height: calc(100svh - 92px) !important;
    min-height: 0 !important;
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
    gap: 24px !important;
    margin: 0 auto !important;
  }

  #services .infra-hero {
    height: auto !important;
    min-height: 0 !important;
    display: grid !important;
    justify-items: center !important;
    align-content: start !important;
    padding-top: 0 !important;
  }

  #services .infra-pill {
    margin-bottom: 10px !important;
    padding: 6px 22px !important;
  }

  #services .infra-hero h2 {
    font-size: clamp(32px, 2.8vw, 44px) !important;
    margin: 0 0 8px !important;
    color: #fff !important;
  }

  #services .infra-hero p {
    max-width: 640px !important;
    color: var(--final-green-soft) !important;
    text-align: center !important;
    margin: 0 auto !important;
  }

  #services .infra-metrics {
    margin-top: 12px !important;
    gap: 24px !important;
  }

  #services .infra-showcase {
    height: auto !important;
    min-height: 0 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr) !important;
    grid-template-rows: repeat(3, minmax(0, 1fr)) !important;
    gap: 18px !important;
  }

  #services .infra-module {
    border-radius: var(--final-radius) !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  #services .infra-module:first-child {
    grid-column: 1 !important;
    grid-row: 1 / span 3 !important;
    display: grid !important;
    grid-template-columns: minmax(0, .6fr) minmax(210px, .4fr) !important;
    align-items: center !important;
    padding: 30px 34px !important;
  }

  #services .infra-module:not(:first-child) {
    grid-column: 2 !important;
    grid-row: auto !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 116px !important;
    align-items: center !important;
    gap: 18px !important;
    padding: 22px 28px !important;
  }

  #services .infra-copy {
    min-width: 0 !important;
  }

  #services .infra-copy span {
    font-size: 13px !important;
    color: var(--final-green-soft) !important;
    letter-spacing: .04em !important;
    margin-bottom: 10px !important;
  }

  #services .infra-copy h3 {
    font-size: var(--final-card-title) !important;
    line-height: 1.12 !important;
    color: #fff !important;
    margin: 0 0 14px !important;
    white-space: normal !important;
  }

  #services .infra-module:not(:first-child) .infra-copy h3 {
    color: #d4f5e9 !important;
    margin-bottom: 10px !important;
  }

  #services .infra-copy p {
    max-width: 520px !important;
    color: var(--final-muted) !important;
    margin: 0 !important;
  }

  #services .infra-module:first-child .infra-copy ul {
    margin-top: 22px !important;
    gap: 10px !important;
  }

  #services .infra-module:first-child .infra-visual-base {
    position: relative !important;
    inset: auto !important;
    justify-self: end !important;
    align-self: end !important;
    width: clamp(210px, 18vw, 260px) !important;
    height: clamp(210px, 18vw, 260px) !important;
    overflow: visible !important;
  }

  #services .infra-module:first-child .infra-visual-base::before,
  #services .infra-module:first-child .infra-visual-base::after {
    content: none !important;
    display: none !important;
  }

  #services .infra-module:first-child .infra-visual-base .infra-orb-static,
  #services .infra-module:first-child .infra-visual-base .infra-orb-spin {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  #services .infra-module:first-child .infra-visual-base .infra-orb-static {
    opacity: .96 !important;
  }

  #services .infra-module:first-child .infra-visual-base .infra-orb-spin {
    display: block !important;
    opacity: .5 !important;
    mix-blend-mode: screen !important;
    clip-path: circle(36% at 52% 43%) !important;
    transform-origin: 52% 43% !important;
    animation: siweishuOrbTurn 8s linear infinite !important;
  }

  @keyframes siweishuOrbTurn {
    0% { transform: rotate(0deg) scale(1.01); }
    100% { transform: rotate(360deg) scale(1.01); }
  }

  #services .infra-module:not(:first-child) .infra-visual {
    width: 112px !important;
    height: 112px !important;
    min-width: 112px !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
  }

  #services .infra-module:not(:first-child) .infra-visual img {
    width: 112px !important;
    height: 112px !important;
    object-fit: contain !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    mix-blend-mode: screen !important;
  }

  /* Screen 3: scenario bento, keep it desktop at 1280px */
  #scenarios.ai-solutions {
    height: 100svh !important;
    min-height: 100svh !important;
    padding: 56px var(--final-page-x) 52px !important;
    display: grid !important;
    grid-template-columns: minmax(260px, .32fr) minmax(0, .68fr) !important;
    align-items: center !important;
    gap: clamp(32px, 4vw, 64px) !important;
    background:
      radial-gradient(circle at 88% 22%, rgba(32, 243, 160, .14), transparent 28%),
      linear-gradient(135deg, #020605 0%, #050b09 58%, #0a0a09 100%) !important;
  }

  #scenarios.ai-solutions::before {
    opacity: .22 !important;
  }

  #scenarios .solution-hero {
    max-width: 420px !important;
    min-width: 0 !important;
    text-align: left !important;
    margin: 0 !important;
  }

  #scenarios .solution-badge {
    margin-bottom: 18px !important;
  }

  #scenarios .solution-hero h2 {
    font-size: clamp(36px, 3.6vw, 54px) !important;
    line-height: 1.14 !important;
    color: #fff !important;
    text-align: left !important;
    margin: 0 0 18px !important;
    max-width: 420px !important;
  }

  #scenarios .solution-subtitle {
    max-width: 420px !important;
    text-align: left !important;
    color: var(--final-muted) !important;
    margin: 0 !important;
  }

  #scenarios .solution-stats {
    margin-top: 24px !important;
    justify-content: flex-start !important;
    gap: 10px !important;
  }

  #scenarios .solution-stat {
    height: 36px !important;
    padding: 0 18px !important;
  }

  #scenarios .solution-board {
    height: min(520px, calc(100svh - 112px)) !important;
    min-height: 430px !important;
    display: grid !important;
    grid-template-columns: minmax(220px, 1.14fr) repeat(3, minmax(132px, .78fr)) !important;
    grid-template-rows: repeat(2, minmax(0, 1fr)) !important;
    gap: 14px !important;
  }

  #scenarios .solution-card {
    min-height: 0 !important;
    padding: 22px 24px !important;
    border-radius: var(--final-radius) !important;
  }

  #scenarios .solution-card:first-child {
    grid-column: 1 !important;
    grid-row: 1 / span 2 !important;
  }

  #scenarios .solution-card:nth-child(2) { grid-column: 2 !important; grid-row: 1 !important; }
  #scenarios .solution-card:nth-child(3) { grid-column: 3 / span 2 !important; grid-row: 1 !important; }
  #scenarios .solution-card:nth-child(4) { grid-column: 1 / span 2 !important; grid-row: 2 !important; }
  #scenarios .solution-card:nth-child(5) { grid-column: 3 !important; grid-row: 2 !important; }
  #scenarios .solution-card:nth-child(6) { grid-column: 4 !important; grid-row: 2 !important; }

  #scenarios .solution-card span {
    font-size: 13px !important;
    color: var(--final-green-soft) !important;
    margin-bottom: 12px !important;
  }

  #scenarios .solution-card h3 {
    font-size: clamp(20px, 1.45vw, 26px) !important;
    line-height: 1.18 !important;
    color: #fff !important;
    margin: 0 0 10px !important;
  }

  #scenarios .solution-card p {
    max-height: none !important;
    overflow: visible !important;
    color: var(--final-muted) !important;
  }

  #scenarios .solution-card svg {
    width: clamp(54px, 5vw, 86px) !important;
    height: clamp(54px, 5vw, 86px) !important;
    opacity: .9 !important;
    stroke: var(--final-green) !important;
  }

  /* Screen 4: technical architecture, cooler palette and tighter reading width */
  #capability.core-tech-section {
    height: 100svh !important;
    min-height: 100svh !important;
    padding: 66px 0 !important;
    background:
      radial-gradient(circle at 72% 44%, rgba(24, 97, 150, .22), transparent 38%),
      linear-gradient(180deg, #04111e 0%, #061626 52%, #03101c 100%) !important;
  }

  #capability .capability-stage {
    width: var(--final-container) !important;
    height: calc(100svh - 132px) !important;
    min-height: 0 !important;
    display: grid !important;
    grid-template-columns: minmax(360px, .43fr) minmax(0, .57fr) !important;
    align-items: center !important;
    gap: clamp(36px, 5vw, 76px) !important;
  }

  #capability .capability-copy h2 {
    font-size: clamp(36px, 3.5vw, 54px) !important;
    line-height: 1.16 !important;
    max-width: 700px !important;
    white-space: normal !important;
    word-break: keep-all !important;
  }

  #capability .capability-copy h2 br {
    display: block !important;
  }

  #capability .capability-copy p {
    max-width: 560px !important;
    color: var(--final-muted) !important;
  }

  #capability .tech-console.core-card-grid {
    height: min(560px, calc(100svh - 150px)) !important;
    min-height: 470px !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 16px !important;
    padding: 16px !important;
    border-radius: 16px !important;
  }

  #capability .core-tech-card {
    min-height: 0 !important;
    padding: 24px !important;
    border-radius: var(--final-radius) !important;
    display: flex !important;
    flex-direction: column !important;
  }

  #capability .tech-icon {
    width: 44px !important;
    height: 44px !important;
    margin-bottom: 14px !important;
  }

  #capability .core-tech-card h3 {
    font-size: clamp(20px, 1.4vw, 25px) !important;
    line-height: 1.2 !important;
  }

  #capability .core-tech-card p,
  #capability .core-tech-card em {
    max-height: none !important;
    overflow: visible !important;
  }

  /* Screen 5: make incubation a timeline, not another card grid. */
  #training.ai-delivery {
    height: 100svh !important;
    min-height: 100svh !important;
    padding: 70px 0 !important;
    background: #0b0b0a !important;
  }

  #training .delivery-stage {
    width: var(--final-container) !important;
    height: calc(100svh - 140px) !important;
    min-height: 0 !important;
    display: grid !important;
    grid-template-columns: minmax(330px, .42fr) minmax(0, .58fr) !important;
    gap: clamp(38px, 5vw, 78px) !important;
    align-items: center !important;
  }

  #training .delivery-copy h2 {
    font-size: var(--final-title) !important;
    line-height: 1.16 !important;
    max-width: 560px !important;
  }

  #training .delivery-copy p {
    max-width: 520px !important;
    color: var(--final-muted) !important;
  }

  #training .delivery-flow {
    height: min(520px, calc(100svh - 180px)) !important;
    display: grid !important;
    align-content: center !important;
    gap: 16px !important;
  }

  #training .delivery-node {
    min-height: 92px !important;
    padding: 18px 24px 18px 84px !important;
    border-radius: var(--final-radius) !important;
  }

  #training .delivery-node h3 {
    font-size: clamp(20px, 1.5vw, 26px) !important;
    line-height: 1.18 !important;
  }

  #training .delivery-node::before {
    top: 22px !important;
    left: 28px !important;
  }

  /* Screen 6: resource console gets sidebar plus active pane. */
  #resources.ai-resources {
    height: 100svh !important;
    min-height: 100svh !important;
    padding: 70px 0 !important;
    background:
      radial-gradient(circle at 75% 44%, rgba(32, 243, 160, .12), transparent 36%),
      linear-gradient(180deg, #06140d 0%, #091610 100%) !important;
  }

  #resources .resource-stage {
    width: var(--final-container) !important;
    height: calc(100svh - 140px) !important;
    min-height: 0 !important;
    display: grid !important;
    grid-template-columns: minmax(330px, .4fr) minmax(0, .6fr) !important;
    gap: clamp(34px, 5vw, 76px) !important;
    align-items: center !important;
  }

  #resources .resource-copy h2 {
    font-size: var(--final-title) !important;
    line-height: 1.16 !important;
  }

  #resources .resource-copy p {
    color: var(--final-muted) !important;
    max-width: 520px !important;
  }

  #resources .resource-stack {
    min-height: 0 !important;
    display: grid !important;
    grid-template-columns: 180px minmax(0, 1fr) !important;
    gap: 18px !important;
  }

  #resources .resource-card {
    min-height: 0 !important;
    padding: 18px !important;
    border-radius: var(--final-radius) !important;
  }

  #resources .resource-card svg {
    width: 36px !important;
    height: 36px !important;
    margin-bottom: 12px !important;
  }

  #resources .resource-card h3 {
    font-size: 18px !important;
    margin-bottom: 6px !important;
  }

  /* Screen 7: about as cinematic company intro. */
  #about.ai-about {
    height: 100svh !important;
    min-height: 100svh !important;
    padding: 70px 0 !important;
    background:
      radial-gradient(circle at 76% 42%, rgba(255, 255, 255, .06), transparent 32%),
      linear-gradient(180deg, #0c0c0c 0%, #060807 100%) !important;
  }

  #about .about-stage {
    width: var(--final-container) !important;
    height: calc(100svh - 140px) !important;
    min-height: 0 !important;
    display: grid !important;
    grid-template-columns: minmax(360px, .43fr) minmax(0, .57fr) !important;
    gap: clamp(42px, 5vw, 90px) !important;
    align-items: center !important;
  }

  #about .about-copy h2 {
    font-size: clamp(38px, 3.7vw, 58px) !important;
    line-height: 1.14 !important;
  }

  #about .about-copy p {
    max-width: 570px !important;
    color: var(--final-muted) !important;
  }

  #about .about-video {
    height: min(430px, calc(100svh - 190px)) !important;
    min-height: 330px !important;
    border-radius: var(--final-radius) !important;
    cursor: pointer !important;
  }

  #about .about-video::after {
    content: "播放公司介绍";
    position: absolute;
    left: 50%;
    bottom: 34px;
    transform: translateX(-50%);
    color: rgba(255,255,255,.74);
    font-size: 13px;
    letter-spacing: .08em;
  }

  /* Footer: DJI-like dense information block, but in Siweishu colors. */
  .site-footer {
    background: #151716 !important;
    padding: 58px var(--final-page-x) 34px !important;
  }

  .footer-grid {
    width: var(--final-container) !important;
    margin: 0 auto !important;
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 36px !important;
    border-top: 1px solid rgba(255,255,255,.14) !important;
    padding-top: 34px !important;
  }

  .footer-records {
    width: var(--final-container) !important;
    margin: 34px auto 0 !important;
    display: flex !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    gap: 26px !important;
    white-space: nowrap !important;
    color: rgba(255,255,255,.42) !important;
  }

  .footer-records a,
  .footer-records span {
    display: inline-flex !important;
    align-items: center !important;
    margin: 0 !important;
    white-space: nowrap !important;
  }

  .footer-records .footer-copyright,
  .footer-records .footer-tagline {
    display: inline-flex !important;
  }

  .footer-records .footer-copyright::before,
  .footer-records .footer-tagline::before {
    content: "|" !important;
    margin-right: 26px !important;
    color: rgba(255,255,255,.22) !important;
  }
}

@media (min-width: 1024px) and (max-width: 1360px) {
  :root {
    --final-page-x: 36px;
    --final-container: min(1180px, calc(100% - 72px));
    --final-title: clamp(31px, 3vw, 40px);
    --final-card-title: clamp(20px, 1.75vw, 25px);
  }

  #services.ai-origin {
    padding-top: 42px !important;
  }

  #services .infrastructure-section {
    height: calc(100svh - 82px) !important;
    gap: 18px !important;
  }

  #services .infra-showcase {
    gap: 14px !important;
  }

  #services .infra-module:first-child {
    padding: 24px 28px !important;
    grid-template-columns: minmax(0, .62fr) minmax(180px, .38fr) !important;
  }

  #services .infra-module:first-child .infra-visual-base {
    width: 205px !important;
    height: 205px !important;
  }

  #services .infra-module:not(:first-child) {
    grid-template-columns: minmax(0, 1fr) 96px !important;
    padding: 18px 22px !important;
  }

  #services .infra-module:not(:first-child) .infra-visual,
  #services .infra-module:not(:first-child) .infra-visual img {
    width: 96px !important;
    height: 96px !important;
    min-width: 96px !important;
  }

  #scenarios.ai-solutions {
    padding-top: 48px !important;
    padding-bottom: 44px !important;
    gap: 32px !important;
  }

  #scenarios .solution-board {
    height: min(490px, calc(100svh - 104px)) !important;
    gap: 12px !important;
  }

  #scenarios .solution-card {
    padding: 18px 20px !important;
  }

  #capability.core-tech-section,
  #training.ai-delivery,
  #resources.ai-resources,
  #about.ai-about {
    padding-top: 56px !important;
    padding-bottom: 56px !important;
  }

  #capability .capability-stage,
  #training .delivery-stage,
  #resources .resource-stage,
  #about .about-stage {
    height: calc(100svh - 112px) !important;
  }

  #capability .tech-console.core-card-grid {
    min-height: 440px !important;
  }
}

/* 2026-05-30 rhythm10: page-level visual rhythm and actual-structure lock */
:root {
  --rhythm-x: clamp(42px, 6vw, 116px);
  --rhythm-container: min(1600px, calc(100% - (var(--rhythm-x) * 2)));
  --rhythm-title: clamp(38px, 3.1vw, 52px);
  --rhythm-title-tight: clamp(34px, 2.55vw, 44px);
  --rhythm-card-title: clamp(23px, 1.7vw, 30px);
  --rhythm-sub: clamp(15px, .95vw, 18px);
  --rhythm-text: clamp(14px, .86vw, 16px);
  --rhythm-small: clamp(12px, .72vw, 14px);
  --rhythm-green: #20f3a0;
  --rhythm-green-soft: #5dcaa5;
  --rhythm-muted: #8bbfaa;
  --rhythm-dim: rgba(139, 191, 170, .72);
  --rhythm-border: rgba(157, 225, 203, .16);
  --rhythm-radius: 12px;
}

.ai-home {
  background: #020403 !important;
}

.ai-home .ai-section {
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate !important;
  color: #fff !important;
  font-family: "PingFang SC", "Helvetica Neue", Arial, sans-serif !important;
}

.ai-home .ai-section h2,
.ai-home .ai-section h3,
.ai-home .ai-section p,
.ai-home .ai-section span,
.ai-home .ai-section a,
.ai-home .ai-section li,
.site-footer h3,
.site-footer a,
.site-footer span,
.site-footer p {
  letter-spacing: 0 !important;
}

.hero-intelligence-core,
.hero-metrics,
.hero-content::before,
.hero-content::after,
.agent-slide .hero-stage::before,
.agent-slide .hero-stage::after,
.agent-slide::before,
.agent-slide::after {
  display: none !important;
  content: none !important;
}

/* Screen 2: intelligent native infrastructure */
#services.ai-origin {
  min-height: 100svh !important;
  height: auto !important;
  padding: 56px 0 64px !important;
  background:
    radial-gradient(circle at 78% 18%, rgba(32, 243, 160, .13), transparent 26%),
    radial-gradient(circle at 18% 78%, rgba(32, 243, 160, .08), transparent 30%),
    linear-gradient(180deg, #030605 0%, #06110c 54%, #020504 100%) !important;
}

#services.ai-origin::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: -2 !important;
  opacity: .42 !important;
  background-image:
    linear-gradient(rgba(32, 243, 160, .06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(32, 243, 160, .06) 1px, transparent 1px),
    radial-gradient(circle at 14% 24%, rgba(157, 225, 203, .35) 0 2px, transparent 3px),
    radial-gradient(circle at 88% 38%, rgba(32, 243, 160, .3) 0 2px, transparent 3px),
    radial-gradient(circle at 62% 82%, rgba(157, 225, 203, .24) 0 2px, transparent 3px) !important;
  background-size: 32px 32px, 32px 32px, 520px 420px, 620px 480px, 760px 520px !important;
}

#services.ai-origin::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: -1 !important;
  opacity: .44 !important;
  background:
    linear-gradient(28deg, transparent 0 23%, rgba(32, 243, 160, .14) 23.2%, transparent 24.2% 100%),
    linear-gradient(145deg, transparent 0 62%, rgba(157, 225, 203, .08) 62.2%, transparent 63.2% 100%) !important;
  animation: rhythmDrift 14s ease-in-out infinite alternate !important;
}

@keyframes rhythmDrift {
  from { transform: translate3d(-10px, -8px, 0) scale(1.01); opacity: .32; }
  to { transform: translate3d(14px, 10px, 0) scale(1.04); opacity: .54; }
}

#services .services-depth-field,
#services .depth-layer {
  display: none !important;
}

#services .infrastructure-section {
  width: var(--rhythm-container) !important;
  min-height: calc(100svh - 120px) !important;
  margin: 0 auto !important;
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
  align-content: center !important;
  gap: clamp(26px, 3.4vh, 40px) !important;
}

#services .infra-hero {
  max-width: 820px !important;
  margin: 0 auto !important;
  text-align: center !important;
}

#services .infra-pill,
#scenarios .solution-badge,
#capability .core-badge {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  min-height: 34px !important;
  padding: 0 22px !important;
  border: 1px solid rgba(32, 243, 160, .68) !important;
  border-radius: 999px !important;
  color: #9fe1cb !important;
  background: rgba(32, 243, 160, .035) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
}

#services .infra-pill span,
#scenarios .solution-badge span,
#capability .core-badge span {
  color: var(--rhythm-green) !important;
}

#services .infra-hero h2 {
  margin: 14px 0 10px !important;
  font-size: var(--rhythm-title) !important;
  line-height: 1.12 !important;
  font-weight: 700 !important;
  color: #fff !important;
}

#services .infra-hero p {
  max-width: 720px !important;
  margin: 0 auto !important;
  font-size: var(--rhythm-sub) !important;
  line-height: 1.65 !important;
  color: var(--rhythm-green-soft) !important;
}

#services .infra-metrics {
  display: flex !important;
  justify-content: center !important;
  gap: 0 !important;
  margin-top: 22px !important;
}

#services .infra-metrics span {
  min-width: 132px !important;
  padding: 0 24px !important;
  border-right: 1px solid rgba(157, 225, 203, .18) !important;
  color: rgba(139, 191, 170, .74) !important;
  font-size: 13px !important;
}

#services .infra-metrics span:last-child {
  border-right: 0 !important;
}

#services .infra-metrics strong {
  display: block !important;
  color: #d4f5e9 !important;
  font-size: 32px !important;
  line-height: 1 !important;
  margin-bottom: 6px !important;
}

#services .infra-showcase {
  display: grid !important;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr) !important;
  grid-template-rows: repeat(3, minmax(138px, 1fr)) !important;
  gap: 18px !important;
  min-height: 500px !important;
}

#services .infra-module {
  position: relative !important;
  min-width: 0 !important;
  min-height: 0 !important;
  overflow: hidden !important;
  border-radius: var(--rhythm-radius) !important;
  border: 1px solid var(--rhythm-border) !important;
  background:
    radial-gradient(circle at 78% 48%, rgba(32, 243, 160, .16), transparent 42%),
    rgba(255, 255, 255, .025) !important;
  backdrop-filter: blur(22px) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.09), 0 26px 70px rgba(0,0,0,.2) !important;
  transition: transform .32s ease, border-color .32s ease, box-shadow .32s ease !important;
}

#services .infra-module:hover,
#services .infra-module:focus-visible {
  transform: translateY(-4px) !important;
  border-color: rgba(32, 243, 160, .64) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 26px 80px rgba(32,243,160,.09) !important;
}

#services .infra-module:first-child {
  grid-row: 1 / span 3 !important;
  display: grid !important;
  grid-template-columns: minmax(0, .58fr) minmax(230px, .42fr) !important;
  align-items: center !important;
  gap: 24px !important;
  padding: clamp(30px, 3.2vw, 48px) !important;
}

#services .infra-module:not(:first-child) {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 132px !important;
  align-items: center !important;
  gap: 20px !important;
  padding: 24px 30px !important;
}

#services .infra-copy {
  min-width: 0 !important;
  position: relative !important;
  z-index: 2 !important;
}

#services .infra-copy span {
  display: inline-flex !important;
  align-items: center !important;
  gap: 12px !important;
  margin: 0 0 14px !important;
  color: var(--rhythm-green-soft) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
}

#services .infra-copy span::after {
  content: "" !important;
  width: 42px !important;
  height: 1px !important;
  background: rgba(32, 243, 160, .5) !important;
}

#services .infra-copy h3 {
  margin: 0 0 16px !important;
  color: #fff !important;
  font-size: var(--rhythm-card-title) !important;
  line-height: 1.16 !important;
  font-weight: 700 !important;
}

#services .infra-module:not(:first-child) .infra-copy h3 {
  color: #d4f5e9 !important;
  font-size: clamp(24px, 1.9vw, 32px) !important;
}

#services .infra-copy p {
  margin: 0 !important;
  max-width: 560px !important;
  color: var(--rhythm-muted) !important;
  font-size: var(--rhythm-text) !important;
  line-height: 1.72 !important;
}

#services .infra-copy ul {
  display: grid !important;
  gap: 12px !important;
  margin: 28px 0 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

#services .infra-copy li {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  color: rgba(255,255,255,.88) !important;
  font-size: 15px !important;
  white-space: nowrap !important;
}

#services .infra-copy li::before {
  content: "" !important;
  width: 10px !important;
  height: 10px !important;
  border-radius: 50% !important;
  border: 2px solid var(--rhythm-green) !important;
  box-shadow: 0 0 16px rgba(32,243,160,.5) !important;
}

#services .infra-visual,
#services .infra-visual img {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

#services .infra-module:first-child .infra-visual-base {
  position: relative !important;
  justify-self: end !important;
  align-self: end !important;
  width: clamp(230px, 19vw, 290px) !important;
  height: clamp(230px, 19vw, 290px) !important;
  overflow: visible !important;
  z-index: 1 !important;
}

#services .infra-orb-static {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  opacity: .96 !important;
  filter: drop-shadow(0 0 24px rgba(32,243,160,.38)) !important;
}

#services .infra-orb-spin {
  display: none !important;
}

#services .infra-visual-base::before {
  content: "" !important;
  position: absolute !important;
  left: 28% !important;
  top: 17% !important;
  width: 62% !important;
  height: 62% !important;
  border-radius: 50% !important;
  background:
    conic-gradient(from 0deg, transparent 0 18%, rgba(255,255,255,.55) 20%, transparent 22% 46%, rgba(32,243,160,.45) 49%, transparent 52% 100%),
    repeating-radial-gradient(circle, rgba(255,255,255,.18) 0 1px, transparent 2px 18px) !important;
  mix-blend-mode: screen !important;
  opacity: .48 !important;
  animation: rhythmSphereSpin 9s linear infinite !important;
  pointer-events: none !important;
}

#services .infra-visual-base::after {
  content: "" !important;
  position: absolute !important;
  left: 28% !important;
  bottom: 8% !important;
  width: 58% !important;
  height: 16% !important;
  border-radius: 50% !important;
  background: radial-gradient(ellipse, rgba(32,243,160,.28), transparent 66%) !important;
  filter: blur(2px) !important;
  opacity: .6 !important;
  pointer-events: none !important;
}

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

#services .infra-module:not(:first-child) .infra-visual {
  width: 132px !important;
  height: 132px !important;
  min-width: 132px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: visible !important;
}

#services .infra-module:not(:first-child) .infra-visual img {
  width: 132px !important;
  height: 132px !important;
  object-fit: contain !important;
  mix-blend-mode: screen !important;
  filter: brightness(1.08) drop-shadow(0 0 20px rgba(32,243,160,.3)) !important;
  opacity: .98 !important;
}

/* Screen 3: solution bento, compact and illustrated */
#scenarios.ai-solutions {
  min-height: 100svh !important;
  height: auto !important;
  padding: 56px var(--rhythm-x) 60px !important;
  display: grid !important;
  grid-template-columns: minmax(290px, .33fr) minmax(0, .67fr) !important;
  align-items: center !important;
  gap: clamp(34px, 4.4vw, 76px) !important;
  background:
    radial-gradient(circle at 86% 12%, rgba(32, 243, 160, .08), transparent 24%),
    linear-gradient(118deg, #030505 0%, #080908 58%, #0a0a09 100%) !important;
}

#scenarios.ai-solutions::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  opacity: .18 !important;
  background:
    linear-gradient(128deg, transparent 0 58%, rgba(32,243,160,.08) 58.2%, transparent 59.3% 100%),
    radial-gradient(circle at 28% 78%, rgba(32,243,160,.18), transparent 24%) !important;
  z-index: -1 !important;
}

#scenarios .solution-glow {
  display: none !important;
}

#scenarios .solution-hero {
  max-width: 390px !important;
  min-width: 0 !important;
  margin: 0 !important;
  text-align: left !important;
}

#scenarios .solution-badge {
  margin: 0 0 20px !important;
}

#scenarios .solution-hero h2 {
  max-width: 390px !important;
  margin: 0 0 18px !important;
  color: #fff !important;
  font-size: clamp(38px, 3.55vw, 54px) !important;
  line-height: 1.12 !important;
  font-weight: 700 !important;
  text-align: left !important;
}

#scenarios .solution-subtitle {
  margin: 0 !important;
  max-width: 360px !important;
  color: var(--rhythm-muted) !important;
  font-size: var(--rhythm-sub) !important;
  line-height: 1.7 !important;
  text-align: left !important;
}

#scenarios .solution-stats {
  margin: 28px 0 0 !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  justify-content: flex-start !important;
}

#scenarios .solution-stats span {
  min-height: 34px !important;
  padding: 0 16px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  border: 1px solid rgba(157,225,203,.18) !important;
  border-radius: 999px !important;
  color: var(--rhythm-muted) !important;
  font-size: 13px !important;
  background: rgba(255,255,255,.02) !important;
}

#scenarios .solution-stats strong {
  color: #d4f5e9 !important;
  font-size: 17px !important;
}

#scenarios .solution-divider {
  display: none !important;
}

#scenarios .solution-board {
  width: 100% !important;
  height: min(560px, calc(100svh - 120px)) !important;
  min-height: 500px !important;
  display: grid !important;
  grid-template-columns: 1.35fr 1fr 1fr !important;
  grid-template-rows: repeat(2, minmax(0, 1fr)) !important;
  gap: 16px !important;
}

#scenarios .solution-card {
  position: relative !important;
  min-height: 0 !important;
  overflow: hidden !important;
  padding: 24px !important;
  border-radius: var(--rhythm-radius) !important;
  border: 1px solid rgba(32, 243, 160, .22) !important;
  background:
    radial-gradient(circle at 76% 24%, rgba(32,243,160,.14), transparent 34%),
    rgba(13, 42, 28, .58) !important;
  backdrop-filter: blur(18px) !important;
}

#scenarios .solution-card:first-child {
  grid-row: 1 / span 2 !important;
  grid-column: 1 !important;
}

#scenarios .solution-card:nth-child(2) { grid-column: 2 !important; grid-row: 1 !important; }
#scenarios .solution-card:nth-child(3) { grid-column: 3 !important; grid-row: 1 !important; }
#scenarios .solution-card:nth-child(4) { grid-column: 1 !important; grid-row: 2 !important; }
#scenarios .solution-card:nth-child(5) { grid-column: 2 !important; grid-row: 2 !important; }
#scenarios .solution-card:nth-child(6) { grid-column: 3 !important; grid-row: 2 !important; }

#scenarios .solution-card:first-child {
  display: flex !important;
  align-items: flex-end !important;
}

#scenarios .solution-visual {
  position: absolute !important;
  right: 22px !important;
  top: 18px !important;
  width: clamp(70px, 6vw, 108px) !important;
  height: clamp(70px, 6vw, 108px) !important;
  opacity: .94 !important;
}

#scenarios .solution-card:first-child .solution-visual {
  width: clamp(116px, 10vw, 170px) !important;
  height: clamp(116px, 10vw, 170px) !important;
  top: 40px !important;
  right: 36px !important;
}

#scenarios .solution-icon {
  width: 100% !important;
  height: 100% !important;
  stroke: var(--rhythm-green) !important;
  stroke-width: 2.5 !important;
  fill: none !important;
  filter: drop-shadow(0 0 18px rgba(32,243,160,.32)) !important;
}

#scenarios .solution-content {
  position: relative !important;
  z-index: 2 !important;
  max-width: 84% !important;
}

#scenarios .solution-card:first-child .solution-content {
  max-width: 78% !important;
}

#scenarios .solution-content span {
  display: block !important;
  margin-bottom: 12px !important;
  color: var(--rhythm-green-soft) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: .12em !important;
}

#scenarios .solution-content h3 {
  margin: 0 0 10px !important;
  color: #fff !important;
  font-size: clamp(22px, 1.55vw, 28px) !important;
  line-height: 1.18 !important;
  font-weight: 700 !important;
}

#scenarios .solution-content p {
  margin: 0 !important;
  color: var(--rhythm-muted) !important;
  font-size: var(--rhythm-text) !important;
  line-height: 1.65 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 3 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

/* Screen 4: core technology, deep blue and denser cards */
#capability.core-tech-section {
  min-height: 100svh !important;
  height: auto !important;
  padding: 70px 0 !important;
  background:
    radial-gradient(circle at 78% 40%, rgba(32, 243, 160, .09), transparent 26%),
    radial-gradient(circle at 45% 50%, rgba(20, 80, 120, .18), transparent 38%),
    linear-gradient(180deg, #04111e 0%, #071625 56%, #04101a 100%) !important;
}

#capability .capability-stage {
  width: var(--rhythm-container) !important;
  min-height: calc(100svh - 140px) !important;
  margin: 0 auto !important;
  display: grid !important;
  grid-template-columns: minmax(430px, .44fr) minmax(0, .56fr) !important;
  align-items: center !important;
  gap: clamp(42px, 5.2vw, 86px) !important;
}

#capability .capability-copy {
  min-width: 0 !important;
  max-width: 720px !important;
}

#capability .core-badge {
  margin-bottom: 24px !important;
}

#capability .capability-copy h2 {
  margin: 0 0 22px !important;
  color: #fff !important;
  font-size: var(--rhythm-title-tight) !important;
  line-height: 1.18 !important;
  font-weight: 700 !important;
  max-width: 690px !important;
  white-space: normal !important;
  word-break: keep-all !important;
}

#capability .capability-copy h2 br {
  display: none !important;
}

#capability .capability-copy p {
  margin: 0 0 30px !important;
  max-width: 620px !important;
  color: var(--rhythm-muted) !important;
  font-size: var(--rhythm-sub) !important;
  line-height: 1.76 !important;
}

#capability .core-cta {
  display: inline-flex !important;
  align-items: center !important;
  min-height: 46px !important;
  padding: 0 28px !important;
  border: 1px solid rgba(32,243,160,.7) !important;
  border-radius: var(--rhythm-radius) !important;
  color: var(--rhythm-green) !important;
  text-decoration: none !important;
  font-size: 15px !important;
}

#capability .tech-console.core-card-grid {
  width: 100% !important;
  min-height: 520px !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 16px !important;
  padding: 18px !important;
  border-radius: 18px !important;
  background: rgba(13, 31, 20, .62) !important;
  border: 1px solid rgba(157,225,203,.08) !important;
  box-shadow: 0 30px 90px rgba(0, 0, 0, .28) !important;
}

#capability .core-tech-card {
  min-height: 230px !important;
  padding: 28px !important;
  border-radius: var(--rhythm-radius) !important;
  background: rgba(10, 40, 24, .74) !important;
  border: 1px solid rgba(32, 243, 160, .16) !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}

#capability .tech-icon {
  width: 58px !important;
  height: 58px !important;
  margin: 0 0 18px !important;
  color: var(--rhythm-green) !important;
  stroke: currentColor !important;
  stroke-width: 1.8 !important;
  fill: none !important;
  filter: drop-shadow(0 0 20px rgba(32,243,160,.35)) !important;
}

#capability .core-tech-card span {
  color: rgba(32,243,160,.46) !important;
  font-size: 13px !important;
  margin-bottom: 10px !important;
}

#capability .core-tech-card h3 {
  margin: 0 0 12px !important;
  color: #fff !important;
  font-size: clamp(21px, 1.55vw, 28px) !important;
  line-height: 1.18 !important;
}

#capability .core-tech-card p {
  margin: 0 0 12px !important;
  color: var(--rhythm-green-soft) !important;
  font-size: var(--rhythm-text) !important;
  line-height: 1.55 !important;
}

#capability .core-tech-card em {
  margin-top: auto !important;
  padding-top: 12px !important;
  border-top: 1px solid rgba(32,243,160,.14) !important;
  color: rgba(139,191,170,.62) !important;
  font-style: normal !important;
  font-size: var(--rhythm-small) !important;
  line-height: 1.6 !important;
}

/* Screen 5: delivery timeline, different rhythm from cards */
#training.ai-delivery {
  min-height: 100svh !important;
  height: auto !important;
  padding: 70px 0 !important;
  background:
    radial-gradient(circle at 18% 28%, rgba(32,243,160,.08), transparent 28%),
    linear-gradient(180deg, #0d0d0c 0%, #060706 100%) !important;
}

#training .delivery-stage {
  width: var(--rhythm-container) !important;
  min-height: calc(100svh - 140px) !important;
  margin: 0 auto !important;
  display: grid !important;
  grid-template-columns: minmax(360px, .4fr) minmax(0, .6fr) !important;
  gap: clamp(46px, 6vw, 100px) !important;
  align-items: center !important;
}

#training .stage-head {
  max-width: 620px !important;
}

#training .stage-head .section-mark,
#resources .resource-main .section-mark,
#about .section-mark {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  color: var(--rhythm-green) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  margin: 0 0 24px !important;
}

#training .stage-head .section-mark::before,
#resources .resource-main .section-mark::before,
#about .section-mark::before {
  content: "" !important;
  width: 10px !important;
  height: 10px !important;
  border-radius: 50% !important;
  background: var(--rhythm-green) !important;
  box-shadow: 0 0 18px rgba(32,243,160,.55) !important;
}

#training .stage-head h2,
#resources .resource-main h2,
#about .about-narrative h2 {
  margin: 0 0 22px !important;
  color: #fff !important;
  font-size: var(--rhythm-title-tight) !important;
  line-height: 1.18 !important;
  font-weight: 700 !important;
}

#training .stage-head p,
#resources .resource-main p,
#about .about-narrative p {
  margin: 0 !important;
  color: var(--rhythm-muted) !important;
  font-size: var(--rhythm-sub) !important;
  line-height: 1.78 !important;
}

#training .delivery-track {
  position: relative !important;
  display: grid !important;
  gap: 18px !important;
  padding-left: 46px !important;
}

#training .delivery-track::before {
  content: "" !important;
  position: absolute !important;
  left: 16px !important;
  top: 18px !important;
  bottom: 18px !important;
  width: 1px !important;
  background: linear-gradient(180deg, transparent, rgba(32,243,160,.75), transparent) !important;
}

#training .delivery-track article {
  position: relative !important;
  min-height: 118px !important;
  display: grid !important;
  grid-template-columns: 54px minmax(0, 1fr) !important;
  grid-template-areas:
    "icon num"
    "icon title"
    "icon text" !important;
  column-gap: 20px !important;
  align-content: center !important;
  padding: 22px 26px !important;
  border-radius: var(--rhythm-radius) !important;
  background: rgba(255, 255, 255, .022) !important;
  border: 1px solid rgba(157,225,203,.13) !important;
  backdrop-filter: blur(18px) !important;
}

#training .delivery-track article::before {
  content: "" !important;
  position: absolute !important;
  left: -36px !important;
  top: 50% !important;
  width: 12px !important;
  height: 12px !important;
  margin-top: -6px !important;
  border-radius: 50% !important;
  background: var(--rhythm-green) !important;
  box-shadow: 0 0 22px rgba(32,243,160,.6) !important;
}

#training .delivery-icon {
  grid-area: icon !important;
  width: 48px !important;
  height: 48px !important;
  align-self: center !important;
  stroke: var(--rhythm-green) !important;
  stroke-width: 1.9 !important;
  fill: none !important;
  filter: drop-shadow(0 0 18px rgba(32,243,160,.28)) !important;
}

#training .delivery-track article span {
  grid-area: num !important;
  color: var(--rhythm-green-soft) !important;
  font-size: 13px !important;
  margin-bottom: 4px !important;
}

#training .delivery-track article h3 {
  grid-area: title !important;
  margin: 0 0 6px !important;
  color: #fff !important;
  font-size: clamp(22px, 1.55vw, 28px) !important;
  line-height: 1.18 !important;
}

#training .delivery-track article p {
  grid-area: text !important;
  margin: 0 !important;
  color: var(--rhythm-muted) !important;
  font-size: var(--rhythm-text) !important;
  line-height: 1.6 !important;
}

/* Screen 6: resources as side tabs + panels */
#resources.ai-resources {
  min-height: 100svh !important;
  height: auto !important;
  padding: 70px 0 !important;
  background:
    radial-gradient(circle at 72% 34%, rgba(32,243,160,.12), transparent 30%),
    linear-gradient(180deg, #07140e 0%, #08110d 100%) !important;
}

#resources .resource-stage {
  width: var(--rhythm-container) !important;
  min-height: calc(100svh - 140px) !important;
  margin: 0 auto !important;
  display: grid !important;
  grid-template-columns: minmax(340px, .38fr) minmax(0, .62fr) !important;
  gap: clamp(44px, 5.8vw, 92px) !important;
  align-items: center !important;
}

#resources .resource-main {
  max-width: 620px !important;
}

#resources .resource-tabs {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 10px !important;
  margin-top: 30px !important;
}

#resources .resource-tabs button {
  min-height: 42px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(32,243,160,.22) !important;
  background: rgba(255,255,255,.02) !important;
  color: var(--rhythm-muted) !important;
  font-size: 14px !important;
}

#resources .resource-tabs button.is-active {
  border-color: rgba(32,243,160,.74) !important;
  color: var(--rhythm-green) !important;
  background: rgba(32,243,160,.08) !important;
}

#resources .resource-panels {
  display: grid !important;
  gap: 16px !important;
}

#resources .resource-panels article {
  min-height: 158px !important;
  display: grid !important;
  grid-template-columns: 64px minmax(0, 1fr) !important;
  grid-template-areas:
    "icon label"
    "icon title"
    "icon text" !important;
  column-gap: 22px !important;
  align-content: center !important;
  padding: 24px !important;
  border-radius: var(--rhythm-radius) !important;
  border: 1px solid rgba(157,225,203,.14) !important;
  background: rgba(255,255,255,.025) !important;
  opacity: .72 !important;
  transform: none !important;
}

#resources .resource-panels article.is-active {
  opacity: 1 !important;
  border-color: rgba(32,243,160,.54) !important;
  background: rgba(13,42,28,.54) !important;
}

#resources .resource-icon {
  grid-area: icon !important;
  width: 56px !important;
  height: 56px !important;
  align-self: center !important;
  stroke: var(--rhythm-green) !important;
  fill: none !important;
  stroke-width: 1.8 !important;
  filter: drop-shadow(0 0 20px rgba(32,243,160,.32)) !important;
}

#resources .resource-panels article span {
  grid-area: label !important;
  color: var(--rhythm-green-soft) !important;
  font-size: 13px !important;
  margin: 0 0 4px !important;
}

#resources .resource-panels article h3 {
  grid-area: title !important;
  margin: 0 0 8px !important;
  color: #fff !important;
  font-size: clamp(22px, 1.55vw, 28px) !important;
  line-height: 1.18 !important;
}

#resources .resource-panels article p {
  grid-area: text !important;
  margin: 0 !important;
  color: var(--rhythm-muted) !important;
  font-size: var(--rhythm-text) !important;
}

/* Screen 7: about, NIO/Xpeng style intro + cinematic card */
#about.ai-about {
  min-height: 100svh !important;
  height: auto !important;
  padding: 74px 0 !important;
  background:
    radial-gradient(circle at 72% 46%, rgba(255,255,255,.07), transparent 32%),
    linear-gradient(180deg, #0b0c0b 0%, #070907 100%) !important;
}

#about .about-stage {
  width: var(--rhythm-container) !important;
  min-height: calc(100svh - 148px) !important;
  margin: 0 auto !important;
  display: grid !important;
  grid-template-columns: minmax(400px, .42fr) minmax(0, .58fr) !important;
  gap: clamp(48px, 6vw, 110px) !important;
  align-items: center !important;
}

#about .about-narrative {
  max-width: 660px !important;
  text-align: left !important;
}

#about .about-cinema {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  min-height: min(430px, calc(100svh - 190px)) !important;
  border-radius: var(--rhythm-radius) !important;
  border: 1px solid rgba(255,255,255,.13) !important;
  background:
    radial-gradient(circle at 52% 42%, rgba(32,243,160,.14), transparent 22%),
    linear-gradient(140deg, rgba(255,255,255,.07), rgba(255,255,255,.012) 42%, rgba(32,243,160,.05)) !important;
  overflow: hidden !important;
  cursor: pointer !important;
}

#about .about-cinema-mark {
  position: absolute !important;
  inset: 16% 20% !important;
  opacity: .42 !important;
}

#about .about-cinema-mark span {
  position: absolute !important;
  left: 50% !important;
  bottom: 10% !important;
  width: 1px !important;
  height: 58% !important;
  transform-origin: bottom center !important;
  background: rgba(157,225,203,.42) !important;
}

#about .about-cinema-mark span:nth-child(1) { transform: rotate(-48deg); }
#about .about-cinema-mark span:nth-child(2) { transform: rotate(-24deg); }
#about .about-cinema-mark span:nth-child(3) { transform: rotate(0deg); }
#about .about-cinema-mark span:nth-child(4) { transform: rotate(24deg); }
#about .about-cinema-mark span:nth-child(5) { transform: rotate(48deg); }

#about .about-cinema::after {
  content: "播放公司介绍";
  position: absolute;
  left: 50%;
  bottom: 30px;
  transform: translateX(-50%);
  color: rgba(255,255,255,.7);
  font-size: 13px;
}

/* Footer: DJI-like information density */
.site-footer.dji-footer {
  background: #242524 !important;
  color: rgba(255,255,255,.72) !important;
  padding: 54px 0 30px !important;
}

.site-footer .container {
  width: var(--rhythm-container) !important;
  max-width: var(--rhythm-container) !important;
}

.footer-download {
  min-height: 86px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 26px !important;
  padding-bottom: 34px !important;
  border-bottom: 1px solid rgba(255,255,255,.14) !important;
}

.footer-download p {
  margin: 0 !important;
  color: rgba(255,255,255,.84) !important;
  font-size: 18px !important;
  font-weight: 600 !important;
}

.footer-download a {
  min-height: 42px !important;
  padding: 0 28px !important;
  display: inline-flex !important;
  align-items: center !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.1) !important;
  color: #fff !important;
  text-decoration: none !important;
}

.footer-mega {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: clamp(24px, 4vw, 62px) !important;
  padding: 38px 0 48px !important;
}

.footer-column {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}

.footer-column h3 {
  margin: 18px 0 4px !important;
  color: #fff !important;
  font-size: 15px !important;
  line-height: 1.2 !important;
}

.footer-column h3:first-child {
  margin-top: 0 !important;
}

.footer-column a,
.footer-column span {
  color: rgba(255,255,255,.66) !important;
  font-size: 14px !important;
  line-height: 1.45 !important;
  text-decoration: none !important;
}

.footer-mailbox {
  height: 38px !important;
  margin-top: 6px !important;
  display: flex !important;
  align-items: center !important;
  border: 1px solid rgba(255,255,255,.22) !important;
}

.footer-mailbox span {
  flex: 1 !important;
  padding: 0 12px !important;
}

.footer-mailbox button {
  width: 42px !important;
  height: 100% !important;
  border: 0 !important;
  background: rgba(255,255,255,.18) !important;
  color: #fff !important;
}

.footer-brandbar {
  display: grid !important;
  grid-template-columns: 120px minmax(0, 1fr) auto !important;
  gap: 30px !important;
  align-items: center !important;
  padding: 24px 0 !important;
  border-top: 1px solid rgba(255,255,255,.14) !important;
  border-bottom: 1px solid rgba(255,255,255,.14) !important;
}

.footer-brandbar img {
  width: 104px !important;
  height: auto !important;
  filter: brightness(0) invert(1) !important;
}

.footer-brandbar nav,
.footer-social {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 22px !important;
}

.footer-brandbar a,
.footer-social a {
  color: rgba(255,255,255,.72) !important;
  font-size: 14px !important;
  text-decoration: none !important;
}

.footer-social a {
  width: 34px !important;
  height: 34px !important;
  border-radius: 50% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(255,255,255,.1) !important;
  font-size: 12px !important;
}

.footer-legal {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 24px !important;
  padding-top: 22px !important;
}

.footer-records {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 0 !important;
  color: rgba(255,255,255,.48) !important;
}

.footer-records a,
.footer-records span {
  display: inline-flex !important;
  align-items: center !important;
  margin: 0 !important;
  color: rgba(255,255,255,.48) !important;
  font-size: 14px !important;
  line-height: 1.7 !important;
  text-decoration: none !important;
}

.footer-records a:not(:last-child)::after,
.footer-records span:not(:last-child)::after {
  content: "|" !important;
  margin: 0 18px !important;
  color: rgba(255,255,255,.2) !important;
}

.footer-locale {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  color: rgba(255,255,255,.86) !important;
  font-weight: 700 !important;
}

@media (max-width: 1360px) and (min-width: 1024px) {
  :root {
    --rhythm-x: 42px;
    --rhythm-title: clamp(34px, 3vw, 46px);
    --rhythm-title-tight: clamp(31px, 2.55vw, 40px);
    --rhythm-card-title: clamp(22px, 1.75vw, 28px);
  }

  #services .infrastructure-section,
  #training .delivery-stage,
  #resources .resource-stage,
  #about .about-stage,
  #capability .capability-stage {
    width: min(1180px, calc(100% - 72px)) !important;
  }

  #services .infra-showcase {
    min-height: 450px !important;
    gap: 14px !important;
  }

  #services .infra-module:first-child {
    padding: 28px !important;
    grid-template-columns: minmax(0, .62fr) 205px !important;
  }

  #services .infra-module:first-child .infra-visual-base {
    width: 205px !important;
    height: 205px !important;
  }

  #services .infra-module:not(:first-child) {
    grid-template-columns: minmax(0, 1fr) 96px !important;
    padding: 20px 24px !important;
  }

  #services .infra-module:not(:first-child) .infra-visual,
  #services .infra-module:not(:first-child) .infra-visual img {
    width: 96px !important;
    height: 96px !important;
    min-width: 96px !important;
  }

  #scenarios.ai-solutions {
    gap: 34px !important;
  }

  #scenarios .solution-board {
    min-height: 450px !important;
    height: min(480px, calc(100svh - 100px)) !important;
  }
}

@media (max-width: 1023px) {
  :root {
    --rhythm-x: 24px;
    --rhythm-title: clamp(32px, 9vw, 42px);
    --rhythm-title-tight: clamp(30px, 8vw, 38px);
    --rhythm-card-title: clamp(25px, 7vw, 34px);
  }

  #services.ai-origin,
  #scenarios.ai-solutions,
  #capability.core-tech-section,
  #training.ai-delivery,
  #resources.ai-resources,
  #about.ai-about {
    min-height: auto !important;
    height: auto !important;
    padding: 58px 24px !important;
    display: block !important;
  }

  #services .infrastructure-section,
  #capability .capability-stage,
  #training .delivery-stage,
  #resources .resource-stage,
  #about .about-stage {
    width: 100% !important;
    min-height: auto !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }

  #services .infra-metrics {
    flex-wrap: wrap !important;
    row-gap: 12px !important;
  }

  #services .infra-showcase,
  #scenarios .solution-board {
    height: auto !important;
    min-height: 0 !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: none !important;
    gap: 14px !important;
  }

  #services .infra-module,
  #services .infra-module:first-child,
  #services .infra-module:not(:first-child) {
    grid-column: auto !important;
    grid-row: auto !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 98px !important;
    min-height: 178px !important;
    padding: 24px !important;
  }

  #services .infra-module:first-child {
    grid-template-columns: 1fr !important;
    min-height: 420px !important;
  }

  #services .infra-module:first-child .infra-visual-base {
    justify-self: center !important;
    width: 210px !important;
    height: 210px !important;
  }

  #services .infra-module:not(:first-child) .infra-visual,
  #services .infra-module:not(:first-child) .infra-visual img {
    display: block !important;
    width: 98px !important;
    height: 98px !important;
    min-width: 98px !important;
  }

  #scenarios.ai-solutions {
    grid-template-columns: 1fr !important;
  }

  #scenarios .solution-hero {
    max-width: 100% !important;
  }

  #scenarios .solution-hero h2 {
    max-width: 100% !important;
    font-size: clamp(34px, 10vw, 44px) !important;
  }

  #scenarios .solution-card,
  #scenarios .solution-card:first-child,
  #scenarios .solution-card:nth-child(n) {
    grid-column: auto !important;
    grid-row: auto !important;
    min-height: 188px !important;
  }

  #capability .tech-console.core-card-grid {
    width: 100% !important;
    min-height: auto !important;
    grid-template-columns: 1fr !important;
  }

  #capability .capability-copy h2 br {
    display: none !important;
  }

  #training .delivery-track {
    padding-left: 32px !important;
  }

  #resources .resource-tabs {
    grid-template-columns: 1fr !important;
  }

  #resources .resource-panels article {
    grid-template-columns: 54px minmax(0, 1fr) !important;
  }

  #about .about-cinema {
    min-height: 300px !important;
  }

  .footer-mega,
  .footer-brandbar,
  .footer-legal {
    grid-template-columns: 1fr !important;
    display: grid !important;
  }

  .footer-legal {
    align-items: start !important;
  }
}

/* 2026-05-30 final homepage rhythm lock
   Keep the hero carousel assets intact; rebuild the lower homepage as a paced brand system. */
@media (min-width: 1024px) {
  :root {
    --sws-page-x: clamp(44px, 5vw, 96px);
    --sws-container: min(1480px, calc(100% - (var(--sws-page-x) * 2)));
    --sws-title: clamp(34px, 2.65vw, 46px);
    --sws-hero-title: clamp(42px, 3.75vw, 60px);
    --sws-card-title: clamp(22px, 1.55vw, 28px);
    --sws-copy: clamp(13px, .86vw, 15px);
    --sws-small: clamp(11px, .72vw, 13px);
    --sws-green: #20f3a0;
    --sws-green-soft: #5dcaa5;
    --sws-muted: #8bbfaa;
    --sws-line: rgba(157, 255, 220, .16);
    --sws-radius: 12px;
  }

  html,
  body {
    background: #020605 !important;
    overflow-x: hidden !important;
  }

  .ai-section {
    scroll-margin-top: 78px !important;
  }

  .hero-intelligence-core,
  .hero-metrics,
  .hero-slide.agent-slide::before,
  .hero-slide.agent-slide::after,
  .agent-slide .hero-stage::before,
  .agent-slide .hero-stage::after,
  .agent-slide .hero-content::before,
  .agent-slide .hero-content::after {
    display: none !important;
    content: none !important;
  }

  .ai-home {
    background:
      linear-gradient(180deg, #020605 0%, #020605 22%, #04111e 48%, #080909 66%, #06140d 100%) !important;
  }

  #services.ai-origin,
  #scenarios.ai-solutions,
  #capability.core-tech-section,
  #training.ai-delivery,
  #resources.ai-resources,
  #about.ai-about {
    position: relative !important;
    min-height: 100svh !important;
    height: auto !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  #services.ai-origin::before,
  #scenarios.ai-solutions::before,
  #capability.core-tech-section::before,
  #training.ai-delivery::before,
  #resources.ai-resources::before,
  #about.ai-about::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    pointer-events: none !important;
    background-image: radial-gradient(circle, rgba(157, 255, 220, .14) 1px, transparent 1.5px) !important;
    background-size: 24px 24px !important;
    opacity: .18 !important;
    mask-image: linear-gradient(180deg, transparent, #000 16%, #000 84%, transparent) !important;
  }

  #services.ai-origin {
    padding: clamp(54px, 6svh, 72px) 0 clamp(40px, 5svh, 60px) !important;
    background:
      radial-gradient(circle at 72% 23%, rgba(32, 243, 160, .13), transparent 34%),
      radial-gradient(circle at 18% 76%, rgba(32, 243, 160, .07), transparent 28%),
      linear-gradient(180deg, #020605 0%, #06140d 100%) !important;
  }

  #services .services-depth-field {
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    pointer-events: none !important;
    opacity: .42 !important;
    overflow: hidden !important;
  }

  #services .depth-layer,
  #services .depth-layer::before,
  #services .depth-layer::after {
    position: absolute !important;
    content: "" !important;
    inset: -8% !important;
    background:
      linear-gradient(118deg, transparent 0 21%, rgba(32, 243, 160, .09) 21.2%, transparent 22.1% 58%, rgba(32, 243, 160, .07) 58.4%, transparent 59.2%),
      radial-gradient(circle at 18% 28%, rgba(32, 243, 160, .2), transparent 9%),
      radial-gradient(circle at 77% 64%, rgba(32, 243, 160, .18), transparent 12%) !important;
    animation: swsDepthDrift 18s ease-in-out infinite alternate !important;
  }

  #services .depth-layer-mid {
    opacity: .56 !important;
    transform: scale(1.08) rotate(-4deg) !important;
    animation-duration: 24s !important;
  }

  #services .depth-layer-front {
    opacity: .34 !important;
    transform: scale(1.16) rotate(5deg) !important;
    animation-duration: 28s !important;
  }

  @keyframes swsDepthDrift {
    from { transform: translate3d(-1.2%, .4%, 0) scale(1); }
    to { transform: translate3d(1.4%, -1%, 0) scale(1.035); }
  }

  #services .infrastructure-section {
    position: relative !important;
    z-index: 2 !important;
    width: var(--sws-container) !important;
    min-height: calc(100svh - 112px) !important;
    height: auto !important;
    margin: 0 auto !important;
    padding: 0 !important;
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
    gap: clamp(22px, 3svh, 34px) !important;
  }

  #services .infra-hero {
    text-align: center !important;
    max-width: 820px !important;
    margin: 0 auto !important;
    padding: 0 !important;
  }

  #services .infra-pill {
    margin: 0 auto 12px !important;
    padding: 6px 22px !important;
    font-size: var(--sws-small) !important;
    border-color: rgba(32, 243, 160, .62) !important;
    color: #9fe1cb !important;
    background: rgba(32, 243, 160, .035) !important;
  }

  #services .infra-hero h2 {
    font-size: var(--sws-title) !important;
    line-height: 1.08 !important;
    color: #fff !important;
    margin: 0 0 9px !important;
    letter-spacing: .01em !important;
  }

  #services .infra-hero p {
    max-width: 720px !important;
    margin: 0 auto !important;
    color: var(--sws-green-soft) !important;
    font-size: var(--sws-copy) !important;
    line-height: 1.72 !important;
  }

  #services .infra-metrics {
    display: none !important;
  }

  #services .infra-showcase {
    width: 100% !important;
    height: min(560px, calc(100svh - 212px)) !important;
    min-height: 455px !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr) !important;
    grid-template-rows: repeat(3, minmax(0, 1fr)) !important;
    gap: 18px 22px !important;
    align-items: stretch !important;
  }

  #services .infra-module {
    min-width: 0 !important;
    min-height: 0 !important;
    border-radius: var(--sws-radius) !important;
    border: 1px solid rgba(157, 255, 220, .14) !important;
    background:
      linear-gradient(130deg, rgba(255, 255, 255, .052), rgba(255, 255, 255, .015) 52%, rgba(32, 243, 160, .08)) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 24px 70px rgba(0, 0, 0, .25) !important;
    backdrop-filter: blur(18px) !important;
    overflow: hidden !important;
  }

  #services .infra-module:hover {
    border-color: rgba(32, 243, 160, .45) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 0 0 1px rgba(32, 243, 160, .08), 0 28px 80px rgba(0, 0, 0, .36) !important;
  }

  #services .infra-module:first-child {
    grid-column: 1 !important;
    grid-row: 1 / span 3 !important;
    display: grid !important;
    grid-template-columns: minmax(0, .56fr) minmax(230px, .44fr) !important;
    align-items: center !important;
    gap: 16px !important;
    padding: clamp(28px, 2.7vw, 42px) !important;
  }

  #services .infra-module:not(:first-child) {
    grid-column: 2 !important;
    grid-row: auto !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 132px !important;
    align-items: center !important;
    gap: 18px !important;
    padding: clamp(18px, 1.7vw, 25px) clamp(22px, 2vw, 30px) !important;
  }

  #services .infra-copy {
    min-width: 0 !important;
    position: relative !important;
    z-index: 2 !important;
  }

  #services .infra-copy span {
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
    margin-bottom: 12px !important;
    color: var(--sws-green-soft) !important;
    font-size: var(--sws-small) !important;
    font-weight: 600 !important;
    letter-spacing: .08em !important;
  }

  #services .infra-copy span::after {
    content: "" !important;
    width: 44px !important;
    height: 1px !important;
    background: linear-gradient(90deg, var(--sws-green), transparent) !important;
  }

  #services .infra-copy h3 {
    color: #fff !important;
    font-size: var(--sws-card-title) !important;
    line-height: 1.14 !important;
    margin: 0 0 13px !important;
    white-space: normal !important;
    word-break: keep-all !important;
  }

  #services .infra-module:not(:first-child) .infra-copy h3 {
    color: #d4f5e9 !important;
  }

  #services .infra-copy p {
    color: var(--sws-muted) !important;
    font-size: var(--sws-copy) !important;
    line-height: 1.72 !important;
    margin: 0 !important;
    max-width: 620px !important;
  }

  #services .infra-copy ul {
    margin: 22px 0 0 !important;
    padding: 0 !important;
    display: grid !important;
    gap: 10px !important;
  }

  #services .infra-copy li {
    color: rgba(255, 255, 255, .92) !important;
    font-size: var(--sws-copy) !important;
    line-height: 1.4 !important;
  }

  #services .infra-module:first-child .infra-visual-base {
    position: relative !important;
    width: clamp(230px, 18vw, 285px) !important;
    height: clamp(230px, 18vw, 285px) !important;
    justify-self: end !important;
    align-self: end !important;
    overflow: visible !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  #services .infra-module:first-child .infra-visual-base::before,
  #services .infra-module:first-child .infra-visual-base::after {
    display: none !important;
    content: none !important;
  }

  #services .infra-orb-static,
  #services .infra-orb-spin {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  #services .infra-orb-static {
    z-index: 1 !important;
    opacity: .95 !important;
    filter: drop-shadow(0 0 32px rgba(32, 243, 160, .35)) !important;
  }

  #services .infra-orb-spin {
    z-index: 2 !important;
    opacity: .62 !important;
    clip-path: ellipse(35% 34% at 51% 42%) !important;
    transform-origin: 51% 42% !important;
    mix-blend-mode: screen !important;
    animation: swsGlobeSurface 8.5s linear infinite !important;
  }

  @keyframes swsGlobeSurface {
    0% { transform: translateX(-8px) scaleX(.88) scaleY(1.01); opacity: .42; }
    35% { transform: translateX(3px) scaleX(1.02) scaleY(1); opacity: .72; }
    70% { transform: translateX(9px) scaleX(.95) scaleY(.99); opacity: .54; }
    100% { transform: translateX(-8px) scaleX(.88) scaleY(1.01); opacity: .42; }
  }

  #services .infra-module:not(:first-child) .infra-visual,
  #services .infra-module:not(:first-child) .infra-visual img {
    width: 132px !important;
    height: 132px !important;
    min-width: 132px !important;
    object-fit: contain !important;
    object-position: center !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
    mix-blend-mode: screen !important;
  }

  #scenarios.ai-solutions {
    padding: clamp(62px, 6svh, 84px) var(--sws-page-x) !important;
    display: grid !important;
    grid-template-columns: minmax(300px, .30fr) minmax(0, .70fr) !important;
    align-items: center !important;
    gap: clamp(36px, 4.4vw, 70px) !important;
    background:
      radial-gradient(circle at 86% 20%, rgba(32, 243, 160, .1), transparent 28%),
      linear-gradient(135deg, #020605 0%, #050706 58%, #0c0c0c 100%) !important;
  }

  #scenarios .solution-glow {
    opacity: .38 !important;
  }

  #scenarios .solution-hero {
    max-width: 440px !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: left !important;
  }

  #scenarios .solution-badge {
    display: inline-flex !important;
    margin: 0 0 18px !important;
    font-size: var(--sws-small) !important;
  }

  #scenarios .solution-hero h2 {
    color: #fff !important;
    font-size: clamp(36px, 3.05vw, 48px) !important;
    line-height: 1.14 !important;
    margin: 0 0 18px !important;
    text-align: left !important;
    letter-spacing: .01em !important;
  }

  #scenarios .solution-subtitle {
    color: var(--sws-muted) !important;
    font-size: var(--sws-copy) !important;
    line-height: 1.74 !important;
    text-align: left !important;
    margin: 0 !important;
  }

  #scenarios .solution-stats {
    margin: 22px 0 0 !important;
    justify-content: flex-start !important;
    gap: 10px !important;
  }

  #scenarios .solution-stats span {
    font-size: var(--sws-small) !important;
    padding: 8px 15px !important;
  }

  #scenarios .solution-divider {
    display: none !important;
  }

  #scenarios .solution-board {
    width: 100% !important;
    height: min(568px, calc(100svh - 128px)) !important;
    min-height: 460px !important;
    display: grid !important;
    grid-template-columns: 1.06fr .78fr .78fr !important;
    grid-template-rows: repeat(3, minmax(0, 1fr)) !important;
    gap: 14px !important;
    align-self: center !important;
  }

  #scenarios .solution-card,
  #scenarios .solution-card:first-child,
  #scenarios .solution-card:nth-child(2),
  #scenarios .solution-card:nth-child(3),
  #scenarios .solution-card:nth-child(4),
  #scenarios .solution-card:nth-child(5),
  #scenarios .solution-card:nth-child(6) {
    min-width: 0 !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
    border-radius: var(--sws-radius) !important;
    padding: 20px 22px !important;
    overflow: hidden !important;
    border: 1px solid rgba(32, 243, 160, .18) !important;
    background:
      linear-gradient(140deg, rgba(32, 243, 160, .08), rgba(255, 255, 255, .015) 54%, rgba(32, 243, 160, .045)) !important;
  }

  #scenarios .solution-card:first-child { grid-column: 1 !important; grid-row: 1 / span 2 !important; }
  #scenarios .solution-card:nth-child(2) { grid-column: 2 !important; grid-row: 1 !important; }
  #scenarios .solution-card:nth-child(3) { grid-column: 3 !important; grid-row: 1 !important; }
  #scenarios .solution-card:nth-child(4) { grid-column: 1 !important; grid-row: 3 !important; }
  #scenarios .solution-card:nth-child(5) { grid-column: 2 !important; grid-row: 2 / span 2 !important; }
  #scenarios .solution-card:nth-child(6) { grid-column: 3 !important; grid-row: 2 / span 2 !important; }

  #scenarios .solution-card:hover {
    border-color: rgba(32, 243, 160, .5) !important;
    transform: translateY(-4px) !important;
  }

  #scenarios .solution-visual {
    display: block !important;
    position: absolute !important;
    right: 18px !important;
    top: 16px !important;
    width: 78px !important;
    height: 78px !important;
    opacity: .9 !important;
  }

  #scenarios .solution-card:first-child .solution-visual,
  #scenarios .solution-card:nth-child(5) .solution-visual,
  #scenarios .solution-card:nth-child(6) .solution-visual {
    width: 98px !important;
    height: 98px !important;
  }

  #scenarios .solution-icon {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    stroke: var(--sws-green) !important;
    fill: none !important;
    stroke-width: 3 !important;
    opacity: .92 !important;
    filter: drop-shadow(0 0 18px rgba(32, 243, 160, .34)) !important;
  }

  #scenarios .solution-content {
    position: relative !important;
    z-index: 2 !important;
    margin-top: auto !important;
    padding-right: 0 !important;
  }

  #scenarios .solution-card span {
    display: block !important;
    color: var(--sws-green-soft) !important;
    font-size: var(--sws-small) !important;
    letter-spacing: .24em !important;
    margin-bottom: 10px !important;
  }

  #scenarios .solution-card h3,
  #scenarios .solution-card:first-child h3,
  #scenarios .solution-card:nth-child(4) h3,
  #scenarios .solution-card:nth-child(5) h3,
  #scenarios .solution-card:nth-child(6) h3 {
    color: #fff !important;
    font-size: clamp(18px, 1.25vw, 23px) !important;
    line-height: 1.2 !important;
    margin: 0 0 8px !important;
    white-space: normal !important;
  }

  #scenarios .solution-card p,
  #scenarios .solution-card:first-child p,
  #scenarios .solution-card:nth-child(4) p,
  #scenarios .solution-card:nth-child(5) p,
  #scenarios .solution-card:nth-child(6) p {
    color: var(--sws-muted) !important;
    font-size: var(--sws-copy) !important;
    line-height: 1.62 !important;
    margin: 0 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }

  #capability.core-tech-section {
    padding: clamp(64px, 7svh, 86px) 0 !important;
    background:
      radial-gradient(ellipse at 68% 46%, rgba(29, 158, 117, .12) 0%, transparent 48%),
      linear-gradient(180deg, #04111e 0%, #061521 100%) !important;
  }

  #capability .capability-stage {
    width: var(--sws-container) !important;
    min-height: calc(100svh - 150px) !important;
    height: auto !important;
    margin: 0 auto !important;
    display: grid !important;
    grid-template-columns: minmax(410px, .43fr) minmax(0, .57fr) !important;
    gap: clamp(44px, 5vw, 86px) !important;
    align-items: center !important;
  }

  #capability .capability-copy h2 {
    max-width: 760px !important;
    color: #fff !important;
    font-size: clamp(36px, 3.05vw, 50px) !important;
    line-height: 1.17 !important;
    margin: 0 0 22px !important;
    word-break: keep-all !important;
  }

  #capability .capability-copy h2 br {
    display: none !important;
  }

  #capability .capability-copy p {
    color: var(--sws-muted) !important;
    font-size: var(--sws-copy) !important;
    line-height: 1.85 !important;
    max-width: 610px !important;
  }

  #capability .tech-console.core-card-grid {
    min-height: 0 !important;
    height: min(575px, calc(100svh - 150px)) !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 16px !important;
    border-radius: 16px !important;
    padding: 18px !important;
    background:
      linear-gradient(135deg, rgba(32, 243, 160, .045), rgba(255, 255, 255, .012)),
      rgba(9, 26, 18, .72) !important;
    box-shadow: 0 30px 90px rgba(0, 0, 0, .32) !important;
  }

  #capability .core-tech-card {
    min-height: 0 !important;
    border-radius: var(--sws-radius) !important;
    padding: clamp(18px, 1.7vw, 25px) !important;
    overflow: hidden !important;
    background: rgba(4, 38, 25, .72) !important;
  }

  #capability .tech-icon {
    width: 48px !important;
    height: 48px !important;
    margin-bottom: 16px !important;
    stroke-width: 1.65 !important;
    filter: drop-shadow(0 0 16px rgba(32, 243, 160, .32)) !important;
  }

  #capability .core-tech-card h3 {
    font-size: clamp(19px, 1.25vw, 24px) !important;
    line-height: 1.2 !important;
    margin: 0 0 8px !important;
  }

  #capability .core-tech-card p {
    font-size: var(--sws-copy) !important;
    line-height: 1.55 !important;
    margin: 0 0 10px !important;
  }

  #capability .core-tech-card em {
    font-size: var(--sws-small) !important;
    line-height: 1.65 !important;
    margin-top: 10px !important;
    padding-top: 10px !important;
    display: block !important;
    max-height: 3.5em !important;
    overflow: hidden !important;
  }

  #training.ai-delivery {
    padding: clamp(64px, 7svh, 86px) 0 !important;
    background:
      radial-gradient(circle at 25% 52%, rgba(32, 243, 160, .09), transparent 30%),
      linear-gradient(180deg, #0b0b0a 0%, #060807 100%) !important;
  }

  #training .delivery-stage {
    width: var(--sws-container) !important;
    min-height: calc(100svh - 150px) !important;
    height: auto !important;
    margin: 0 auto !important;
    display: grid !important;
    grid-template-columns: minmax(340px, .38fr) minmax(0, .62fr) !important;
    gap: clamp(44px, 5vw, 86px) !important;
    align-items: center !important;
  }

  #training .stage-head h2 {
    color: #fff !important;
    font-size: var(--sws-title) !important;
    line-height: 1.18 !important;
    margin: 0 0 18px !important;
  }

  #training .stage-head p {
    color: var(--sws-muted) !important;
    font-size: var(--sws-copy) !important;
    line-height: 1.8 !important;
    max-width: 520px !important;
  }

  #training .delivery-track {
    position: relative !important;
    min-height: 0 !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    padding: 0 !important;
  }

  #training .delivery-track::before {
    content: "" !important;
    position: absolute !important;
    left: 42px !important;
    top: 28px !important;
    bottom: 28px !important;
    width: 1px !important;
    background: linear-gradient(180deg, transparent, rgba(32, 243, 160, .55), transparent) !important;
  }

  #training .delivery-track article,
  #training .delivery-track article:nth-child(1),
  #training .delivery-track article:nth-child(2),
  #training .delivery-track article:nth-child(3),
  #training .delivery-track article:nth-child(4) {
    position: relative !important;
    min-height: 104px !important;
    padding: 18px 24px 18px 92px !important;
    border-radius: var(--sws-radius) !important;
    background: rgba(255, 255, 255, .025) !important;
    border: 1px solid rgba(157, 255, 220, .14) !important;
    backdrop-filter: blur(16px) !important;
    overflow: hidden !important;
  }

  #training .delivery-icon {
    display: block !important;
    position: absolute !important;
    left: 20px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 46px !important;
    height: 46px !important;
    stroke: var(--sws-green) !important;
    fill: none !important;
    stroke-width: 1.65 !important;
    filter: drop-shadow(0 0 16px rgba(32, 243, 160, .34)) !important;
    z-index: 2 !important;
  }

  #training .delivery-track article span {
    color: var(--sws-green-soft) !important;
    font-size: var(--sws-small) !important;
  }

  #training .delivery-track article h3 {
    color: #fff !important;
    font-size: clamp(19px, 1.25vw, 24px) !important;
    line-height: 1.2 !important;
    margin: 4px 0 6px !important;
  }

  #training .delivery-track article p {
    color: var(--sws-muted) !important;
    font-size: var(--sws-copy) !important;
    line-height: 1.6 !important;
    margin: 0 !important;
  }

  #resources.ai-resources {
    padding: clamp(64px, 7svh, 86px) 0 !important;
    background:
      radial-gradient(circle at 80% 40%, rgba(32, 243, 160, .1), transparent 35%),
      linear-gradient(180deg, #06140d 0%, #071a11 100%) !important;
  }

  #resources .resource-stage {
    width: var(--sws-container) !important;
    min-height: calc(100svh - 150px) !important;
    height: auto !important;
    margin: 0 auto !important;
    display: grid !important;
    grid-template-columns: minmax(360px, .38fr) minmax(0, .62fr) !important;
    gap: clamp(44px, 5vw, 86px) !important;
    align-items: center !important;
  }

  #resources .resource-main h2 {
    color: #fff !important;
    font-size: var(--sws-title) !important;
    line-height: 1.18 !important;
    margin: 0 0 18px !important;
  }

  #resources .resource-main p {
    max-width: 550px !important;
    color: var(--sws-muted) !important;
    font-size: var(--sws-copy) !important;
    line-height: 1.8 !important;
  }

  #resources .resource-tabs {
    margin-top: 28px !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 10px !important;
    max-width: 480px !important;
  }

  #resources .resource-tabs button {
    border-radius: 999px !important;
    min-height: 40px !important;
    font-size: var(--sws-small) !important;
  }

  #resources .resource-panels {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  #resources .resource-panels article {
    position: relative !important;
    display: grid !important;
    grid-template-columns: 64px minmax(0, 1fr) !important;
    column-gap: 18px !important;
    align-items: center !important;
    min-height: 120px !important;
    border-radius: var(--sws-radius) !important;
    padding: 22px 26px !important;
    background: rgba(255, 255, 255, .025) !important;
    border: 1px solid rgba(157, 255, 220, .14) !important;
    opacity: 1 !important;
    transform: none !important;
  }

  #resources .resource-icon {
    grid-row: 1 / span 3 !important;
    width: 50px !important;
    height: 50px !important;
    stroke: var(--sws-green) !important;
    filter: drop-shadow(0 0 16px rgba(32, 243, 160, .32)) !important;
  }

  #resources .resource-panels span,
  #resources .resource-panels h3,
  #resources .resource-panels p {
    grid-column: 2 !important;
  }

  #resources .resource-panels h3 {
    color: #fff !important;
    font-size: clamp(20px, 1.45vw, 26px) !important;
    margin: 4px 0 6px !important;
  }

  #resources .resource-panels p {
    color: var(--sws-muted) !important;
    font-size: var(--sws-copy) !important;
    line-height: 1.65 !important;
    margin: 0 !important;
  }

  #about.ai-about {
    padding: clamp(64px, 7svh, 86px) 0 !important;
    background:
      radial-gradient(circle at 72% 44%, rgba(255, 255, 255, .055), transparent 32%),
      linear-gradient(180deg, #0c0c0c 0%, #060807 100%) !important;
  }

  #about .about-stage {
    width: var(--sws-container) !important;
    min-height: calc(100svh - 150px) !important;
    height: auto !important;
    margin: 0 auto !important;
    display: grid !important;
    grid-template-columns: minmax(380px, .42fr) minmax(0, .58fr) !important;
    gap: clamp(48px, 5vw, 92px) !important;
    align-items: center !important;
  }

  #about .about-narrative-center {
    text-align: left !important;
    max-width: 610px !important;
    margin: 0 !important;
  }

  #about .about-narrative-center h2 {
    color: #fff !important;
    font-size: clamp(38px, 3.3vw, 56px) !important;
    line-height: 1.18 !important;
    margin: 0 0 22px !important;
  }

  #about .about-narrative-center p {
    color: var(--sws-muted) !important;
    font-size: var(--sws-copy) !important;
    line-height: 1.85 !important;
  }

  #about .about-cinema.about-video-frame {
    width: 100% !important;
    height: min(450px, calc(100svh - 190px)) !important;
    min-height: 330px !important;
    border-radius: var(--sws-radius) !important;
    cursor: pointer !important;
    background:
      radial-gradient(circle at 52% 42%, rgba(32, 243, 160, .12), transparent 28%),
      linear-gradient(135deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, .01)) !important;
  }

  .site-footer.dji-footer {
    background: #1c1e1d !important;
    padding: 42px var(--sws-page-x) 28px !important;
  }

  .footer-download {
    width: var(--sws-container) !important;
    padding-bottom: 28px !important;
    margin: 0 auto 34px !important;
    border-bottom: 1px solid rgba(255, 255, 255, .14) !important;
  }

  .footer-mega,
  .footer-brandbar,
  .footer-legal {
    width: var(--sws-container) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .footer-mega {
    display: grid !important;
    grid-template-columns: 1.05fr 1.05fr 1.1fr 1.05fr 1.25fr !important;
    gap: clamp(26px, 3vw, 50px) !important;
  }

  .footer-column h3 {
    color: rgba(255, 255, 255, .9) !important;
    font-size: 14px !important;
    margin: 0 0 16px !important;
  }

  .footer-column a,
  .footer-column span {
    color: rgba(255, 255, 255, .62) !important;
    font-size: 13px !important;
    line-height: 1.7 !important;
  }

  .footer-brandbar {
    display: flex !important;
    align-items: center !important;
    gap: 34px !important;
    margin-top: 36px !important;
    padding-top: 24px !important;
    border-top: 1px solid rgba(255, 255, 255, .12) !important;
  }

  .footer-brandbar img {
    width: 126px !important;
    height: auto !important;
  }

  .footer-brandbar nav {
    display: flex !important;
    gap: 22px !important;
    flex: 1 !important;
  }

  .footer-social {
    display: flex !important;
    gap: 12px !important;
  }

  .footer-social a {
    width: 30px !important;
    height: 30px !important;
    border-radius: 50% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1px solid rgba(255, 255, 255, .24) !important;
    color: rgba(255, 255, 255, .86) !important;
    font-size: 0 !important;
  }

  .footer-social a::before {
    font-size: 12px !important;
    line-height: 1 !important;
  }

  .footer-social a[aria-label="微博"]::before { content: "微"; }
  .footer-social a[aria-label="微信"]::before { content: "信"; }
  .footer-social a[aria-label="腾讯"]::before { content: "T"; }
  .footer-social a[aria-label="抖音"]::before { content: "抖"; }

  .footer-legal {
    margin-top: 24px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 22px !important;
    border-top: 1px solid rgba(255, 255, 255, .1) !important;
    padding-top: 18px !important;
  }

  .footer-records {
    margin: 0 !important;
    width: auto !important;
    max-width: 100% !important;
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 12px 22px !important;
    white-space: normal !important;
    color: rgba(255, 255, 255, .46) !important;
  }

  .footer-records a,
  .footer-records span {
    display: inline-flex !important;
    align-items: center !important;
    margin: 0 !important;
    color: rgba(255, 255, 255, .48) !important;
    font-size: 13px !important;
    line-height: 1.45 !important;
    white-space: nowrap !important;
  }

  .footer-records .footer-copyright,
  .footer-records .footer-tagline {
    display: inline-flex !important;
  }

  .footer-records .footer-copyright::before,
  .footer-records .footer-tagline::before {
    content: "|" !important;
    margin-right: 22px !important;
    color: rgba(255, 255, 255, .2) !important;
  }
}

@media (min-width: 1024px) and (max-width: 1360px) {
  :root {
    --sws-page-x: 34px;
    --sws-container: min(1180px, calc(100% - 68px));
    --sws-title: clamp(31px, 2.65vw, 40px);
    --sws-card-title: clamp(20px, 1.55vw, 25px);
  }

  #services .infrastructure-section {
    min-height: calc(100svh - 96px) !important;
  }

  #services .infra-showcase {
    height: min(500px, calc(100svh - 190px)) !important;
    gap: 14px !important;
  }

  #services .infra-module:first-child {
    padding: 24px 28px !important;
    grid-template-columns: minmax(0, .62fr) minmax(180px, .38fr) !important;
  }

  #services .infra-module:first-child .infra-visual-base {
    width: 205px !important;
    height: 205px !important;
  }

  #services .infra-module:not(:first-child) {
    grid-template-columns: minmax(0, 1fr) 100px !important;
    padding: 17px 20px !important;
  }

  #services .infra-module:not(:first-child) .infra-visual,
  #services .infra-module:not(:first-child) .infra-visual img {
    width: 100px !important;
    height: 100px !important;
    min-width: 100px !important;
  }

  #scenarios.ai-solutions {
    gap: 30px !important;
    padding-top: 54px !important;
    padding-bottom: 50px !important;
  }

  #scenarios .solution-board {
    height: min(500px, calc(100svh - 120px)) !important;
    gap: 12px !important;
  }

  #scenarios .solution-card {
    padding: 17px 18px !important;
  }

  #capability .capability-stage,
  #training .delivery-stage,
  #resources .resource-stage,
  #about .about-stage {
    min-height: calc(100svh - 124px) !important;
    gap: 34px !important;
  }

  #capability .tech-console.core-card-grid {
    height: min(500px, calc(100svh - 130px)) !important;
  }

  #training .delivery-track article {
    min-height: 92px !important;
  }
}

@media (max-width: 1023px) {
  #services.ai-origin,
  #scenarios.ai-solutions,
  #capability.core-tech-section,
  #training.ai-delivery,
  #resources.ai-resources,
  #about.ai-about {
    min-height: auto !important;
    height: auto !important;
    padding: 54px 22px !important;
  }

  #services .infrastructure-section,
  #scenarios.ai-solutions,
  #capability .capability-stage,
  #training .delivery-stage,
  #resources .resource-stage,
  #about .about-stage {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 26px !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
  }

  #services .infra-showcase,
  #scenarios .solution-board,
  #capability .tech-console.core-card-grid,
  #training .delivery-track,
  #resources .resource-panels {
    display: grid !important;
    grid-template-columns: 1fr !important;
    height: auto !important;
    min-height: 0 !important;
    gap: 14px !important;
  }

  #services .infra-module,
  #services .infra-module:first-child,
  #services .infra-module:not(:first-child),
  #scenarios .solution-card,
  #scenarios .solution-card:first-child,
  #scenarios .solution-card:nth-child(n) {
    grid-column: auto !important;
    grid-row: auto !important;
    min-height: 220px !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    padding: 24px !important;
  }
}

/* 2026-05-30 rhythm8: homepage art-direction layer.
   This is the final override for the current homepage pass; keep it at EOF. */
@media (min-width: 1024px) {
  :root {
    --sws-page-x: clamp(42px, 5.2vw, 96px);
    --sws-container: min(1420px, calc(100% - var(--sws-page-x) * 2));
    --sws-title: clamp(34px, 3.05vw, 48px);
    --sws-card-title: clamp(21px, 1.55vw, 28px);
    --sws-copy: clamp(13px, .9vw, 15px);
    --sws-green: #20f3a0;
    --sws-green-2: #5dcaa5;
    --sws-muted: #8bbfaa;
    --sws-line: rgba(157, 255, 220, .17);
    --sws-radius: 12px;
  }

  html,
  body {
    background: #020605 !important;
    overflow-x: hidden !important;
  }

  .hero-intelligence-core,
  .hero-metrics,
  .hero-slide.agent-slide::before,
  .hero-slide.agent-slide::after,
  .agent-slide .hero-stage::before,
  .agent-slide .hero-stage::after,
  .agent-slide .hero-content::before,
  .agent-slide .hero-content::after {
    display: none !important;
    content: none !important;
  }

  .ai-home {
    background:
      linear-gradient(180deg, #020605 0%, #06140d 24%, #071321 47%, #0b0b0a 68%, #06140d 100%) !important;
  }

  .ai-section {
    position: relative !important;
    min-height: 100svh !important;
    height: auto !important;
    overflow: hidden !important;
  }

  .infra-hero h2,
  .solution-hero h2,
  .capability-copy h2,
  .stage-head h2,
  .resource-main h2,
  .about-narrative-center h2 {
    font-size: var(--sws-title) !important;
    line-height: 1.12 !important;
    letter-spacing: 0 !important;
    color: #fff !important;
    font-weight: 650 !important;
  }

  .infra-hero p,
  .solution-subtitle,
  .capability-copy p,
  .stage-head p,
  .resource-main p,
  .about-narrative-center p,
  .infra-copy p,
  .solution-card p,
  .core-tech-card p,
  .delivery-track p,
  .resource-panels p {
    font-size: var(--sws-copy) !important;
    line-height: 1.72 !important;
    color: var(--sws-muted) !important;
  }

  .section-mark,
  .core-badge,
  .infra-pill,
  .solution-badge {
    border-radius: 999px !important;
    border: 1px solid rgba(32, 243, 160, .72) !important;
    background: rgba(0, 0, 0, .08) !important;
    color: #9fe1cb !important;
    letter-spacing: .12em !important;
  }

  /* Screen 2: product infrastructure, a dense but breathable flagship module. */
  #services.ai-origin {
    min-height: 100svh !important;
    padding: 48px 0 46px !important;
    background:
      radial-gradient(circle at 74% 24%, rgba(32, 243, 160, .16), transparent 32%),
      radial-gradient(circle at 21% 77%, rgba(32, 243, 160, .08), transparent 31%),
      linear-gradient(180deg, #020605 0%, #06140d 100%) !important;
  }

  #services.ai-origin::before {
    opacity: .26 !important;
    background-size: 22px 22px !important;
  }

  #services .services-depth-field {
    position: absolute !important;
    inset: 0 !important;
    pointer-events: none !important;
    overflow: hidden !important;
    opacity: .86 !important;
  }

  #services .depth-layer {
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    background:
      radial-gradient(circle at 11% 34%, rgba(157, 255, 220, .62) 0 2px, transparent 3px),
      radial-gradient(circle at 33% 76%, rgba(157, 255, 220, .46) 0 2px, transparent 3px),
      radial-gradient(circle at 71% 18%, rgba(157, 255, 220, .58) 0 2px, transparent 3px),
      radial-gradient(circle at 92% 54%, rgba(157, 255, 220, .42) 0 2px, transparent 3px),
      linear-gradient(32deg, transparent 0 22%, rgba(32, 243, 160, .10) 22.2%, transparent 22.5% 56%, rgba(32, 243, 160, .08) 56.2%, transparent 56.5%),
      linear-gradient(148deg, transparent 0 32%, rgba(32, 243, 160, .08) 32.2%, transparent 32.5% 74%, rgba(32, 243, 160, .07) 74.2%, transparent 74.5%) !important;
    transform: translate3d(0, 0, 0) scale(1.04) !important;
    animation: swsFieldDrift 16s ease-in-out infinite alternate !important;
  }

  #services .depth-layer-mid {
    opacity: .5 !important;
    transform: translate3d(-2%, 1%, 0) scale(1.1) !important;
    animation-duration: 22s !important;
  }

  #services .depth-layer-front {
    opacity: .32 !important;
    transform: translate3d(2%, -2%, 0) scale(1.15) !important;
    animation-duration: 28s !important;
  }

  @keyframes swsFieldDrift {
    from { transform: translate3d(-1.2%, -.8%, 0) scale(1.04); }
    to { transform: translate3d(1.4%, .9%, 0) scale(1.09); }
  }

  #services .infrastructure-section {
    position: relative !important;
    z-index: 1 !important;
    width: var(--sws-container) !important;
    min-height: calc(100svh - 94px) !important;
    height: auto !important;
    margin: 0 auto !important;
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
    gap: clamp(18px, 2.1vw, 28px) !important;
  }

  #services .infra-hero {
    max-width: 760px !important;
    margin: 0 auto !important;
    text-align: center !important;
    display: grid !important;
    justify-items: center !important;
    padding: 0 !important;
  }

  #services .infra-pill {
    padding: 5px 22px !important;
    margin: 0 0 10px !important;
    font-size: 12px !important;
  }

  #services .infra-hero h2 {
    margin: 0 0 9px !important;
  }

  #services .infra-hero p {
    max-width: 650px !important;
    margin: 0 !important;
    color: var(--sws-green-2) !important;
    text-align: center !important;
  }

  #services .infra-metrics {
    display: none !important;
  }

  #services .infra-showcase {
    display: grid !important;
    grid-template-columns: minmax(0, 1.06fr) minmax(0, .94fr) !important;
    grid-template-rows: repeat(3, minmax(0, 1fr)) !important;
    gap: clamp(14px, 1.4vw, 20px) !important;
    height: min(540px, calc(100svh - 220px)) !important;
    min-height: 450px !important;
  }

  #services .infra-module {
    min-height: 0 !important;
    border-radius: var(--sws-radius) !important;
    border: 1px solid rgba(157, 255, 220, .18) !important;
    background:
      radial-gradient(circle at 84% 50%, rgba(32, 243, 160, .18), transparent 42%),
      rgba(255,255,255,.018) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 20px 52px rgba(0,0,0,.24) !important;
    backdrop-filter: blur(18px) !important;
    overflow: hidden !important;
    cursor: pointer !important;
  }

  #services .infra-module:hover,
  #services .infra-module:focus-visible {
    border-color: rgba(32, 243, 160, .48) !important;
    transform: translateY(-2px) !important;
  }

  #services .infra-module:first-child {
    grid-column: 1 !important;
    grid-row: 1 / span 3 !important;
    display: grid !important;
    grid-template-columns: minmax(0, .58fr) minmax(210px, .42fr) !important;
    align-items: center !important;
    padding: clamp(26px, 3vw, 42px) !important;
  }

  #services .infra-module:not(:first-child) {
    grid-column: 2 !important;
    grid-row: auto !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) clamp(108px, 8vw, 136px) !important;
    align-items: center !important;
    gap: 18px !important;
    padding: clamp(18px, 2vw, 28px) !important;
  }

  #services .infra-copy {
    min-width: 0 !important;
    position: relative !important;
    z-index: 2 !important;
  }

  #services .infra-copy span {
    display: inline-flex !important;
    align-items: center !important;
    margin: 0 0 10px !important;
    font-size: 13px !important;
    letter-spacing: .08em !important;
    color: var(--sws-green-2) !important;
  }

  #services .infra-copy h3 {
    font-size: var(--sws-card-title) !important;
    line-height: 1.13 !important;
    color: #fff !important;
    margin: 0 0 14px !important;
    white-space: normal !important;
  }

  #services .infra-module:not(:first-child) .infra-copy h3 {
    color: #d4f5e9 !important;
    margin-bottom: 9px !important;
  }

  #services .infra-copy p {
    max-width: 560px !important;
    margin: 0 !important;
  }

  #services .infra-module:first-child .infra-copy ul {
    margin: 22px 0 0 !important;
    display: grid !important;
    gap: 10px !important;
  }

  #services .infra-module:first-child .infra-visual-base {
    position: relative !important;
    justify-self: end !important;
    align-self: end !important;
    width: clamp(214px, 19vw, 282px) !important;
    height: clamp(214px, 19vw, 282px) !important;
    overflow: visible !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  #services .infra-module:first-child .infra-visual-base::before,
  #services .infra-module:first-child .infra-visual-base::after {
    display: none !important;
    content: none !important;
  }

  #services .infra-module:first-child .infra-visual-base img {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  #services .infra-orb-static {
    opacity: .9 !important;
    filter: drop-shadow(0 0 32px rgba(32, 243, 160, .28)) !important;
  }

  #services .infra-orb-spin {
    display: block !important;
    opacity: .62 !important;
    mix-blend-mode: screen !important;
    clip-path: ellipse(37% 36% at 51% 42%) !important;
    transform-origin: 51% 42% !important;
    animation: swsGlobeSphereTurn 9s linear infinite !important;
  }

  @keyframes swsGlobeSphereTurn {
    0% { transform: rotateY(0deg) translateX(-1px) scale(1.018); }
    50% { transform: rotateY(180deg) translateX(2px) scale(.99); }
    100% { transform: rotateY(360deg) translateX(-1px) scale(1.018); }
  }

  #services .infra-module:not(:first-child) .infra-visual {
    width: clamp(108px, 8vw, 136px) !important;
    height: clamp(108px, 8vw, 136px) !important;
    min-width: clamp(108px, 8vw, 136px) !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
  }

  #services .infra-module:not(:first-child) .infra-visual img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    mix-blend-mode: screen !important;
    filter: brightness(1.06) drop-shadow(0 0 18px rgba(32, 243, 160, .22)) !important;
  }

  /* Screen 3: scenario intelligence, Bento with hierarchy and visual icons. */
  #scenarios.ai-solutions {
    min-height: 100svh !important;
    padding: clamp(52px, 5vw, 78px) var(--sws-page-x) !important;
    display: grid !important;
    grid-template-columns: minmax(280px, .31fr) minmax(0, .69fr) !important;
    align-items: center !important;
    gap: clamp(32px, 4.4vw, 70px) !important;
    background:
      radial-gradient(circle at 85% 20%, rgba(32, 243, 160, .10), transparent 28%),
      linear-gradient(135deg, #050706 0%, #0a0a09 62%, #05100b 100%) !important;
  }

  #scenarios.ai-solutions::before {
    opacity: .18 !important;
  }

  #scenarios .solution-hero {
    max-width: 420px !important;
    text-align: left !important;
    margin: 0 !important;
  }

  #scenarios .solution-badge {
    display: inline-flex !important;
    margin: 0 0 18px !important;
    padding: 6px 18px !important;
    font-size: 12px !important;
  }

  #scenarios .solution-hero h2 {
    font-size: clamp(36px, 3.1vw, 48px) !important;
    line-height: 1.15 !important;
    text-align: left !important;
    margin: 0 0 18px !important;
    max-width: 430px !important;
  }

  #scenarios .solution-subtitle {
    text-align: left !important;
    max-width: 380px !important;
    margin: 0 !important;
  }

  #scenarios .solution-stats {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
    gap: 10px !important;
    margin-top: 24px !important;
  }

  #scenarios .solution-stats span {
    min-height: 34px !important;
    padding: 0 16px !important;
  }

  #scenarios .solution-divider {
    display: none !important;
  }

  #scenarios .solution-board {
    width: 100% !important;
    height: min(560px, calc(100svh - 120px)) !important;
    min-height: 460px !important;
    display: grid !important;
    grid-template-columns: minmax(230px, 1.15fr) repeat(2, minmax(180px, .9fr)) !important;
    grid-template-rows: repeat(3, minmax(0, 1fr)) !important;
    gap: 15px !important;
  }

  #scenarios .solution-card {
    position: relative !important;
    min-height: 0 !important;
    padding: 20px 22px !important;
    border-radius: var(--sws-radius) !important;
    border: 1px solid rgba(32, 243, 160, .18) !important;
    background:
      radial-gradient(circle at 72% 28%, rgba(32, 243, 160, .11), transparent 40%),
      rgba(13, 42, 28, .58) !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: flex-end !important;
  }

  #scenarios .solution-card:first-child {
    grid-column: 1 !important;
    grid-row: 1 / span 2 !important;
  }

  #scenarios .solution-card:nth-child(2) { grid-column: 2 !important; grid-row: 1 !important; }
  #scenarios .solution-card:nth-child(3) { grid-column: 3 !important; grid-row: 1 !important; }
  #scenarios .solution-card:nth-child(4) { grid-column: 1 !important; grid-row: 3 !important; }
  #scenarios .solution-card:nth-child(5) { grid-column: 2 !important; grid-row: 2 / span 2 !important; }
  #scenarios .solution-card:nth-child(6) { grid-column: 3 !important; grid-row: 2 / span 2 !important; }

  #scenarios .solution-visual {
    display: block !important;
    position: absolute !important;
    top: 18px !important;
    right: 18px !important;
    width: clamp(58px, 5.2vw, 92px) !important;
    height: clamp(58px, 5.2vw, 92px) !important;
    opacity: .82 !important;
    transform: none !important;
  }

  #scenarios .solution-card:first-child .solution-visual,
  #scenarios .solution-card:nth-child(5) .solution-visual,
  #scenarios .solution-card:nth-child(6) .solution-visual {
    width: clamp(82px, 7vw, 130px) !important;
    height: clamp(82px, 7vw, 130px) !important;
  }

  #scenarios .solution-icon {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    stroke: var(--sws-green) !important;
    fill: none !important;
    stroke-width: 3 !important;
    filter: drop-shadow(0 0 16px rgba(32, 243, 160, .22)) !important;
  }

  #scenarios .solution-content {
    position: relative !important;
    z-index: 2 !important;
    width: 100% !important;
  }

  #scenarios .solution-content span {
    display: block !important;
    margin: 0 0 8px !important;
    font-size: 13px !important;
    letter-spacing: .18em !important;
    color: var(--sws-green-2) !important;
  }

  #scenarios .solution-card h3 {
    font-size: clamp(19px, 1.38vw, 25px) !important;
    line-height: 1.22 !important;
    color: #fff !important;
    margin: 0 0 8px !important;
  }

  #scenarios .solution-card p {
    margin: 0 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }

  /* Screen 4: cooler architecture chapter, not another green card page. */
  #capability.core-tech-section {
    min-height: 100svh !important;
    padding: 70px 0 !important;
    background:
      radial-gradient(circle at 73% 44%, rgba(29, 95, 155, .24), transparent 38%),
      linear-gradient(180deg, #04111e 0%, #061522 52%, #03101b 100%) !important;
  }

  #capability .capability-stage {
    width: var(--sws-container) !important;
    min-height: calc(100svh - 140px) !important;
    height: auto !important;
    margin: 0 auto !important;
    display: grid !important;
    grid-template-columns: minmax(420px, .44fr) minmax(0, .56fr) !important;
    gap: clamp(42px, 5vw, 78px) !important;
    align-items: center !important;
  }

  #capability .capability-copy {
    min-width: 0 !important;
  }

  #capability .capability-copy h2 {
    font-size: clamp(34px, 2.95vw, 46px) !important;
    line-height: 1.18 !important;
    max-width: 740px !important;
    white-space: normal !important;
    word-break: keep-all !important;
    overflow-wrap: normal !important;
  }

  #capability .capability-copy h2 br {
    display: block !important;
  }

  #capability .capability-copy p {
    max-width: 560px !important;
    margin-top: 22px !important;
  }

  #capability .tech-console.core-card-grid {
    height: min(560px, calc(100svh - 170px)) !important;
    min-height: 470px !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 18px !important;
    padding: 18px !important;
    border-radius: 16px !important;
    background: rgba(4, 20, 28, .64) !important;
  }

  #capability .core-tech-card {
    min-height: 0 !important;
    padding: clamp(20px, 2vw, 28px) !important;
    border-radius: var(--sws-radius) !important;
    background: rgba(5, 33, 24, .72) !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
  }

  #capability .tech-icon {
    width: clamp(48px, 4.2vw, 64px) !important;
    height: clamp(48px, 4.2vw, 64px) !important;
    margin-bottom: 18px !important;
    color: var(--sws-green) !important;
    stroke: currentColor !important;
    filter: drop-shadow(0 0 18px rgba(32, 243, 160, .22)) !important;
  }

  #capability .core-tech-card span {
    font-size: 12px !important;
    color: rgba(93, 202, 165, .68) !important;
  }

  #capability .core-tech-card h3 {
    font-size: clamp(20px, 1.5vw, 25px) !important;
    line-height: 1.22 !important;
    margin: 8px 0 8px !important;
    color: #fff !important;
  }

  #capability .core-tech-card p {
    margin: 0 0 12px !important;
    color: var(--sws-green-2) !important;
  }

  #capability .core-tech-card em {
    display: block !important;
    max-height: none !important;
    overflow: visible !important;
    margin-top: auto !important;
    padding-top: 12px !important;
    border-top: 1px solid rgba(32, 243, 160, .12) !important;
    color: rgba(139, 191, 170, .62) !important;
    font-size: 12px !important;
    line-height: 1.65 !important;
  }

  /* Screen 5: delivery becomes a flow/timeline chapter. */
  #training.ai-delivery {
    min-height: 100svh !important;
    padding: 78px 0 !important;
    background:
      radial-gradient(circle at 76% 42%, rgba(32, 243, 160, .11), transparent 34%),
      linear-gradient(180deg, #0b0b0a 0%, #090b0a 100%) !important;
  }

  #training .delivery-stage {
    width: var(--sws-container) !important;
    min-height: calc(100svh - 156px) !important;
    height: auto !important;
    display: grid !important;
    grid-template-columns: minmax(330px, .36fr) minmax(0, .64fr) !important;
    gap: clamp(42px, 5vw, 86px) !important;
    align-items: center !important;
  }

  #training .stage-head h2 {
    max-width: 520px !important;
    margin: 16px 0 !important;
  }

  #training .stage-head p {
    max-width: 500px !important;
  }

  #training .delivery-track {
    position: relative !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 18px !important;
  }

  #training .delivery-track article {
    min-height: 190px !important;
    padding: 24px !important;
    border-radius: var(--sws-radius) !important;
    border: 1px solid rgba(157, 255, 220, .15) !important;
    background: rgba(255,255,255,.018) !important;
    backdrop-filter: blur(16px) !important;
  }

  #training .delivery-icon {
    display: block !important;
    width: 52px !important;
    height: 52px !important;
    margin: 0 0 16px !important;
    stroke: var(--sws-green) !important;
    filter: drop-shadow(0 0 16px rgba(32, 243, 160, .22)) !important;
  }

  #training .delivery-track h3 {
    font-size: clamp(20px, 1.45vw, 25px) !important;
    color: #fff !important;
    margin: 6px 0 8px !important;
  }

  /* Screen 6: resources becomes a control-center layout instead of repeated cards. */
  #resources.ai-resources {
    min-height: 100svh !important;
    padding: 78px 0 !important;
    background:
      linear-gradient(180deg, #06140d 0%, #071811 100%) !important;
  }

  #resources .resource-stage {
    width: var(--sws-container) !important;
    min-height: calc(100svh - 156px) !important;
    height: auto !important;
    display: grid !important;
    grid-template-columns: minmax(330px, .36fr) minmax(0, .64fr) !important;
    gap: clamp(42px, 5vw, 86px) !important;
    align-items: center !important;
  }

  #resources .resource-main h2 {
    max-width: 540px !important;
  }

  #resources .resource-main p {
    max-width: 520px !important;
  }

  #resources .resource-tabs {
    margin-top: 28px !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
  }

  #resources .resource-tabs button {
    border-radius: 999px !important;
  }

  #resources .resource-panels {
    display: grid !important;
    gap: 18px !important;
    align-content: center !important;
  }

  #resources .resource-panels article {
    min-height: 150px !important;
    display: grid !important;
    grid-template-columns: 64px minmax(0, 1fr) !important;
    column-gap: 18px !important;
    align-items: center !important;
    padding: 24px !important;
    border-radius: var(--sws-radius) !important;
    border: 1px solid rgba(157,255,220,.15) !important;
    background: rgba(255,255,255,.018) !important;
  }

  #resources .resource-icon {
    display: block !important;
    width: 52px !important;
    height: 52px !important;
    grid-row: 1 / span 3 !important;
    stroke: var(--sws-green) !important;
    filter: drop-shadow(0 0 14px rgba(32, 243, 160, .2)) !important;
  }

  #resources .resource-panels h3 {
    font-size: clamp(20px, 1.45vw, 25px) !important;
    margin: 4px 0 8px !important;
    color: #fff !important;
  }

  /* Screen 7: company story with cinematic video surface. */
  #about.ai-about {
    min-height: 100svh !important;
    padding: 78px 0 !important;
    background:
      radial-gradient(circle at 72% 42%, rgba(255,255,255,.055), transparent 34%),
      linear-gradient(180deg, #0b0b0a 0%, #070908 100%) !important;
  }

  #about .about-stage {
    width: var(--sws-container) !important;
    min-height: calc(100svh - 156px) !important;
    height: auto !important;
    display: grid !important;
    grid-template-columns: minmax(380px, .42fr) minmax(0, .58fr) !important;
    gap: clamp(46px, 5.5vw, 96px) !important;
    align-items: center !important;
  }

  #about .about-narrative-center {
    text-align: left !important;
  }

  #about .about-narrative-center h2 {
    font-size: clamp(38px, 3.4vw, 56px) !important;
    line-height: 1.16 !important;
    max-width: 600px !important;
    margin: 20px 0 24px !important;
  }

  #about .about-narrative-center p {
    max-width: 560px !important;
    margin: 0 !important;
  }

  #about .about-cinema.about-video-frame {
    height: min(470px, calc(100svh - 220px)) !important;
    min-height: 340px !important;
    border-radius: var(--sws-radius) !important;
    border: 1px solid rgba(255,255,255,.16) !important;
    cursor: pointer !important;
    background:
      radial-gradient(circle at 50% 48%, rgba(32, 243, 160, .13), transparent 24%),
      linear-gradient(145deg, rgba(255,255,255,.06), rgba(255,255,255,.01)),
      #050807 !important;
  }

  #about .about-cinema.about-video-frame:hover {
    border-color: rgba(157,255,220,.38) !important;
    transform: translateY(-2px) !important;
  }

  /* Footer: DJI-like information density and one-line legal row. */
  .site-footer.dji-footer {
    background: #202120 !important;
    padding: 52px 0 32px !important;
    color: rgba(255,255,255,.72) !important;
  }

  .dji-footer .footer-download,
  .dji-footer .footer-mega,
  .dji-footer .footer-brandbar,
  .dji-footer .footer-legal {
    width: var(--sws-container) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .dji-footer .footer-download {
    padding: 0 0 34px !important;
    margin-bottom: 34px !important;
    border-bottom: 1px solid rgba(255,255,255,.16) !important;
  }

  .dji-footer .footer-mega {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: clamp(28px, 4vw, 64px) !important;
  }

  .dji-footer .footer-column h3 {
    color: rgba(255,255,255,.92) !important;
    font-size: 13px !important;
    margin: 0 0 18px !important;
  }

  .dji-footer .footer-column a,
  .dji-footer .footer-column span {
    font-size: 13px !important;
    line-height: 1.9 !important;
    color: rgba(255,255,255,.64) !important;
  }

  .dji-footer .footer-brandbar {
    display: grid !important;
    grid-template-columns: 140px minmax(0, 1fr) auto !important;
    gap: 28px !important;
    align-items: center !important;
    padding: 34px 0 24px !important;
    margin-top: 36px !important;
    border-top: 1px solid rgba(255,255,255,.16) !important;
  }

  .dji-footer .footer-brandbar img {
    width: 128px !important;
    filter: brightness(0) invert(1) !important;
  }

  .footer-social {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 12px !important;
  }

  .footer-social a {
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    border: 1px solid rgba(255,255,255,.18) !important;
    color: transparent !important;
    font-size: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .footer-social a::before {
    color: rgba(255,255,255,.9) !important;
    font-size: 13px !important;
    font-weight: 700 !important;
  }

  .dji-footer .footer-legal {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 22px !important;
    align-items: center !important;
    padding-top: 20px !important;
    border-top: 1px solid rgba(255,255,255,.16) !important;
  }

  .footer-records {
    display: flex !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    gap: 18px !important;
    white-space: nowrap !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }

  .footer-records a,
  .footer-records span {
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    color: rgba(255,255,255,.46) !important;
    font-size: 13px !important;
    white-space: nowrap !important;
  }

  .footer-records .footer-copyright,
  .footer-records .footer-tagline {
    display: inline-flex !important;
  }

  .footer-records .footer-copyright::before,
  .footer-records .footer-tagline::before {
    content: "|" !important;
    margin-right: 18px !important;
    color: rgba(255,255,255,.2) !important;
  }
}

@media (min-width: 1024px) and (max-width: 1360px) {
  :root {
    --sws-page-x: 36px;
    --sws-container: min(1180px, calc(100% - 72px));
    --sws-title: clamp(31px, 2.9vw, 40px);
    --sws-card-title: clamp(20px, 1.65vw, 24px);
  }

  #services.ai-origin,
  #scenarios.ai-solutions,
  #capability.core-tech-section,
  #training.ai-delivery,
  #resources.ai-resources,
  #about.ai-about {
    padding-top: 48px !important;
    padding-bottom: 42px !important;
  }

  #services .infrastructure-section {
    min-height: calc(100svh - 90px) !important;
  }

  #services .infra-showcase {
    height: min(500px, calc(100svh - 205px)) !important;
    min-height: 430px !important;
    gap: 14px !important;
  }

  #services .infra-module:first-child {
    padding: 24px 26px !important;
    grid-template-columns: minmax(0, .63fr) minmax(170px, .37fr) !important;
  }

  #services .infra-module:first-child .infra-visual-base {
    width: 202px !important;
    height: 202px !important;
  }

  #services .infra-module:not(:first-child) {
    grid-template-columns: minmax(0, 1fr) 92px !important;
    padding: 16px 20px !important;
  }

  #services .infra-module:not(:first-child) .infra-visual,
  #services .infra-module:not(:first-child) .infra-visual img {
    width: 92px !important;
    height: 92px !important;
    min-width: 92px !important;
  }

  #scenarios.ai-solutions {
    gap: 30px !important;
  }

  #scenarios .solution-board {
    height: min(500px, calc(100svh - 110px)) !important;
    min-height: 430px !important;
    gap: 12px !important;
  }

  #scenarios .solution-card {
    padding: 17px 18px !important;
  }

  #capability .capability-stage {
    grid-template-columns: minmax(360px, .42fr) minmax(0, .58fr) !important;
    gap: 42px !important;
  }

  #capability .tech-console.core-card-grid {
    height: min(500px, calc(100svh - 140px)) !important;
    min-height: 430px !important;
  }

  #training .delivery-stage,
  #resources .resource-stage,
  #about .about-stage {
    min-height: calc(100svh - 96px) !important;
  }

  .dji-footer .footer-mega {
    gap: 30px !important;
  }
}

@media (max-width: 1023px) {
  .ai-section {
    min-height: auto !important;
    overflow: hidden !important;
  }

  #services.ai-origin,
  #scenarios.ai-solutions,
  #capability.core-tech-section,
  #training.ai-delivery,
  #resources.ai-resources,
  #about.ai-about {
    padding: 56px 20px !important;
  }

  #services .infrastructure-section,
  #capability .capability-stage,
  #training .delivery-stage,
  #resources .resource-stage,
  #about .about-stage {
    width: 100% !important;
    min-height: auto !important;
    display: grid !important;
    gap: 28px !important;
  }

  #services .infra-showcase,
  #scenarios .solution-board,
  #capability .tech-console.core-card-grid,
  #training .delivery-track,
  #resources .resource-panels {
    height: auto !important;
    min-height: 0 !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  #services .infra-module,
  #services .infra-module:first-child,
  #services .infra-module:not(:first-child),
  #scenarios .solution-card,
  #scenarios .solution-card:first-child,
  #scenarios .solution-card:nth-child(n),
  #capability .core-tech-card {
    grid-column: auto !important;
    grid-row: auto !important;
    min-height: auto !important;
    border-radius: 12px !important;
  }

  #services .infra-module:first-child,
  #services .infra-module:not(:first-child) {
    grid-template-columns: minmax(0, 1fr) 86px !important;
    padding: 22px !important;
  }

  #services .infra-module:first-child .infra-visual-base,
  #services .infra-module:not(:first-child) .infra-visual,
  #services .infra-module:not(:first-child) .infra-visual img {
    width: 86px !important;
    height: 86px !important;
    min-width: 86px !important;
  }

  #scenarios.ai-solutions {
    display: grid !important;
    grid-template-columns: 1fr !important;
  }

  #scenarios .solution-hero {
    max-width: none !important;
    text-align: left !important;
  }

  #scenarios .solution-hero h2 {
    font-size: clamp(32px, 9vw, 44px) !important;
    line-height: 1.15 !important;
  }

  .dji-footer .footer-mega,
  .dji-footer .footer-brandbar,
  .dji-footer .footer-legal,
  .footer-records {
    display: grid !important;
    grid-template-columns: 1fr !important;
    white-space: normal !important;
  }
}

/* 2026-05-30 live homepage reset.
   Must stay at EOF. Overrides the older experiment layers above. */
@media (min-width: 1024px) {
  :root {
    --sws-page-x: clamp(40px, 5.4vw, 96px);
    --sws-container: min(1360px, calc(100% - (var(--sws-page-x) * 2)));
    --sws-section-title: clamp(34px, 3.15vw, 48px);
    --sws-card-title: clamp(22px, 1.65vw, 28px);
    --sws-copy: clamp(13px, .92vw, 15px);
    --sws-muted: #8bbfaa;
    --sws-green: #20f3a0;
    --sws-soft-green: #5dcaa5;
    --sws-radius: 12px;
  }

  body { background: #020605 !important; }
  .ai-home {
    background: linear-gradient(180deg, #020605 0%, #020605 24%, #04111e 47%, #0b0b0a 67%, #06140d 100%) !important;
  }

  .hero-intelligence-core,
  .hero-metrics,
  .agent-slide .hero-content::before,
  .agent-slide .hero-content::after,
  .hero-slide.agent-slide::after {
    display: none !important;
    content: none !important;
  }

  .ai-section {
    min-height: 100svh !important;
    overflow: hidden !important;
  }

  #services.ai-origin,
  #scenarios.ai-solutions,
  #capability.core-tech-section,
  #training.ai-delivery,
  #resources.ai-resources,
  #about.ai-about {
    height: 100svh !important;
    min-height: 100svh !important;
  }

  .infra-hero h2,
  .solution-hero h2,
  .capability-copy h2,
  .stage-head h2,
  .resource-main h2,
  .about-narrative-center h2 {
    font-size: var(--sws-section-title) !important;
    line-height: 1.16 !important;
    letter-spacing: 0 !important;
    font-weight: 650 !important;
  }

  .infra-hero p,
  .solution-subtitle,
  .capability-copy p,
  .stage-head p,
  .resource-main p,
  .about-narrative-center p,
  .infra-copy p,
  .solution-card p,
  .core-tech-card p,
  .core-tech-card em,
  .delivery-track article p,
  .resource-panels article p {
    font-size: var(--sws-copy) !important;
    line-height: 1.68 !important;
    color: var(--sws-muted) !important;
  }

  /* Screen 2: product platform, one-screen Bento with active globe motion. */
  #services.ai-origin {
    padding: 44px 0 42px !important;
    background:
      radial-gradient(circle at 72% 18%, rgba(32, 243, 160, .12), transparent 28%),
      radial-gradient(circle at 10% 78%, rgba(32, 243, 160, .08), transparent 30%),
      linear-gradient(180deg, #020605 0%, #06140d 100%) !important;
  }

  #services.ai-origin::before {
    opacity: .34 !important;
    background-size: 22px 22px !important;
  }

  #services .services-depth-field { opacity: .55 !important; }

  #services .infrastructure-section {
    width: var(--sws-container) !important;
    height: calc(100svh - 86px) !important;
    min-height: 0 !important;
    margin: 0 auto !important;
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
    gap: 22px !important;
  }

  #services .infra-hero {
    max-width: 780px !important;
    margin: 0 auto !important;
    text-align: center !important;
    padding: 0 !important;
    min-height: 0 !important;
  }

  #services .infra-pill {
    margin-bottom: 10px !important;
    padding: 6px 22px !important;
    border-radius: 999px !important;
  }

  #services .infra-hero h2 {
    margin: 0 0 8px !important;
    color: #fff !important;
  }

  #services .infra-hero p {
    max-width: 680px !important;
    margin: 0 auto !important;
    color: var(--sws-soft-green) !important;
  }

  #services .infra-metrics { display: none !important; }

  #services .infra-showcase {
    height: 100% !important;
    min-height: 0 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr) !important;
    grid-template-rows: repeat(3, minmax(0, 1fr)) !important;
    gap: 18px !important;
  }

  #services .infra-module {
    min-height: 0 !important;
    border-radius: var(--sws-radius) !important;
    background: radial-gradient(circle at 74% 56%, rgba(32, 243, 160, .16), transparent 42%), rgba(255, 255, 255, .025) !important;
    border: 1px solid rgba(157, 225, 203, .18) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 18px 46px rgba(0,0,0,.26) !important;
    overflow: hidden !important;
    transition: transform .35s ease, border-color .35s ease, box-shadow .35s ease !important;
  }

  #services .infra-module:hover,
  #services .infra-module:focus-visible {
    transform: translateY(-4px) !important;
    border-color: rgba(32, 243, 160, .55) !important;
  }

  #services .infra-module:first-child {
    grid-column: 1 !important;
    grid-row: 1 / span 3 !important;
    display: grid !important;
    grid-template-columns: minmax(0, .6fr) minmax(220px, .4fr) !important;
    align-items: center !important;
    padding: 28px 34px !important;
  }

  #services .infra-module:not(:first-child) {
    grid-column: 2 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 126px !important;
    align-items: center !important;
    gap: 18px !important;
    padding: 22px 30px !important;
  }

  #services .infra-copy span {
    margin-bottom: 10px !important;
    font-size: 13px !important;
    color: var(--sws-soft-green) !important;
  }

  #services .infra-copy h3 {
    margin: 0 0 12px !important;
    color: #d4f5e9 !important;
    font-size: var(--sws-card-title) !important;
    line-height: 1.12 !important;
    white-space: normal !important;
  }

  #services .infra-module:first-child .infra-copy h3 {
    color: #fff !important;
    font-size: clamp(28px, 2.4vw, 38px) !important;
  }

  #services .infra-copy p {
    max-width: 540px !important;
    margin: 0 !important;
  }

  #services .infra-module:first-child .infra-copy ul {
    margin-top: 22px !important;
    gap: 10px !important;
  }

  #services .infra-copy li {
    color: rgba(255,255,255,.9) !important;
    font-size: var(--sws-copy) !important;
  }

  #services .infra-module:first-child .infra-visual-base {
    position: relative !important;
    inset: auto !important;
    justify-self: end !important;
    align-self: end !important;
    width: clamp(220px, 18vw, 270px) !important;
    height: clamp(220px, 18vw, 270px) !important;
    overflow: visible !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  #services .infra-module:first-child .infra-visual-base::before {
    content: "" !important;
    position: absolute !important;
    left: 18% !important;
    top: 15% !important;
    width: 66% !important;
    height: 66% !important;
    border-radius: 50% !important;
    background:
      repeating-linear-gradient(90deg, rgba(255,255,255,.28) 0 1px, transparent 1px 16px),
      radial-gradient(circle at 38% 32%, rgba(255,255,255,.28), transparent 32%) !important;
    mix-blend-mode: screen !important;
    opacity: .28 !important;
    transform-origin: center !important;
    animation: swsGlobeLatitude 8s linear infinite !important;
    pointer-events: none !important;
    z-index: 3 !important;
  }

  #services .infra-module:first-child .infra-visual-base::after {
    content: "" !important;
    position: absolute !important;
    left: 10% !important;
    top: 8% !important;
    width: 82% !important;
    height: 82% !important;
    border-radius: 50% !important;
    background: radial-gradient(circle at 68% 28%, rgba(255,255,255,.26), transparent 18%) !important;
    mix-blend-mode: screen !important;
    opacity: .46 !important;
    animation: swsGlobeLight 4.6s ease-in-out infinite alternate !important;
    pointer-events: none !important;
    z-index: 4 !important;
  }

  @keyframes swsGlobeLatitude {
    0% { transform: translateX(-18%) rotate(0deg); opacity: .20; }
    50% { opacity: .34; }
    100% { transform: translateX(18%) rotate(360deg); opacity: .20; }
  }

  @keyframes swsGlobeLight {
    from { transform: translateX(-4%) scale(.98); opacity: .28; }
    to { transform: translateX(5%) scale(1.03); opacity: .52; }
  }

  #services .infra-orb-spin { display: none !important; }

  #services .infra-orb-static,
  #services .infra-module:first-child .infra-visual-base img {
    position: absolute !important;
    inset: 0 !important;
    z-index: 2 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    mix-blend-mode: screen !important;
  }

  #services .infra-module:not(:first-child) .infra-visual {
    width: 118px !important;
    height: 118px !important;
    min-width: 118px !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
  }

  #services .infra-module:not(:first-child) .infra-visual img {
    width: 118px !important;
    height: 118px !important;
    object-fit: contain !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    mix-blend-mode: screen !important;
  }

  /* Screen 3: scenario solutions, asymmetric Bento and less copy density. */
  #scenarios.ai-solutions {
    padding: 54px var(--sws-page-x) !important;
    display: grid !important;
    grid-template-columns: minmax(300px, .34fr) minmax(0, .66fr) !important;
    align-items: center !important;
    gap: clamp(32px, 4vw, 64px) !important;
    background:
      radial-gradient(circle at 88% 20%, rgba(32, 243, 160, .11), transparent 28%),
      linear-gradient(135deg, #020605 0%, #060806 56%, #0b0b0a 100%) !important;
  }

  #scenarios .solution-glow,
  #scenarios .solution-divider { display: none !important; }

  #scenarios .solution-hero {
    margin: 0 !important;
    max-width: 420px !important;
    text-align: left !important;
  }

  #scenarios .solution-badge { margin-bottom: 20px !important; }

  #scenarios .solution-hero h2 {
    max-width: 420px !important;
    margin: 0 0 16px !important;
    color: #fff !important;
    text-align: left !important;
    font-size: clamp(36px, 3.2vw, 48px) !important;
    line-height: 1.16 !important;
  }

  #scenarios .solution-subtitle {
    max-width: 390px !important;
    margin: 0 !important;
    text-align: left !important;
  }

  #scenarios .solution-stats {
    margin-top: 24px !important;
    justify-content: flex-start !important;
    gap: 10px !important;
    flex-wrap: wrap !important;
  }

  #scenarios .solution-stats span {
    height: 34px !important;
    padding: 0 14px !important;
    border-radius: 999px !important;
    font-size: 12px !important;
  }

  #scenarios .solution-board {
    height: min(520px, calc(100svh - 108px)) !important;
    min-height: 430px !important;
    display: grid !important;
    grid-template-columns: minmax(210px, 1.05fr) repeat(3, minmax(132px, .75fr)) !important;
    grid-template-rows: repeat(2, minmax(0, 1fr)) !important;
    gap: 14px !important;
  }

  #scenarios .solution-card {
    min-height: 0 !important;
    padding: 20px 22px !important;
    border-radius: var(--sws-radius) !important;
    background: radial-gradient(circle at 78% 16%, rgba(32, 243, 160, .12), transparent 42%), rgba(255,255,255,.018) !important;
    border: 1px solid rgba(32,243,160,.20) !important;
    overflow: hidden !important;
  }

  #scenarios .solution-card:first-child { grid-column: 1 !important; grid-row: 1 / span 2 !important; }
  #scenarios .solution-card:nth-child(2) { grid-column: 2 !important; grid-row: 1 !important; }
  #scenarios .solution-card:nth-child(3) { grid-column: 3 / span 2 !important; grid-row: 1 !important; }
  #scenarios .solution-card:nth-child(4) { grid-column: 1 / span 2 !important; grid-row: 2 !important; }
  #scenarios .solution-card:nth-child(5) { grid-column: 3 !important; grid-row: 2 !important; }
  #scenarios .solution-card:nth-child(6) { grid-column: 4 !important; grid-row: 2 !important; display: grid !important; }

  #scenarios .solution-visual {
    position: absolute !important;
    right: 18px !important;
    top: 16px !important;
    width: 86px !important;
    height: 86px !important;
    display: grid !important;
    place-items: center !important;
    opacity: .9 !important;
    background: transparent !important;
  }

  #scenarios .solution-card:first-child .solution-visual {
    width: 128px !important;
    height: 128px !important;
    right: 24px !important;
    top: 24px !important;
  }

  #scenarios .solution-icon {
    width: 100% !important;
    height: 100% !important;
    stroke: var(--sws-green) !important;
    stroke-width: 2 !important;
  }

  #scenarios .solution-content {
    position: relative !important;
    z-index: 1 !important;
    display: flex !important;
    min-height: 100% !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
    padding-right: 86px !important;
  }

  #scenarios .solution-card:first-child .solution-content { padding-right: 0 !important; }
  #scenarios .solution-content span { font-size: 13px !important; color: var(--sws-soft-green) !important; margin-bottom: 10px !important; }

  #scenarios .solution-card h3 {
    margin: 0 0 8px !important;
    color: #fff !important;
    font-size: clamp(20px, 1.45vw, 26px) !important;
    line-height: 1.18 !important;
  }

  #scenarios .solution-card p {
    margin: 0 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }

  /* Screen 4: cooler technical section, readable title and full cards. */
  #capability.core-tech-section {
    padding: 64px 0 !important;
    background:
      radial-gradient(circle at 72% 45%, rgba(24, 97, 150, .22), transparent 36%),
      linear-gradient(180deg, #04111e 0%, #061626 52%, #03101c 100%) !important;
  }

  #capability .capability-stage {
    width: var(--sws-container) !important;
    height: calc(100svh - 128px) !important;
    min-height: 0 !important;
    margin: 0 auto !important;
    display: grid !important;
    grid-template-columns: minmax(390px, .43fr) minmax(0, .57fr) !important;
    align-items: center !important;
    gap: clamp(36px, 5vw, 76px) !important;
  }

  #capability .capability-copy { max-width: 620px !important; }

  #capability .capability-copy h2 {
    max-width: 650px !important;
    margin: 0 0 20px !important;
    color: #fff !important;
    font-size: clamp(34px, 3.05vw, 46px) !important;
    line-height: 1.18 !important;
    word-spacing: 0 !important;
    white-space: normal !important;
  }

  #capability .capability-copy h2 br { display: block !important; }
  #capability .capability-copy p { max-width: 560px !important; margin-bottom: 30px !important; }
  #capability .core-cta { border-radius: var(--sws-radius) !important; }

  #capability .tech-console.core-card-grid {
    height: min(540px, calc(100svh - 150px)) !important;
    min-height: 450px !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 16px !important;
    padding: 16px !important;
    border-radius: 18px !important;
  }

  #capability .core-tech-card {
    min-height: 0 !important;
    padding: 24px !important;
    border-radius: var(--sws-radius) !important;
    display: flex !important;
    flex-direction: column !important;
  }

  #capability .tech-icon {
    width: 46px !important;
    height: 46px !important;
    margin-bottom: 18px !important;
  }

  #capability .core-tech-card h3 {
    margin: 0 0 8px !important;
    color: #fff !important;
    font-size: clamp(20px, 1.45vw, 26px) !important;
    line-height: 1.2 !important;
  }

  #capability .core-tech-card p { margin: 0 0 10px !important; }

  #capability .core-tech-card em {
    display: block !important;
    margin-top: auto !important;
    padding-top: 10px !important;
    border-top: 1px solid rgba(32,243,160,.16) !important;
    max-height: none !important;
    overflow: visible !important;
    font-size: 12px !important;
  }

  /* Screen 5: delivery timeline. */
  #training.ai-delivery {
    padding: 64px 0 !important;
    background:
      radial-gradient(circle at 28% 18%, rgba(32, 243, 160, .06), transparent 26%),
      linear-gradient(180deg, #0b0b0a 0%, #090a09 100%) !important;
  }

  #training .delivery-stage {
    width: var(--sws-container) !important;
    height: calc(100svh - 128px) !important;
    min-height: 0 !important;
    margin: 0 auto !important;
    display: grid !important;
    grid-template-columns: minmax(350px, .38fr) minmax(0, .62fr) !important;
    gap: clamp(38px, 5vw, 84px) !important;
    align-items: center !important;
  }

  #training .stage-head { text-align: left !important; max-width: 520px !important; margin: 0 !important; }
  #training .stage-head h2 { margin: 0 0 18px !important; color: #fff !important; }

  #training .delivery-track {
    position: relative !important;
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 14px !important;
    min-height: 360px !important;
    align-items: stretch !important;
  }

  #training .delivery-track::before {
    content: "" !important;
    position: absolute !important;
    left: 5% !important;
    right: 5% !important;
    top: 50% !important;
    height: 1px !important;
    background: linear-gradient(90deg, transparent, rgba(32,243,160,.52), transparent) !important;
  }

  #training .delivery-track article {
    position: relative !important;
    min-height: 0 !important;
    padding: 24px !important;
    border-radius: var(--sws-radius) !important;
    background: rgba(255,255,255,.024) !important;
    border: 1px solid rgba(255,255,255,.12) !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
  }

  #training .delivery-icon {
    position: absolute !important;
    left: 24px !important;
    top: 24px !important;
    width: 42px !important;
    height: 42px !important;
    stroke: var(--sws-green) !important;
  }

  #training .delivery-track article h3 {
    margin: 0 0 8px !important;
    font-size: clamp(20px, 1.45vw, 26px) !important;
    line-height: 1.18 !important;
  }

  #training .delivery-track article p { margin: 0 !important; }

  /* Screen 6: developer/resources. */
  #resources.ai-resources {
    padding: 64px 0 !important;
    background:
      radial-gradient(circle at 72% 50%, rgba(32, 243, 160, .10), transparent 34%),
      linear-gradient(180deg, #06140d 0%, #081510 100%) !important;
  }

  #resources .resource-stage {
    width: var(--sws-container) !important;
    height: calc(100svh - 128px) !important;
    min-height: 0 !important;
    margin: 0 auto !important;
    display: grid !important;
    grid-template-columns: minmax(360px, .4fr) minmax(0, .6fr) !important;
    gap: clamp(36px, 5vw, 84px) !important;
    align-items: center !important;
  }

  #resources .resource-main { min-height: 0 !important; max-width: 580px !important; }
  #resources .resource-main h2 { margin: 0 0 20px !important; color: #fff !important; }
  #resources .resource-tabs { margin-top: 28px !important; gap: 10px !important; }

  #resources .resource-panels {
    display: grid !important;
    grid-template-rows: repeat(3, minmax(0, 1fr)) !important;
    gap: 14px !important;
    min-height: 420px !important;
  }

  #resources .resource-panels article {
    position: relative !important;
    min-height: 0 !important;
    padding: 24px 28px 24px 88px !important;
    border-radius: var(--sws-radius) !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
  }

  #resources .resource-icon {
    position: absolute !important;
    left: 28px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 40px !important;
    height: 40px !important;
  }

  /* Screen 7: about. */
  #about.ai-about {
    padding: 64px 0 !important;
    background:
      radial-gradient(circle at 78% 38%, rgba(255,255,255,.06), transparent 32%),
      linear-gradient(180deg, #0c0c0c 0%, #060807 100%) !important;
  }

  #about .about-stage {
    width: var(--sws-container) !important;
    height: calc(100svh - 128px) !important;
    min-height: 0 !important;
    margin: 0 auto !important;
    display: grid !important;
    grid-template-columns: minmax(400px, .42fr) minmax(0, .58fr) !important;
    gap: clamp(46px, 6vw, 96px) !important;
    align-items: center !important;
  }

  #about .about-narrative-center {
    text-align: left !important;
    max-width: 640px !important;
  }

  #about .about-narrative-center h2 {
    margin: 0 0 22px !important;
    color: #fff !important;
    font-size: clamp(36px, 3.2vw, 50px) !important;
  }

  #about .about-video-frame {
    height: min(430px, calc(100svh - 170px)) !important;
    min-height: 320px !important;
    border-radius: var(--sws-radius) !important;
    cursor: pointer !important;
  }

  /* Footer: DJI-like columns, one-line legal row. */
  .dji-footer {
    background: #222323 !important;
    padding: 54px 0 30px !important;
  }

  .dji-footer .footer-download,
  .dji-footer .footer-mega,
  .dji-footer .footer-brandbar,
  .dji-footer .footer-legal {
    width: var(--sws-container) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .dji-footer .footer-download {
    padding-bottom: 34px !important;
    border-bottom: 1px solid rgba(255,255,255,.14) !important;
  }

  .dji-footer .footer-mega {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 34px !important;
    padding: 32px 0 !important;
  }

  .dji-footer .footer-brandbar {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) auto !important;
    gap: 26px !important;
    align-items: center !important;
    padding-top: 24px !important;
    border-top: 1px solid rgba(255,255,255,.12) !important;
  }

  .footer-social {
    display: flex !important;
    gap: 10px !important;
  }

  .footer-social a {
    width: 30px !important;
    height: 30px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    color: transparent !important;
  }

  .footer-social a::before {
    color: #fff !important;
    font-size: 13px !important;
  }

  .dji-footer .footer-legal {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 18px !important;
    padding-top: 20px !important;
  }

  .footer-records {
    display: flex !important;
    align-items: center !important;
    gap: 22px !important;
    flex-wrap: nowrap !important;
    min-width: 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
  }

  .footer-records a,
  .footer-records span {
    display: inline-flex !important;
    align-items: center !important;
    margin: 0 !important;
    white-space: nowrap !important;
    color: rgba(255,255,255,.48) !important;
  }

  .footer-records .footer-copyright,
  .footer-records .footer-tagline {
    display: inline-flex !important;
  }

  .footer-records .footer-copyright::before,
  .footer-records .footer-tagline::before {
    content: "|" !important;
    margin-right: 22px !important;
    color: rgba(255,255,255,.18) !important;
  }
}

@media (min-width: 1024px) and (max-width: 1360px) {
  :root {
    --sws-page-x: 34px;
    --sws-container: min(1180px, calc(100% - 68px));
    --sws-section-title: clamp(31px, 3vw, 40px);
    --sws-card-title: clamp(20px, 1.7vw, 25px);
    --sws-copy: 13px;
  }

  #services.ai-origin,
  #scenarios.ai-solutions,
  #capability.core-tech-section,
  #training.ai-delivery,
  #resources.ai-resources,
  #about.ai-about {
    padding-top: 48px !important;
    padding-bottom: 48px !important;
  }

  #services .infrastructure-section,
  #capability .capability-stage,
  #training .delivery-stage,
  #resources .resource-stage,
  #about .about-stage {
    height: calc(100svh - 96px) !important;
  }

  #services .infra-showcase { gap: 14px !important; }

  #services .infra-module:first-child {
    padding: 24px 28px !important;
    grid-template-columns: minmax(0, .62fr) minmax(190px, .38fr) !important;
  }

  #services .infra-module:first-child .infra-visual-base {
    width: 215px !important;
    height: 215px !important;
  }

  #services .infra-module:not(:first-child) {
    grid-template-columns: minmax(0, 1fr) 94px !important;
    padding: 18px 22px !important;
  }

  #services .infra-module:not(:first-child) .infra-visual,
  #services .infra-module:not(:first-child) .infra-visual img {
    width: 94px !important;
    height: 94px !important;
    min-width: 94px !important;
  }

  #scenarios.ai-solutions {
    grid-template-columns: minmax(260px, .32fr) minmax(0, .68fr) !important;
    gap: 28px !important;
  }

  #scenarios .solution-hero h2 {
    font-size: clamp(32px, 3.2vw, 42px) !important;
  }

  #scenarios .solution-board {
    height: min(480px, calc(100svh - 96px)) !important;
    min-height: 400px !important;
    gap: 12px !important;
  }

  #scenarios .solution-card { padding: 18px !important; }

  #scenarios .solution-visual {
    width: 64px !important;
    height: 64px !important;
    right: 14px !important;
    top: 14px !important;
  }

  #capability .capability-stage {
    grid-template-columns: minmax(350px, .4fr) minmax(0, .6fr) !important;
  }

  #capability .capability-copy h2 {
    font-size: clamp(32px, 3.05vw, 42px) !important;
  }

  #capability .tech-console.core-card-grid {
    height: min(500px, calc(100svh - 120px)) !important;
    min-height: 420px !important;
  }

  #capability .core-tech-card { padding: 20px !important; }
  #training .delivery-track { min-height: 320px !important; }
  #resources .resource-panels { min-height: 370px !important; }
}

/* 2026-05-30 rhythm6
   Desktop refinement: each homepage chapter gets its own visual temperature,
   tighter one-screen pacing, stronger hierarchy, and less repeated template structure. */
@media (min-width: 1081px) {
  :root {
    --r6-title: clamp(36px, 3vw, 46px);
    --r6-title-large: clamp(42px, 3.55vw, 54px);
    --r6-card-title: clamp(22px, 1.55vw, 28px);
    --r6-body: clamp(13px, .9vw, 15px);
    --r6-page: clamp(38px, 5.4vw, 92px);
    --r6-radius: 12px;
  }

  .ai-home {
    background:
      linear-gradient(180deg, #020504 0 24%, #03111d 42%, #0a0a09 62%, #06120c 100%) !important;
  }

  .ai-section {
    min-height: 100svh !important;
  }

  .ai-section h2,
  .ai-section h3 {
    letter-spacing: 0 !important;
    text-wrap: balance !important;
  }

  .hero-intelligence-core,
  .hero-metrics,
  .hero-slide.agent-slide::after,
  .agent-slide .hero-content::before,
  .agent-slide .hero-content::after {
    display: none !important;
  }

  #services.ai-origin {
    min-height: 100svh !important;
    height: 100svh !important;
    padding: 54px 0 42px !important;
    background:
      radial-gradient(circle at 76% 18%, rgba(32, 243, 160, .14), transparent 28%),
      radial-gradient(circle at 12% 78%, rgba(32, 243, 160, .06), transparent 24%),
      linear-gradient(180deg, #020504 0%, #05110b 52%, #06140d 100%) !important;
  }

  #services.ai-origin::before {
    background:
      linear-gradient(118deg, transparent 0 42%, rgba(32, 243, 160, .06) 43%, transparent 44%),
      linear-gradient(18deg, transparent 0 72%, rgba(185, 247, 223, .04) 73%, transparent 74%),
      radial-gradient(circle at 24% 30%, rgba(185, 247, 223, .25) 0 1.5px, transparent 3px),
      radial-gradient(circle at 70% 22%, rgba(32, 243, 160, .28) 0 2px, transparent 3.5px),
      radial-gradient(circle at 86% 78%, rgba(185, 247, 223, .22) 0 2px, transparent 3.5px),
      linear-gradient(rgba(255,255,255,.022) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px) !important;
    background-size: auto, auto, auto, auto, auto, 30px 30px, 30px 30px !important;
    opacity: .52 !important;
  }

  #services .infrastructure-section {
    width: min(1280px, calc(100% - var(--r6-page) * 2)) !important;
    min-height: calc(100svh - 96px) !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
    gap: 24px !important;
  }

  #services .infra-hero {
    max-width: 760px !important;
  }

  #services .infra-pill {
    min-height: 30px !important;
    padding: 4px 18px !important;
    font-size: 12px !important;
  }

  #services .infra-hero h2 {
    margin: 14px 0 8px !important;
    font-size: var(--r6-title) !important;
    line-height: 1.08 !important;
  }

  #services .infra-hero p {
    font-size: var(--r6-body) !important;
    line-height: 1.58 !important;
  }

  #services .infra-metrics {
    margin-top: 12px !important;
    gap: 20px !important;
  }

  #services .infra-metrics strong {
    font-size: 24px !important;
  }

  #services .infra-showcase {
    height: min(430px, calc(100svh - 270px)) !important;
    min-height: 390px !important;
    grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr) !important;
    grid-template-rows: repeat(3, minmax(0, 1fr)) !important;
    gap: 18px !important;
  }

  #services .infra-module:first-child {
    padding: 26px 30px !important;
    grid-template-columns: minmax(0, .58fr) minmax(205px, .42fr) !important;
  }

  #services .infra-module:not(:first-child),
  #services .infra-module.reverse:not(:first-child) {
    grid-template-columns: minmax(0, 1fr) 132px !important;
    gap: 18px !important;
    padding: 20px 24px !important;
  }

  #services .infra-copy span {
    font-size: 12px !important;
    color: var(--r5-green-soft) !important;
  }

  #services .infra-copy h3,
  #services .infra-module:first-child .infra-copy h3 {
    margin: 13px 0 12px !important;
    font-size: var(--r6-card-title) !important;
    line-height: 1.16 !important;
    white-space: normal !important;
  }

  #services .infra-copy p {
    font-size: 14px !important;
    line-height: 1.62 !important;
  }

  #services .infra-copy ul {
    margin-top: 20px !important;
    gap: 9px !important;
  }

  #services .infra-copy li {
    font-size: 13px !important;
    line-height: 1.4 !important;
  }

  #services .infra-module:not(:first-child) .infra-visual,
  #services .infra-module:not(:first-child) .infra-visual img {
    width: 126px !important;
    height: 126px !important;
    min-width: 126px !important;
  }

  #services .infra-module:first-child .infra-visual-base {
    right: 26px !important;
    bottom: 18px !important;
    width: clamp(205px, 18vw, 250px) !important;
    height: clamp(205px, 18vw, 250px) !important;
  }

  #services .infra-module:first-child .infra-visual-base .infra-orb-static {
    animation: r6OrbBreath 5.8s ease-in-out infinite !important;
  }

  #services .infra-module:first-child .infra-visual-base .infra-orb-spin {
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    opacity: .58 !important;
    mix-blend-mode: screen !important;
    filter: brightness(1.18) contrast(1.12) drop-shadow(0 0 28px rgba(32, 243, 160, .45)) !important;
    clip-path: circle(36% at 52% 43%) !important;
    transform-origin: 52% 43% !important;
    animation: r6OrbTextureTurn 7s linear infinite !important;
  }

  #services .infra-module:first-child .infra-visual-base::before,
  #services .infra-module:first-child .infra-visual-base::after {
    content: none !important;
    display: none !important;
  }

  @keyframes r6OrbTextureTurn {
    0% { transform: rotate(0deg) scale(1.005); }
    100% { transform: rotate(360deg) scale(1.005); }
  }

  @keyframes r6OrbBreath {
    0%, 100% { transform: translate3d(0, 0, 0) scale(1); filter: brightness(1.08) contrast(1.06) drop-shadow(0 0 30px rgba(32, 243, 160, .45)); }
    50% { transform: translate3d(0, -4px, 0) scale(1.018); filter: brightness(1.16) contrast(1.08) drop-shadow(0 0 40px rgba(32, 243, 160, .62)); }
  }

  #scenarios.ai-solutions {
    min-height: 100svh !important;
    height: 100svh !important;
    padding: 58px var(--r6-page) 52px !important;
    grid-template-columns: minmax(280px, .31fr) minmax(0, .69fr) !important;
    gap: clamp(34px, 4vw, 64px) !important;
    align-items: center !important;
    background:
      radial-gradient(circle at 16% 48%, rgba(32, 243, 160, .10), transparent 25%),
      linear-gradient(110deg, #040706 0%, #07110d 42%, #071c11 100%) !important;
  }

  #scenarios .solution-hero {
    max-width: 430px !important;
    text-align: left !important;
    margin: 0 !important;
  }

  #scenarios .solution-badge {
    min-height: 30px !important;
    padding: 4px 16px !important;
    font-size: 12px !important;
  }

  #scenarios .solution-hero h2 {
    margin: 22px 0 14px !important;
    font-size: clamp(38px, 3.4vw, 52px) !important;
    line-height: 1.12 !important;
    text-align: left !important;
  }

  #scenarios .solution-subtitle {
    max-width: 390px !important;
    font-size: 14px !important;
    line-height: 1.7 !important;
  }

  #scenarios .solution-stats {
    margin-top: 24px !important;
    gap: 10px !important;
    justify-content: flex-start !important;
  }

  #scenarios .solution-stats span {
    min-height: 34px !important;
    padding: 0 15px !important;
  }

  #scenarios .solution-divider {
    display: none !important;
  }

  #scenarios .solution-board {
    height: min(520px, calc(100svh - 126px)) !important;
    min-height: 420px !important;
    grid-template-columns: minmax(220px, 1.14fr) repeat(3, minmax(132px, .78fr)) !important;
    grid-template-rows: repeat(2, minmax(0, 1fr)) !important;
    gap: 14px !important;
  }

  #scenarios .solution-card:first-child {
    padding: 24px !important;
  }

  #scenarios .solution-card:not(:first-child) {
    padding: 18px !important;
  }

  #scenarios .solution-card:first-child .solution-visual {
    min-height: 148px !important;
  }

  #scenarios .solution-visual,
  #scenarios .solution-card:not(:first-child) .solution-visual {
    min-height: 78px !important;
  }

  #scenarios .solution-card:first-child .solution-icon {
    width: clamp(88px, 7vw, 118px) !important;
    height: clamp(88px, 7vw, 118px) !important;
  }

  #scenarios .solution-icon,
  #scenarios .solution-card:not(:first-child) .solution-icon {
    width: clamp(48px, 4vw, 70px) !important;
    height: clamp(48px, 4vw, 70px) !important;
  }

  #scenarios .solution-card h3,
  #scenarios .solution-card:first-child h3 {
    margin: 10px 0 8px !important;
    font-size: clamp(18px, 1.25vw, 23px) !important;
    line-height: 1.22 !important;
  }

  #scenarios .solution-card p,
  #scenarios .solution-card:first-child p {
    font-size: 12px !important;
    line-height: 1.55 !important;
  }

  #capability.core-tech-section {
    min-height: 100svh !important;
    height: 100svh !important;
    padding: 64px var(--r6-page) 58px !important;
    background:
      radial-gradient(circle at 76% 30%, rgba(32, 243, 160, .10), transparent 28%),
      linear-gradient(180deg, #04111e 0%, #06111b 50%, #071017 100%) !important;
  }

  #capability .capability-stage {
    width: min(1280px, calc(100% - 0px)) !important;
    min-height: calc(100svh - 122px) !important;
    grid-template-columns: minmax(380px, .42fr) minmax(0, .58fr) !important;
    gap: clamp(36px, 4.4vw, 68px) !important;
  }

  #capability .capability-copy h2 {
    max-width: 660px !important;
    margin-top: 24px !important;
    font-size: clamp(38px, 3.25vw, 52px) !important;
    line-height: 1.16 !important;
  }

  #capability .capability-copy h2 br {
    display: initial !important;
  }

  #capability .capability-copy p {
    max-width: 540px !important;
    margin-top: 24px !important;
    font-size: 14px !important;
    line-height: 1.78 !important;
  }

  #capability .tech-console.core-card-grid {
    gap: 14px !important;
    padding: 16px !important;
  }

  #capability .core-tech-card {
    min-height: 205px !important;
    padding: 24px !important;
  }

  #capability .tech-icon {
    width: 72px !important;
    height: 72px !important;
    margin-bottom: 18px !important;
  }

  #capability .core-tech-card h3 {
    font-size: clamp(20px, 1.35vw, 24px) !important;
  }

  #capability .core-tech-card em {
    font-size: 11px !important;
    line-height: 1.5 !important;
  }

  #training.ai-delivery {
    min-height: 100svh !important;
    height: 100svh !important;
    padding: 64px var(--r6-page) 58px !important;
    background:
      radial-gradient(circle at 16% 40%, rgba(32, 243, 160, .08), transparent 28%),
      linear-gradient(180deg, #0c0d0d 0%, #090a09 100%) !important;
  }

  #training .delivery-stage {
    min-height: calc(100svh - 122px) !important;
    grid-template-columns: minmax(340px, .38fr) minmax(0, .62fr) !important;
    gap: clamp(38px, 5vw, 76px) !important;
  }

  #training .stage-head h2 {
    font-size: var(--r6-title) !important;
  }

  #training .delivery-track {
    gap: 16px !important;
  }

  #training .delivery-track article {
    min-height: 104px !important;
    padding: 19px 22px 19px 88px !important;
  }

  #training .delivery-icon {
    width: 48px !important;
    height: 48px !important;
    left: 22px !important;
    top: 22px !important;
  }

  #resources.ai-resources {
    min-height: 100svh !important;
    height: 100svh !important;
    padding: 64px var(--r6-page) 58px !important;
    background:
      radial-gradient(circle at 70% 24%, rgba(32, 243, 160, .09), transparent 30%),
      linear-gradient(180deg, #06130d 0%, #031009 100%) !important;
  }

  #resources .resource-stage {
    min-height: calc(100svh - 122px) !important;
    grid-template-columns: minmax(330px, .36fr) minmax(0, .64fr) !important;
    gap: clamp(36px, 5vw, 72px) !important;
  }

  #resources .resource-main h2 {
    font-size: var(--r6-title) !important;
  }

  #resources .resource-panels {
    gap: 14px !important;
  }

  #resources .resource-panels article {
    min-height: 132px !important;
    grid-template-columns: 74px minmax(0, 1fr) !important;
    padding: 22px !important;
  }

  #resources .resource-icon {
    width: 58px !important;
    height: 58px !important;
  }

  #about.ai-about {
    min-height: 100svh !important;
    height: 100svh !important;
    padding: 64px var(--r6-page) 58px !important;
    background:
      radial-gradient(circle at 78% 24%, rgba(32, 243, 160, .08), transparent 30%),
      linear-gradient(180deg, #0a0b0b 0%, #050806 100%) !important;
  }

  #about .about-stage {
    min-height: calc(100svh - 122px) !important;
    grid-template-columns: minmax(360px, .42fr) minmax(0, .58fr) !important;
  }

  #about .about-narrative-center h2 {
    font-size: var(--r6-title) !important;
  }

  #about .about-video-frame {
    min-height: min(48vh, 430px) !important;
  }

  .dji-footer {
    background:
      radial-gradient(circle at 72% 0%, rgba(32, 243, 160, .07), transparent 32%),
      #202220 !important;
  }

  .dji-footer .footer-download {
    padding: 46px 0 !important;
  }

  .dji-footer .footer-mega {
    padding: 38px 0 34px !important;
  }

  .footer-records {
    gap: 18px !important;
  }
}

@media (min-width: 1081px) and (max-width: 1360px) {
  #services .infrastructure-section,
  #capability .capability-stage,
  #training .delivery-stage,
  #resources .resource-stage,
  #about .about-stage {
    width: min(1160px, calc(100% - 56px)) !important;
  }

  #services .infra-showcase {
    height: min(410px, calc(100svh - 260px)) !important;
  }

  #services .infra-module:first-child {
    grid-template-columns: minmax(0, .62fr) minmax(180px, .38fr) !important;
  }

  #services .infra-module:first-child .infra-visual-base {
    width: 205px !important;
    height: 205px !important;
  }

  #services .infra-module:not(:first-child),
  #services .infra-module.reverse:not(:first-child) {
    grid-template-columns: minmax(0, 1fr) 110px !important;
  }

  #services .infra-module:not(:first-child) .infra-visual,
  #services .infra-module:not(:first-child) .infra-visual img {
    width: 108px !important;
    height: 108px !important;
    min-width: 108px !important;
  }

  #scenarios.ai-solutions {
    grid-template-columns: minmax(270px, .30fr) minmax(0, .70fr) !important;
    gap: 32px !important;
  }

  #scenarios .solution-board {
    height: min(505px, calc(100svh - 128px)) !important;
    grid-template-columns: minmax(210px, 1.1fr) repeat(3, minmax(120px, .78fr)) !important;
  }

  #scenarios .solution-card:not(:first-child) {
    padding: 16px !important;
  }

  #capability .capability-stage {
    grid-template-columns: minmax(360px, .40fr) minmax(0, .60fr) !important;
  }

  #capability .capability-copy h2 {
    font-size: clamp(36px, 3vw, 46px) !important;
  }

  #capability .core-tech-card {
    min-height: 190px !important;
    padding: 22px !important;
  }
}

@media (max-width: 760px) {
  :root {
    --rhythm-title: clamp(30px, 9vw, 42px);
    --rhythm-title-lg: clamp(38px, 13vw, 56px);
  }

  #services.ai-origin,
  #scenarios.ai-solutions,
  #capability.core-tech-section,
  #training.ai-delivery,
  #resources.ai-resources,
  #about.ai-about {
    min-height: auto !important;
    padding: 64px 0 !important;
  }

  #services .infrastructure-section,
  #scenarios .solution-hero,
  #scenarios .solution-board,
  #capability .capability-stage,
  #training .delivery-stage,
  #resources .resource-stage,
  #about .about-stage,
  .dji-footer .footer-mega,
  .dji-footer .footer-brandbar,
  .dji-footer .footer-legal {
    width: min(100% - 32px, 640px) !important;
  }

  #services .infra-metrics,
  #scenarios .solution-stats {
    display: none !important;
  }

  #services .infra-module:first-child,
  #services .infra-module:not(:first-child) {
    grid-template-columns: 1fr !important;
    min-height: 300px !important;
    padding: 24px !important;
  }

  #services .infra-module:first-child .infra-visual-base {
    position: relative !important;
    right: auto !important;
    bottom: auto !important;
    justify-self: center !important;
    margin-top: 18px !important;
  }

  #services .infra-module:not(:first-child) .infra-visual {
    position: absolute !important;
    right: 20px !important;
    bottom: 20px !important;
    width: 84px !important;
    height: 84px !important;
    min-width: 84px !important;
  }

  #scenarios .solution-board,
  #capability .tech-console.core-card-grid {
    grid-template-columns: 1fr !important;
  }

  #scenarios .solution-card:first-child,
  #scenarios .solution-card:nth-child(4) {
    grid-template-columns: 1fr !important;
  }

  #scenarios .solution-card:nth-child(4) .solution-visual {
    display: none !important;
  }

  #resources .resource-panels article {
    grid-template-columns: 1fr !important;
  }

  .resource-icon {
    grid-row: auto !important;
  }

  .dji-footer .footer-mega {
    grid-template-columns: 1fr !important;
  }
}

/* 2026-05-29 final homepage rhythm pass
   Goal: remove the template feeling by giving every screen a distinct visual job,
   while keeping the approved carousel imagery untouched. */
:root {
  --sws-title: clamp(34px, 3vw, 48px);
  --sws-title-lg: clamp(42px, 4.1vw, 64px);
  --sws-panel-title: clamp(22px, 1.55vw, 30px);
  --sws-body: clamp(13px, .9vw, 15px);
  --sws-radius: 12px;
}

body {
  background: #020605 !important;
}

.hero-intelligence-core,
.hero-metrics,
.agent-slide .hero-content::before,
.agent-slide .hero-content::after {
  display: none !important;
}

.ai-home {
  background: #020605 !important;
}

.ai-section {
  overflow: hidden !important;
  isolation: isolate !important;
}

.ai-section::after {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  height: 1px !important;
  background: linear-gradient(90deg, transparent, rgba(32, 243, 160, .18), transparent) !important;
  pointer-events: none !important;
}

.infra-pill,
.solution-badge,
.core-badge,
.section-mark {
  min-height: 34px !important;
  padding: 7px 18px !important;
  border-radius: 999px !important;
  font-size: 13px !important;
  letter-spacing: .08em !important;
}

/* Screen 2: product platform as a compact command-center, not a tall template card stack. */
#services.ai-origin {
  min-height: 100svh !important;
  padding: 70px 0 58px !important;
  display: flex !important;
  align-items: center !important;
  background:
    radial-gradient(circle at 50% 4%, rgba(32, 243, 160, .13), transparent 22%),
    radial-gradient(circle at 92% 54%, rgba(32, 243, 160, .17), transparent 34%),
    linear-gradient(180deg, #020605 0%, #06140d 58%, #020605 100%) !important;
}

#services.ai-origin::before {
  background:
    radial-gradient(circle at 16% 28%, rgba(32, 243, 160, .14), transparent 18%),
    radial-gradient(circle at 78% 78%, rgba(32, 243, 160, .10), transparent 20%),
    linear-gradient(rgba(32, 243, 160, .026) 1px, transparent 1px),
    linear-gradient(90deg, rgba(32, 243, 160, .026) 1px, transparent 1px) !important;
  background-size: 100% 100%, 100% 100%, 22px 22px, 22px 22px !important;
  opacity: .55 !important;
}

#services .infrastructure-section {
  width: min(1240px, calc(100% - 88px)) !important;
  min-height: auto !important;
  margin: 0 auto !important;
  display: grid !important;
  grid-template-rows: auto auto !important;
  gap: 24px !important;
}

#services .infra-hero {
  max-width: 760px !important;
}

#services .infra-hero h2 {
  font-size: var(--sws-title) !important;
  line-height: 1.1 !important;
  letter-spacing: 0 !important;
}

#services .infra-hero p {
  max-width: 700px !important;
  margin-top: 12px !important;
  font-size: 15px !important;
  line-height: 1.6 !important;
}

#services .infra-metrics {
  width: min(500px, 100%) !important;
  margin-top: 14px !important;
  padding-top: 12px !important;
}

#services .infra-metrics strong {
  font-size: 26px !important;
}

#services .infra-showcase {
  display: grid !important;
  grid-template-columns: minmax(0, 1.06fr) minmax(0, .94fr) !important;
  grid-template-rows: repeat(3, 132px) !important;
  gap: 18px !important;
  height: auto !important;
}

#services .infra-module,
#services .infra-module.reverse,
#services .infra-module:not(:first-child) {
  border-radius: var(--sws-radius) !important;
  border-color: rgba(255, 255, 255, .11) !important;
  background:
    radial-gradient(circle at 84% 52%, rgba(32, 243, 160, .18), transparent 34%),
    linear-gradient(135deg, rgba(255, 255, 255, .042), rgba(255, 255, 255, .012)) !important;
}

#services .infra-module:first-child {
  min-height: 432px !important;
  padding: 34px !important;
  grid-template-columns: minmax(0, .74fr) minmax(190px, .44fr) !important;
}

#services .infra-module:not(:first-child) {
  min-height: 132px !important;
  grid-template-columns: minmax(0, 1fr) 104px !important;
  padding: 22px 24px !important;
}

#services .infra-copy span {
  font-size: 12px !important;
  color: #5dcaa5 !important;
}

#services .infra-copy h3,
#services .infra-module:first-child .infra-copy h3 {
  margin: 14px 0 14px !important;
  font-size: var(--sws-panel-title) !important;
  line-height: 1.12 !important;
}

#services .infra-copy h3::after {
  width: 42px !important;
  height: 2px !important;
  margin-top: 14px !important;
}

#services .infra-copy p,
#services .infra-module:first-child .infra-copy p {
  font-size: var(--sws-body) !important;
  line-height: 1.62 !important;
  color: #8bbfaa !important;
}

#services .infra-copy ul {
  margin-top: 22px !important;
  gap: 9px !important;
}

#services .infra-copy li {
  font-size: 13px !important;
}

#services .infra-module:not(:first-child) .infra-copy p {
  -webkit-line-clamp: 2 !important;
}

#services .infra-module:not(:first-child) .infra-visual {
  width: 104px !important;
  height: 104px !important;
  min-width: 104px !important;
  transform: translateX(6px) !important;
}

#services .infra-module:not(:first-child) .infra-visual img {
  width: 104px !important;
  height: 104px !important;
  mix-blend-mode: screen !important;
  filter: brightness(1.14) contrast(1.06) drop-shadow(0 0 16px rgba(32, 243, 160, .38)) !important;
}

#services .infra-module:first-child .infra-visual-base {
  right: 36px !important;
  bottom: 22px !important;
  width: clamp(174px, 16vw, 218px) !important;
  height: clamp(174px, 16vw, 218px) !important;
}

#services .infra-module:first-child .infra-visual-base .infra-orb-spin {
  display: none !important;
}

#services .infra-module:first-child .infra-visual-base .infra-orb-static {
  animation: swsOrbFloat 5.4s ease-in-out infinite !important;
  transform-origin: 50% 64% !important;
}

#services .infra-module:first-child .infra-visual-base::before {
  inset: 19% 18% 30% 18% !important;
  border-radius: 50% !important;
  background:
    repeating-linear-gradient(92deg, transparent 0 16px, rgba(242,255,251,.28) 17px 18px, transparent 20px 36px),
    radial-gradient(circle at 68% 28%, rgba(255,255,255,.62), transparent 17%) !important;
  background-size: 115px 100px, 100% 100% !important;
  mix-blend-mode: screen !important;
  opacity: .36 !important;
  animation: swsOrbLines 7.5s linear infinite !important;
}

#services .infra-module:first-child .infra-visual-base::after {
  left: 24% !important;
  right: 18% !important;
  top: 36% !important;
  height: 28% !important;
  border-radius: 50% !important;
  background: linear-gradient(95deg, transparent 0%, rgba(255,255,255,.24) 46%, rgba(32,243,160,.25) 52%, transparent 74%) !important;
  background-size: 210% 100% !important;
  mix-blend-mode: screen !important;
  opacity: .28 !important;
  filter: blur(4px) !important;
  animation: swsOrbSweep 6s ease-in-out infinite !important;
}

@keyframes swsOrbFloat {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(0, -4px, 0) scale(1.012); }
}

@keyframes swsOrbLines {
  to { background-position: 115px 0, 0 0; }
}

@keyframes swsOrbSweep {
  0%, 100% { background-position: -100% 0; opacity: .12; }
  50% { background-position: 90% 0; opacity: .42; }
}

/* Screen 3: solution page becomes a Bento story with a real visual hierarchy. */
#scenarios.ai-solutions {
  min-height: 100svh !important;
  padding: 70px clamp(36px, 5vw, 88px) 64px !important;
  display: grid !important;
  grid-template-columns: minmax(280px, .34fr) minmax(0, .66fr) !important;
  gap: clamp(34px, 4vw, 56px) !important;
  align-items: center !important;
  background:
    radial-gradient(circle at 90% 10%, rgba(32, 243, 160, .10), transparent 24%),
    linear-gradient(112deg, #020605 0%, #04100a 55%, #071308 100%) !important;
}

#scenarios.ai-solutions::before {
  background:
    linear-gradient(124deg, transparent 0 40%, rgba(32, 243, 160, .06) 40.4% 42%, transparent 42.6%),
    radial-gradient(circle at 78% 32%, rgba(32, 243, 160, .12), transparent 24%) !important;
  opacity: .72 !important;
}

#scenarios .solution-hero {
  width: auto !important;
  margin: 0 !important;
  display: block !important;
  text-align: left !important;
}

#scenarios .solution-badge {
  margin-bottom: 22px !important;
}

#scenarios .solution-hero h2 {
  max-width: 520px !important;
  margin: 0 !important;
  color: #fff !important;
  font-size: clamp(42px, 4.6vw, 68px) !important;
  line-height: 1.06 !important;
  font-weight: 650 !important;
}

#scenarios .solution-subtitle {
  max-width: 430px !important;
  margin: 26px 0 0 !important;
  color: #8bbfaa !important;
  font-size: 15px !important;
  line-height: 1.72 !important;
}

#scenarios .solution-stats {
  display: flex !important;
  width: min(410px, 100%) !important;
  margin-top: 26px !important;
  padding-top: 0 !important;
  border-top: 0 !important;
  flex-wrap: wrap !important;
  justify-content: flex-start !important;
  gap: 10px !important;
}

#scenarios .solution-stats span {
  flex: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  min-height: 34px !important;
  padding: 7px 14px !important;
  border: 1px solid rgba(32, 243, 160, .28) !important;
  border-radius: 999px !important;
  color: #8bbfaa !important;
  font-size: 12px !important;
  background: rgba(32, 243, 160, .035) !important;
}

#scenarios .solution-stats strong {
  color: #dffcf2 !important;
  font-size: 18px !important;
}

#scenarios .solution-board {
  width: auto !important;
  margin: 0 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1.12fr) repeat(3, minmax(0, .84fr)) !important;
  grid-template-rows: 196px 196px !important;
  gap: 16px !important;
}

#scenarios .solution-card,
#scenarios .solution-card:first-child,
#scenarios .solution-card:nth-child(2),
#scenarios .solution-card:nth-child(3),
#scenarios .solution-card:nth-child(4),
#scenarios .solution-card:nth-child(5),
#scenarios .solution-card:nth-child(6) {
  min-height: 0 !important;
  border-radius: var(--sws-radius) !important;
  grid-template-columns: 1fr !important;
  grid-template-rows: 84px 1fr !important;
}

#scenarios .solution-card:first-child {
  grid-column: 1 !important;
  grid-row: 1 / span 2 !important;
}

#scenarios .solution-card:nth-child(2) { grid-column: 2 !important; grid-row: 1 !important; }
#scenarios .solution-card:nth-child(3) { grid-column: 3 !important; grid-row: 1 !important; }
#scenarios .solution-card:nth-child(4) { grid-column: 4 !important; grid-row: 1 !important; }
#scenarios .solution-card:nth-child(5) { grid-column: 2 !important; grid-row: 2 !important; }
#scenarios .solution-card:nth-child(6) { grid-column: 3 / span 2 !important; grid-row: 2 !important; }

#scenarios .solution-visual,
#scenarios .solution-card:first-child .solution-visual,
#scenarios .solution-card:nth-child(4) .solution-visual,
#scenarios .solution-card:nth-child(5) .solution-visual,
#scenarios .solution-card:nth-child(6) .solution-visual {
  grid-column: auto !important;
  grid-row: 1 !important;
  height: 84px !important;
  padding: 22px 24px 0 !important;
  justify-content: flex-start !important;
  align-items: flex-start !important;
}

#scenarios .solution-icon,
#scenarios .solution-card:first-child .solution-icon,
#scenarios .solution-card:not(:first-child) .solution-icon,
#scenarios .solution-card:nth-child(4) .solution-icon,
#scenarios .solution-card:nth-child(5) .solution-icon,
#scenarios .solution-card:nth-child(6) .solution-icon {
  width: 54px !important;
  height: 54px !important;
  stroke-width: 2.2 !important;
}

#scenarios .solution-card:first-child .solution-icon {
  width: 86px !important;
  height: 86px !important;
}

#scenarios .solution-content,
#scenarios .solution-card:first-child .solution-content,
#scenarios .solution-card:nth-child(4) .solution-content,
#scenarios .solution-card:nth-child(5) .solution-content,
#scenarios .solution-card:nth-child(6) .solution-content {
  grid-column: auto !important;
  grid-row: 2 !important;
  padding: 16px 24px 24px !important;
  align-self: end !important;
}

#scenarios .solution-content span {
  margin-bottom: 10px !important;
  font-size: 12px !important;
}

#scenarios .solution-card h3,
#scenarios .solution-card:first-child h3,
#scenarios .solution-card:nth-child(4) h3,
#scenarios .solution-card:nth-child(5) h3,
#scenarios .solution-card:nth-child(6) h3 {
  font-size: clamp(19px, 1.38vw, 24px) !important;
  line-height: 1.2 !important;
}

#scenarios .solution-card p,
#scenarios .solution-card:first-child .solution-content p,
#scenarios .solution-card:nth-child(4) p,
#scenarios .solution-card:nth-child(5) p,
#scenarios .solution-card:nth-child(6) p {
  -webkit-line-clamp: 2 !important;
  font-size: 13px !important;
  line-height: 1.6 !important;
}

/* Screen 4: technical architecture uses a cooler blue system tone. */
#capability.core-tech-section {
  min-height: 100svh !important;
  padding: 78px 0 !important;
  background:
    radial-gradient(circle at 76% 34%, rgba(32, 243, 160, .10), transparent 30%),
    radial-gradient(circle at 22% 72%, rgba(68, 131, 255, .10), transparent 28%),
    linear-gradient(180deg, #04111e 0%, #061522 54%, #02070d 100%) !important;
}

#capability .capability-stage {
  min-height: calc(100svh - 156px) !important;
  width: min(1240px, calc(100% - 88px)) !important;
  grid-template-columns: minmax(0, .86fr) minmax(0, 1.14fr) !important;
  gap: clamp(42px, 5vw, 68px) !important;
}

#capability.core-tech-section .capability-copy h2 {
  max-width: 720px !important;
  font-size: clamp(38px, 3.7vw, 58px) !important;
  line-height: 1.15 !important;
  word-break: keep-all !important;
  overflow-wrap: normal !important;
}

#capability.core-tech-section .capability-copy h2 br {
  display: none !important;
}

#capability .capability-copy p {
  max-width: 620px !important;
  font-size: 15px !important;
}

#capability .tech-console.core-card-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 16px !important;
  padding: 18px !important;
}

#capability .core-tech-card {
  min-height: 218px !important;
  padding: 24px !important;
}

#capability .tech-icon {
  width: 64px !important;
  height: 64px !important;
  margin-bottom: 20px !important;
}

#capability .core-tech-card h3 {
  font-size: clamp(20px, 1.45vw, 25px) !important;
}

#capability .core-tech-card em {
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

/* Screens 5-7: break the repeated-card rhythm with timeline, tabs, and cinematic story. */
#training.ai-delivery {
  background:
    radial-gradient(circle at 80% 18%, rgba(32, 243, 160, .08), transparent 28%),
    linear-gradient(180deg, #101111 0%, #070807 100%) !important;
}

#resources.ai-resources {
  background:
    radial-gradient(circle at 30% 24%, rgba(32, 243, 160, .10), transparent 30%),
    linear-gradient(180deg, #06130d 0%, #02110a 100%) !important;
}

#about.ai-about {
  background:
    radial-gradient(circle at 72% 22%, rgba(32, 243, 160, .09), transparent 30%),
    linear-gradient(180deg, #0b0c0c 0%, #050806 100%) !important;
}

#training .stage-head h2,
#resources .resource-main h2 {
  font-size: var(--sws-title) !important;
  line-height: 1.14 !important;
}

#about .about-narrative-center h2 {
  font-size: clamp(42px, 4.2vw, 68px) !important;
  line-height: 1.14 !important;
}

#resources .resource-panels article {
  overflow: hidden !important;
}

/* Footer: keep records, copyright and tagline on one aligned legal line. */
.dji-footer {
  background: #202220 !important;
}

.dji-footer .footer-legal {
  display: flex !important;
  align-items: center !important;
  gap: 28px !important;
  padding: 20px 0 30px !important;
}

.footer-records {
  display: flex !important;
  flex: 1 1 auto !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 0 !important;
}

.footer-records a,
.footer-records span {
  display: inline-flex !important;
  align-items: center !important;
  margin-right: 24px !important;
  color: rgba(255, 255, 255, .52) !important;
  white-space: nowrap !important;
}

.footer-records .footer-copyright,
.footer-records .footer-tagline {
  margin-left: 0 !important;
}

.footer-records .footer-copyright::before,
.footer-records .footer-tagline::before {
  content: "" !important;
  display: inline-block !important;
  width: 1px !important;
  height: 14px !important;
  margin-right: 24px !important;
  background: rgba(255, 255, 255, .18) !important;
}

.footer-social a {
  min-width: 34px !important;
  height: 34px !important;
  border-radius: 50% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

@media (max-width: 1180px) {
  #services.ai-origin,
  #scenarios.ai-solutions,
  #capability.core-tech-section {
    min-height: auto !important;
    padding-top: 72px !important;
    padding-bottom: 72px !important;
  }

  #scenarios.ai-solutions {
    grid-template-columns: 1fr !important;
  }

  #scenarios .solution-hero {
    text-align: center !important;
  }

  #scenarios .solution-hero h2,
  #scenarios .solution-subtitle {
    margin-left: auto !important;
    margin-right: auto !important;
  }

  #scenarios .solution-stats {
    justify-content: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  #services .infra-showcase,
  #capability .capability-stage {
    grid-template-columns: 1fr !important;
  }

  #services .infra-module:first-child,
  #services .infra-module:nth-child(2),
  #services .infra-module:nth-child(3),
  #services .infra-module:nth-child(4) {
    grid-column: auto !important;
    grid-row: auto !important;
  }

  #scenarios .solution-board {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-template-rows: auto !important;
  }

  #scenarios .solution-card,
  #scenarios .solution-card:first-child,
  #scenarios .solution-card:nth-child(2),
  #scenarios .solution-card:nth-child(3),
  #scenarios .solution-card:nth-child(4),
  #scenarios .solution-card:nth-child(5),
  #scenarios .solution-card:nth-child(6) {
    grid-column: auto !important;
    grid-row: auto !important;
    min-height: 220px !important;
  }
}

@media (max-width: 760px) {
  #services .infrastructure-section,
  #capability .capability-stage,
  #training .delivery-stage,
  #resources .resource-stage,
  #about .about-stage {
    width: min(100% - 32px, 640px) !important;
  }

  #services .infra-showcase,
  #services .infra-module:first-child,
  #services .infra-module:not(:first-child),
  #scenarios .solution-board,
  #capability .tech-console.core-card-grid {
    grid-template-columns: 1fr !important;
  }

  #services .infra-module:first-child {
    min-height: 420px !important;
  }

  #services .infra-module:first-child .infra-visual-base {
    position: relative !important;
    right: auto !important;
    bottom: auto !important;
    margin: 20px auto 0 !important;
  }

  #services .infra-module:not(:first-child) {
    grid-template-columns: 1fr 86px !important;
  }

  #scenarios.ai-solutions {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  #scenarios .solution-board {
    width: 100% !important;
  }

  .dji-footer .footer-legal {
    align-items: flex-start !important;
    flex-direction: column !important;
  }
}

/* 2026-05-30 rhythm4: final section rhythm system.
   Each homepage screen now has a distinct layout, density and color temperature. */
:root {
  --sws-page-x: clamp(32px, 5.6vw, 118px);
  --sws-section-title: clamp(34px, 3.1vw, 48px);
  --sws-section-title-lg: clamp(40px, 3.7vw, 56px);
  --sws-card-title: clamp(22px, 1.55vw, 28px);
  --sws-text: clamp(13px, .9vw, 15px);
  --sws-muted: #8bbfaa;
  --sws-green: #20f3a0;
  --sws-green-soft: #5dcaa5;
  --sws-panel: rgba(255, 255, 255, .035);
  --sws-line: rgba(255, 255, 255, .11);
}

html {
  scroll-padding-top: 86px;
}

body {
  background: #020504 !important;
  color: #fff;
}

.hero-intelligence-core,
.hero-metrics,
.agent-slide .hero-content::before,
.agent-slide .hero-content::after,
.solution-divider {
  display: none !important;
}

.ai-home {
  background:
    linear-gradient(180deg, #020504 0%, #06120d 19%, #03101a 46%, #0a0a0a 70%, #06130d 100%) !important;
}

.ai-section {
  position: relative;
  overflow: hidden !important;
  isolation: isolate;
}

.ai-section::after {
  content: "";
  position: absolute;
  left: var(--sws-page-x);
  right: var(--sws-page-x);
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(32, 243, 160, .20), transparent);
  pointer-events: none;
}

.infra-pill,
.solution-badge,
.core-badge,
.section-mark {
  display: inline-flex !important;
  align-items: center !important;
  width: auto !important;
  min-height: 32px !important;
  padding: 6px 16px !important;
  border: 1px solid rgba(32, 243, 160, .68) !important;
  border-radius: 999px !important;
  color: #9fe1cb !important;
  font-size: 13px !important;
  line-height: 1 !important;
  letter-spacing: .08em !important;
  background: rgba(32, 243, 160, .035) !important;
  box-shadow: none !important;
}

/* Screen 2: product platform, compact command center with animated capability orb. */
#services.ai-origin {
  min-height: 100svh !important;
  padding: 86px 0 46px !important;
  display: flex !important;
  align-items: center !important;
  background:
    radial-gradient(circle at 50% 6%, rgba(32, 243, 160, .13), transparent 21%),
    radial-gradient(circle at 88% 52%, rgba(32, 243, 160, .15), transparent 34%),
    linear-gradient(180deg, #020504 0%, #06170e 50%, #020504 100%) !important;
}

#services.ai-origin::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background:
    radial-gradient(circle at 14% 31%, rgba(32, 243, 160, .13), transparent 15%),
    radial-gradient(circle at 76% 71%, rgba(32, 243, 160, .10), transparent 18%),
    linear-gradient(rgba(32, 243, 160, .026) 1px, transparent 1px),
    linear-gradient(90deg, rgba(32, 243, 160, .026) 1px, transparent 1px) !important;
  background-size: 100% 100%, 100% 100%, 22px 22px, 22px 22px !important;
  opacity: .52 !important;
  pointer-events: none !important;
}

#services .infrastructure-section {
  width: min(1260px, calc(100% - var(--sws-page-x) * 2)) !important;
  margin: 0 auto !important;
  min-height: auto !important;
  display: grid !important;
  grid-template-rows: auto auto !important;
  gap: clamp(20px, 2.5vh, 28px) !important;
}

#services .infra-hero {
  width: min(760px, 100%) !important;
  margin: 0 auto !important;
  text-align: center !important;
}

#services .infra-hero h2 {
  margin: 14px 0 0 !important;
  color: #fff !important;
  font-size: var(--sws-section-title) !important;
  line-height: 1.08 !important;
  letter-spacing: 0 !important;
}

#services .infra-hero p {
  width: min(720px, 100%) !important;
  margin: 12px auto 0 !important;
  color: #5dcaa5 !important;
  font-size: 15px !important;
  line-height: 1.58 !important;
  font-weight: 500 !important;
}

#services .infra-metrics {
  width: min(520px, 100%) !important;
  margin: 15px auto 0 !important;
  padding-top: 12px !important;
  border-top: 1px solid rgba(32, 243, 160, .18) !important;
  justify-content: center !important;
  gap: 22px !important;
}

#services .infra-metrics strong {
  font-size: 25px !important;
  color: #dffcf2 !important;
}

#services .infra-showcase {
  display: grid !important;
  grid-template-columns: minmax(0, 1.06fr) minmax(0, .94fr) !important;
  grid-template-rows: repeat(3, minmax(126px, 1fr)) !important;
  gap: 18px 20px !important;
  height: min(48vh, 470px) !important;
  min-height: 420px !important;
}

#services .infra-module,
#services .infra-module.reverse,
#services .infra-module:not(:first-child) {
  position: relative !important;
  overflow: hidden !important;
  min-height: 0 !important;
  border-radius: 12px !important;
  border: 1px solid rgba(255, 255, 255, .12) !important;
  background:
    radial-gradient(circle at 84% 55%, rgba(32, 243, 160, .17), transparent 34%),
    linear-gradient(135deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, .012)) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 18px 42px rgba(0, 0, 0, .22) !important;
  backdrop-filter: blur(18px) !important;
}

#services .infra-module:first-child {
  grid-row: 1 / span 3 !important;
  display: grid !important;
  grid-template-columns: minmax(0, .72fr) minmax(188px, .44fr) !important;
  padding: 32px !important;
}

#services .infra-module:not(:first-child) {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 116px !important;
  align-items: center !important;
  padding: 22px 24px !important;
}

#services .infra-copy {
  position: relative !important;
  z-index: 2 !important;
}

#services .infra-copy span {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  color: var(--sws-green-soft) !important;
  font-size: 12px !important;
  letter-spacing: .08em !important;
}

#services .infra-copy h3,
#services .infra-module:first-child .infra-copy h3 {
  margin: 14px 0 14px !important;
  color: #fff !important;
  font-size: var(--sws-card-title) !important;
  line-height: 1.14 !important;
  letter-spacing: 0 !important;
}

#services .infra-copy h3::after {
  width: 42px !important;
  height: 2px !important;
  margin-top: 14px !important;
  background: var(--sws-green) !important;
}

#services .infra-copy p,
#services .infra-module:first-child .infra-copy p {
  max-width: 430px !important;
  color: var(--sws-muted) !important;
  font-size: var(--sws-text) !important;
  line-height: 1.62 !important;
}

#services .infra-copy ul {
  margin-top: 22px !important;
  gap: 9px !important;
}

#services .infra-copy li {
  color: rgba(255, 255, 255, .88) !important;
  font-size: 13px !important;
  line-height: 1.35 !important;
}

#services .infra-module:not(:first-child) .infra-copy p {
  max-width: 580px !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

#services .infra-visual {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

#services .infra-module:not(:first-child) .infra-visual {
  width: 116px !important;
  height: 100px !important;
  min-width: 116px !important;
  justify-self: end !important;
  transform: none !important;
}

#services .infra-module:not(:first-child) .infra-visual img {
  width: 112px !important;
  height: 112px !important;
  object-fit: contain !important;
  background: transparent !important;
  mix-blend-mode: screen !important;
  filter: brightness(1.22) contrast(1.06) drop-shadow(0 0 18px rgba(32, 243, 160, .46)) !important;
}

#services .infra-module:first-child .infra-visual-base {
  position: absolute !important;
  right: 30px !important;
  bottom: 24px !important;
  width: clamp(190px, 17vw, 238px) !important;
  height: clamp(190px, 17vw, 238px) !important;
  overflow: visible !important;
  opacity: .98 !important;
}

#services .infra-module:first-child .infra-visual-base .infra-orb-static {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  mix-blend-mode: screen !important;
  filter: brightness(1.18) contrast(1.08) drop-shadow(0 0 24px rgba(32, 243, 160, .52)) !important;
  animation: swsOrbFloatStable 5.6s ease-in-out infinite !important;
}

#services .infra-module:first-child .infra-visual-base .infra-orb-spin {
  display: none !important;
}

#services .infra-module:first-child .infra-visual-base::before {
  content: "" !important;
  position: absolute !important;
  inset: 13% 11% 15% 11% !important;
  border-radius: 50% !important;
  background:
    repeating-linear-gradient(93deg, transparent 0 18px, rgba(255, 255, 255, .30) 19px 20px, transparent 22px 38px),
    radial-gradient(circle at 66% 24%, rgba(255, 255, 255, .72), transparent 16%),
    linear-gradient(90deg, transparent 0%, rgba(32, 243, 160, .20) 48%, transparent 64%) !important;
  background-size: 120px 100%, 100% 100%, 210% 100% !important;
  mix-blend-mode: screen !important;
  opacity: .30 !important;
  filter: blur(.2px) !important;
  animation: swsOrbInternalRotate 8s linear infinite !important;
  transform-origin: center !important;
}

#services .infra-module:first-child .infra-visual-base::after {
  content: "" !important;
  position: absolute !important;
  left: 18% !important;
  right: 18% !important;
  bottom: 6% !important;
  height: 16px !important;
  border-radius: 50% !important;
  background: radial-gradient(ellipse, rgba(32, 243, 160, .32), transparent 68%) !important;
  filter: blur(3px) !important;
  opacity: .82 !important;
}

@keyframes swsOrbFloatStable {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(0, -5px, 0); }
}

@keyframes swsOrbInternalRotate {
  to { background-position: 120px 0, 0 0, 110% 0; transform: rotate(.001deg); }
}

/* Screen 3: scenarios become a Bento board instead of six equal template cards. */
#scenarios.ai-solutions {
  min-height: 100svh !important;
  padding: 86px var(--sws-page-x) 58px !important;
  display: grid !important;
  grid-template-columns: minmax(300px, .33fr) minmax(0, .67fr) !important;
  gap: clamp(36px, 4.3vw, 58px) !important;
  align-items: center !important;
  background:
    radial-gradient(circle at 84% 18%, rgba(32, 243, 160, .11), transparent 25%),
    linear-gradient(112deg, #020504 0%, #061109 58%, #090909 100%) !important;
}

#scenarios.ai-solutions::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background:
    linear-gradient(124deg, transparent 0 41%, rgba(32, 243, 160, .055) 41.3% 42.6%, transparent 43%),
    radial-gradient(circle at 75% 38%, rgba(32, 243, 160, .11), transparent 25%) !important;
  opacity: .82 !important;
}

#scenarios .solution-hero {
  position: relative !important;
  z-index: 1 !important;
  width: auto !important;
  margin: 0 !important;
  text-align: left !important;
}

#scenarios .solution-badge {
  margin-bottom: 22px !important;
}

#scenarios .solution-hero h2 {
  max-width: 560px !important;
  margin: 0 !important;
  color: #fff !important;
  font-size: clamp(40px, 3.6vw, 54px) !important;
  line-height: 1.12 !important;
  font-weight: 650 !important;
  letter-spacing: 0 !important;
}

#scenarios .solution-subtitle {
  max-width: 430px !important;
  margin: 22px 0 0 !important;
  color: var(--sws-muted) !important;
  font-size: 15px !important;
  line-height: 1.7 !important;
}

#scenarios .solution-stats {
  width: min(420px, 100%) !important;
  margin-top: 24px !important;
  padding-top: 0 !important;
  border-top: 0 !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  justify-content: flex-start !important;
}

#scenarios .solution-stats span {
  flex: none !important;
  min-height: 34px !important;
  padding: 7px 14px !important;
  border: 1px solid rgba(32, 243, 160, .28) !important;
  border-radius: 999px !important;
  background: rgba(32, 243, 160, .035) !important;
  color: #8bbfaa !important;
  font-size: 12px !important;
}

#scenarios .solution-stats strong {
  margin-right: 8px !important;
  color: #dffcf2 !important;
  font-size: 18px !important;
}

#scenarios .solution-board {
  position: relative !important;
  z-index: 1 !important;
  width: auto !important;
  margin: 0 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1.18fr) repeat(2, minmax(0, .86fr)) !important;
  grid-template-rows: repeat(2, minmax(196px, 1fr)) !important;
  gap: 16px !important;
  min-height: 420px !important;
}

#scenarios .solution-card,
#scenarios .solution-card:first-child,
#scenarios .solution-card:nth-child(2),
#scenarios .solution-card:nth-child(3),
#scenarios .solution-card:nth-child(4),
#scenarios .solution-card:nth-child(5),
#scenarios .solution-card:nth-child(6) {
  position: relative !important;
  min-height: 0 !important;
  border-radius: 12px !important;
  border: 1px solid rgba(32, 243, 160, .20) !important;
  background:
    radial-gradient(circle at 72% 22%, rgba(32, 243, 160, .12), transparent 35%),
    rgba(8, 39, 24, .58) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .055), 0 18px 40px rgba(0, 0, 0, .20) !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  grid-template-rows: 76px 1fr !important;
  overflow: hidden !important;
}

#scenarios .solution-card:first-child {
  grid-column: 1 !important;
  grid-row: 1 / span 2 !important;
  grid-template-rows: 140px 1fr !important;
}

#scenarios .solution-card:nth-child(2) { grid-column: 2 !important; grid-row: 1 !important; }
#scenarios .solution-card:nth-child(3) { grid-column: 3 !important; grid-row: 1 !important; }
#scenarios .solution-card:nth-child(4) { grid-column: 2 !important; grid-row: 2 !important; }
#scenarios .solution-card:nth-child(5) { grid-column: 3 !important; grid-row: 2 !important; }
#scenarios .solution-card:nth-child(6) { grid-column: 1 / span 3 !important; grid-row: 3 !important; display: none !important; }

#scenarios .solution-visual,
#scenarios .solution-card:first-child .solution-visual,
#scenarios .solution-card:nth-child(4) .solution-visual,
#scenarios .solution-card:nth-child(5) .solution-visual,
#scenarios .solution-card:nth-child(6) .solution-visual {
  grid-column: auto !important;
  grid-row: 1 !important;
  height: auto !important;
  padding: 20px 22px 0 !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  background: transparent !important;
}

#scenarios .solution-icon,
#scenarios .solution-card:first-child .solution-icon,
#scenarios .solution-card:not(:first-child) .solution-icon,
#scenarios .solution-card:nth-child(4) .solution-icon,
#scenarios .solution-card:nth-child(5) .solution-icon,
#scenarios .solution-card:nth-child(6) .solution-icon {
  width: 52px !important;
  height: 52px !important;
  stroke: var(--sws-green) !important;
  stroke-width: 2.15 !important;
  fill: none !important;
  opacity: .95 !important;
}

#scenarios .solution-card:first-child .solution-icon {
  width: 96px !important;
  height: 96px !important;
}

#scenarios .solution-content,
#scenarios .solution-card:first-child .solution-content,
#scenarios .solution-card:nth-child(4) .solution-content,
#scenarios .solution-card:nth-child(5) .solution-content,
#scenarios .solution-card:nth-child(6) .solution-content {
  grid-column: auto !important;
  grid-row: 2 !important;
  align-self: end !important;
  padding: 12px 22px 22px !important;
}

#scenarios .solution-content span {
  margin-bottom: 9px !important;
  color: var(--sws-green-soft) !important;
  font-size: 12px !important;
  letter-spacing: .18em !important;
}

#scenarios .solution-card h3,
#scenarios .solution-card:first-child h3,
#scenarios .solution-card:nth-child(4) h3,
#scenarios .solution-card:nth-child(5) h3,
#scenarios .solution-card:nth-child(6) h3 {
  color: #fff !important;
  font-size: clamp(20px, 1.35vw, 24px) !important;
  line-height: 1.2 !important;
  font-weight: 650 !important;
}

#scenarios .solution-card p,
#scenarios .solution-card:first-child .solution-content p,
#scenarios .solution-card:nth-child(4) p,
#scenarios .solution-card:nth-child(5) p,
#scenarios .solution-card:nth-child(6) p {
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
  overflow: hidden !important;
  color: var(--sws-muted) !important;
  font-size: 13px !important;
  line-height: 1.6 !important;
}

/* Screen 4: cooler technical architecture, with readable one-line rhythm. */
#capability.core-tech-section {
  min-height: 100svh !important;
  padding: 88px 0 70px !important;
  background:
    radial-gradient(circle at 68% 36%, rgba(32, 243, 160, .11), transparent 30%),
    radial-gradient(circle at 24% 70%, rgba(70, 138, 255, .12), transparent 32%),
    linear-gradient(180deg, #04111e 0%, #061522 55%, #02070d 100%) !important;
}

#capability .capability-stage {
  width: min(1240px, calc(100% - var(--sws-page-x) * 2)) !important;
  min-height: calc(100svh - 158px) !important;
  margin: 0 auto !important;
  display: grid !important;
  grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr) !important;
  gap: clamp(36px, 4.2vw, 62px) !important;
  align-items: center !important;
}

#capability.core-tech-section .capability-copy h2 {
  max-width: 670px !important;
  margin-top: 26px !important;
  color: #fff !important;
  font-size: clamp(38px, 3vw, 50px) !important;
  line-height: 1.17 !important;
  letter-spacing: 0 !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
  text-wrap: balance !important;
}

#capability.core-tech-section .capability-copy h2 br {
  display: none !important;
}

#capability .capability-copy p {
  max-width: 610px !important;
  margin-top: 24px !important;
  color: var(--sws-muted) !important;
  font-size: 15px !important;
  line-height: 1.82 !important;
}

#capability .core-cta {
  margin-top: 30px !important;
}

#capability .tech-console.core-card-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 16px !important;
  padding: 18px !important;
  border-radius: 16px !important;
  background: rgba(3, 16, 22, .62) !important;
}

#capability .core-tech-card {
  min-height: 210px !important;
  padding: 24px !important;
  border-radius: 12px !important;
}

#capability .tech-icon {
  width: 58px !important;
  height: 58px !important;
  margin-bottom: 18px !important;
  filter: drop-shadow(0 0 16px rgba(32, 243, 160, .36)) !important;
}

#capability .core-tech-card h3 {
  color: #fff !important;
  font-size: clamp(20px, 1.35vw, 24px) !important;
  line-height: 1.25 !important;
}

#capability .core-tech-card p {
  font-size: 13px !important;
}

#capability .core-tech-card em {
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  font-size: 12px !important;
  line-height: 1.6 !important;
}

/* Screen 5: delivery becomes a linear time axis, not four equal cards. */
#training.ai-delivery {
  min-height: 100svh !important;
  padding: 86px 0 70px !important;
  background:
    radial-gradient(circle at 82% 16%, rgba(32, 243, 160, .08), transparent 28%),
    linear-gradient(180deg, #101111 0%, #070807 100%) !important;
}

#training .delivery-stage {
  width: min(1240px, calc(100% - var(--sws-page-x) * 2)) !important;
  margin: 0 auto !important;
  min-height: calc(100svh - 156px) !important;
  display: grid !important;
  grid-template-columns: minmax(330px, .38fr) minmax(0, .62fr) !important;
  gap: clamp(36px, 5vw, 78px) !important;
  align-items: center !important;
}

#training .stage-head {
  max-width: 500px !important;
}

#training .stage-head h2 {
  color: #fff !important;
  font-size: var(--sws-section-title) !important;
  line-height: 1.16 !important;
}

#training .stage-head p {
  margin-top: 22px !important;
  color: var(--sws-muted) !important;
  font-size: 15px !important;
  line-height: 1.8 !important;
}

#training .delivery-track {
  position: relative !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 14px !important;
}

#training .delivery-track::before {
  content: "" !important;
  position: absolute !important;
  left: 34px !important;
  top: 34px !important;
  bottom: 34px !important;
  width: 1px !important;
  background: linear-gradient(#20f3a0, rgba(32, 243, 160, .10)) !important;
  box-shadow: 0 0 20px rgba(32, 243, 160, .28) !important;
}

#training .delivery-track article,
#training .delivery-track article:nth-child(1),
#training .delivery-track article:nth-child(2),
#training .delivery-track article:nth-child(3),
#training .delivery-track article:nth-child(4) {
  position: relative !important;
  min-height: 104px !important;
  padding: 22px 24px 22px 92px !important;
  border-radius: 12px !important;
  background: rgba(255, 255, 255, .025) !important;
  border: 1px solid rgba(255, 255, 255, .11) !important;
  transform: none !important;
}

#training .delivery-icon {
  position: absolute !important;
  left: 18px !important;
  top: 25px !important;
  width: 34px !important;
  height: 34px !important;
  color: var(--sws-green) !important;
  filter: drop-shadow(0 0 14px rgba(32, 243, 160, .42)) !important;
}

#training .delivery-track article span {
  color: var(--sws-green-soft) !important;
  font-size: 12px !important;
}

#training .delivery-track article h3 {
  margin: 4px 0 8px !important;
  color: #fff !important;
  font-size: 22px !important;
}

#training .delivery-track article p {
  color: var(--sws-muted) !important;
  font-size: 13px !important;
  line-height: 1.62 !important;
}

/* Screen 6: resources become a real console preview and tabbed resource shelf. */
#resources.ai-resources {
  min-height: 100svh !important;
  padding: 86px 0 70px !important;
  background:
    radial-gradient(circle at 28% 20%, rgba(32, 243, 160, .09), transparent 28%),
    linear-gradient(180deg, #06130d 0%, #02110a 100%) !important;
}

#resources .resource-stage {
  width: min(1240px, calc(100% - var(--sws-page-x) * 2)) !important;
  margin: 0 auto !important;
  min-height: calc(100svh - 156px) !important;
  display: grid !important;
  grid-template-columns: minmax(330px, .42fr) minmax(0, .58fr) !important;
  gap: clamp(34px, 4.4vw, 62px) !important;
  align-items: center !important;
}

#resources .resource-main h2 {
  color: #fff !important;
  font-size: var(--sws-section-title) !important;
  line-height: 1.16 !important;
}

#resources .resource-main p {
  max-width: 520px !important;
  color: var(--sws-muted) !important;
  font-size: 15px !important;
  line-height: 1.75 !important;
}

#resources .resource-tabs {
  margin-top: 26px !important;
}

#resources .resource-tabs button {
  border-radius: 999px !important;
  min-height: 36px !important;
}

#resources .resource-panels {
  display: grid !important;
  gap: 16px !important;
}

#resources .resource-panels article {
  position: relative !important;
  min-height: 154px !important;
  display: grid !important;
  grid-template-columns: 72px 1fr !important;
  align-items: center !important;
  gap: 20px !important;
  border-radius: 12px !important;
  border: 1px solid rgba(255, 255, 255, .12) !important;
  background: rgba(255, 255, 255, .026) !important;
  opacity: .7 !important;
  overflow: hidden !important;
}

#resources .resource-panels article.is-active {
  min-height: 188px !important;
  opacity: 1 !important;
  border-color: rgba(32, 243, 160, .44) !important;
  background:
    radial-gradient(circle at 82% 28%, rgba(32, 243, 160, .13), transparent 32%),
    rgba(255, 255, 255, .035) !important;
}

#resources .resource-icon {
  grid-row: 1 / span 3 !important;
  width: 56px !important;
  height: 56px !important;
  align-self: center !important;
  justify-self: center !important;
  color: var(--sws-green) !important;
}

/* Screen 7: company story, NIO-like cinematic intro with video affordance. */
#about.ai-about {
  min-height: 100svh !important;
  padding: 86px 0 76px !important;
  background:
    radial-gradient(circle at 72% 22%, rgba(32, 243, 160, .08), transparent 31%),
    linear-gradient(180deg, #0b0c0c 0%, #050806 100%) !important;
}

#about .about-stage {
  width: min(1240px, calc(100% - var(--sws-page-x) * 2)) !important;
  min-height: calc(100svh - 162px) !important;
  margin: 0 auto !important;
  display: grid !important;
  grid-template-columns: minmax(360px, .42fr) minmax(0, .58fr) !important;
  gap: clamp(42px, 5vw, 76px) !important;
  align-items: center !important;
}

#about .about-narrative-center {
  max-width: 570px !important;
  text-align: left !important;
}

#about .about-narrative-center .section-mark {
  margin-left: 0 !important;
}

#about .about-narrative-center h2 {
  color: #fff !important;
  font-size: clamp(40px, 4vw, 62px) !important;
  line-height: 1.15 !important;
  letter-spacing: 0 !important;
}

#about .about-narrative-center p {
  margin-top: 24px !important;
  color: var(--sws-muted) !important;
  font-size: 16px !important;
  line-height: 1.9 !important;
}

.about-video-frame {
  width: 100% !important;
  min-height: min(52vh, 520px) !important;
  border-radius: 12px !important;
  cursor: pointer !important;
  background:
    radial-gradient(circle at 47% 44%, rgba(32, 243, 160, .11), transparent 25%),
    linear-gradient(135deg, rgba(255,255,255,.05), rgba(255,255,255,.015)) !important;
  border: 1px solid rgba(255, 255, 255, .14) !important;
}

.about-video-frame:hover {
  border-color: rgba(32, 243, 160, .58) !important;
  transform: translateY(-3px) !important;
}

/* Footer: DJI-like multi-column footer, legal row kept in one desktop line. */
.dji-footer {
  background: #202220 !important;
  color: rgba(255,255,255,.78) !important;
}

.dji-footer .footer-download,
.dji-footer .footer-mega,
.dji-footer .footer-brandbar,
.dji-footer .footer-legal {
  width: min(1240px, calc(100% - var(--sws-page-x) * 2)) !important;
}

.dji-footer .footer-download {
  padding: 54px 0 38px !important;
  border-bottom: 1px solid rgba(255,255,255,.14) !important;
}

.dji-footer .footer-mega {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 36px !important;
  padding: 44px 0 58px !important;
}

.dji-footer .footer-column h3 {
  color: #fff !important;
  font-size: 14px !important;
}

.dji-footer .footer-column a,
.dji-footer .footer-column span {
  color: rgba(255,255,255,.66) !important;
  font-size: 13px !important;
}

.dji-footer .footer-brandbar {
  display: flex !important;
  align-items: center !important;
  gap: 28px !important;
  padding: 26px 0 !important;
  border-top: 1px solid rgba(255,255,255,.14) !important;
}

.dji-footer .footer-brandbar img {
  width: 132px !important;
  height: auto !important;
}

.footer-social {
  margin-left: auto !important;
  display: flex !important;
  gap: 10px !important;
}

.footer-social a {
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  padding: 0 !important;
  border-radius: 50% !important;
  border: 1px solid rgba(255,255,255,.16) !important;
  color: transparent !important;
  background: rgba(255,255,255,.05) !important;
}

.footer-social a::before {
  color: rgba(255,255,255,.82) !important;
  font-size: 12px !important;
}

.footer-social a[aria-label="微博"]::before { content: "微"; }
.footer-social a[aria-label="微信"]::before { content: "信"; }
.footer-social a[aria-label="腾讯"]::before { content: "腾"; }
.footer-social a[aria-label="抖音"]::before { content: "抖"; }

.dji-footer .footer-legal {
  display: flex !important;
  align-items: center !important;
  gap: 28px !important;
  padding: 20px 0 34px !important;
  border-top: 1px solid rgba(255,255,255,.11) !important;
}

.footer-records {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 0 !important;
}

.footer-records a,
.footer-records span {
  display: inline-flex !important;
  align-items: center !important;
  margin-right: 24px !important;
  color: rgba(255,255,255,.54) !important;
  white-space: nowrap !important;
}

.footer-records .footer-copyright::before,
.footer-records .footer-tagline::before {
  content: "" !important;
  width: 1px !important;
  height: 14px !important;
  margin-right: 24px !important;
  background: rgba(255,255,255,.18) !important;
}

@media (max-width: 1180px) {
  #services.ai-origin,
  #scenarios.ai-solutions,
  #capability.core-tech-section,
  #training.ai-delivery,
  #resources.ai-resources,
  #about.ai-about {
    min-height: auto !important;
    padding-top: 76px !important;
    padding-bottom: 72px !important;
  }

  #services .infra-showcase,
  #scenarios.ai-solutions,
  #capability .capability-stage,
  #training .delivery-stage,
  #resources .resource-stage,
  #about .about-stage {
    grid-template-columns: 1fr !important;
    height: auto !important;
  }

  #services .infra-module:first-child,
  #services .infra-module:not(:first-child),
  #scenarios .solution-card,
  #scenarios .solution-card:first-child,
  #scenarios .solution-card:nth-child(2),
  #scenarios .solution-card:nth-child(3),
  #scenarios .solution-card:nth-child(4),
  #scenarios .solution-card:nth-child(5),
  #scenarios .solution-card:nth-child(6) {
    grid-column: auto !important;
    grid-row: auto !important;
  }

  #services .infra-showcase {
    grid-template-rows: none !important;
  }

  #scenarios .solution-board {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-template-rows: none !important;
  }

  #scenarios .solution-card:nth-child(6) {
    display: grid !important;
  }

  .dji-footer .footer-mega {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 760px) {
  :root {
    --sws-page-x: 20px;
  }

  #services .infrastructure-section,
  #capability .capability-stage,
  #training .delivery-stage,
  #resources .resource-stage,
  #about .about-stage,
  .dji-footer .footer-download,
  .dji-footer .footer-mega,
  .dji-footer .footer-brandbar,
  .dji-footer .footer-legal {
    width: calc(100% - 32px) !important;
  }

  #services .infra-module:first-child,
  #services .infra-module:not(:first-child) {
    grid-template-columns: 1fr !important;
    min-height: auto !important;
  }

  #services .infra-module:first-child .infra-visual-base {
    position: relative !important;
    right: auto !important;
    bottom: auto !important;
    margin: 24px auto 0 !important;
  }

  #scenarios .solution-board,
  #capability .tech-console.core-card-grid {
    grid-template-columns: 1fr !important;
  }

  #scenarios .solution-hero h2 {
    font-size: clamp(36px, 11vw, 48px) !important;
  }

  #capability.core-tech-section .capability-copy h2,
  #training .stage-head h2,
  #resources .resource-main h2,
  #about .about-narrative-center h2 {
    font-size: clamp(34px, 10vw, 46px) !important;
  }

  #resources .resource-panels article {
    grid-template-columns: 1fr !important;
  }

  .dji-footer .footer-mega,
  .dji-footer .footer-brandbar,
  .dji-footer .footer-legal {
    grid-template-columns: 1fr !important;
    flex-direction: column !important;
    align-items: flex-start !important;
  }

  .footer-social {
    margin-left: 0 !important;
  }
}

/* 2026-05-30 rhythm5
   Final homepage pacing layer: stronger section-to-section rhythm, less template feel,
   no changes to the approved three hero slide copy/assets. */
:root {
  --r5-green: #20f3a0;
  --r5-green-soft: #63d6ae;
  --r5-mint: #b9f7df;
  --r5-muted: #8bbfaa;
  --r5-muted-dim: rgba(139, 191, 170, .62);
  --r5-line: rgba(255, 255, 255, .12);
  --r5-line-green: rgba(32, 243, 160, .28);
  --r5-card: rgba(255, 255, 255, .035);
  --r5-card-strong: rgba(13, 42, 28, .72);
  --r5-radius: 12px;
  --r5-page: clamp(28px, 5.6vw, 92px);
  --r5-title: clamp(34px, 3.1vw, 48px);
  --r5-title-lg: clamp(40px, 3.9vw, 56px);
  --r5-card-title: clamp(22px, 1.65vw, 30px);
  --r5-body: clamp(13px, .88vw, 15px);
}

html {
  scroll-padding-top: 88px !important;
}

body {
  background: #020504 !important;
}

.hero-intelligence-core,
.hero-metrics,
.hero-slide.agent-slide::after,
.agent-slide .hero-content::before,
.agent-slide .hero-content::after {
  display: none !important;
}

.hero-slide::before {
  opacity: .28 !important;
}

.ai-home {
  background:
    linear-gradient(180deg, #020504 0%, #06120c 22%, #04111e 48%, #0b0b0a 72%, #07140d 100%) !important;
}

.ai-section {
  position: relative !important;
  isolation: isolate !important;
  overflow: hidden !important;
}

.ai-section h2,
.ai-section h3,
.ai-section p,
.ai-section span,
.ai-section a,
.ai-section li {
  letter-spacing: 0 !important;
  word-break: normal !important;
}

.infra-pill,
.solution-badge,
.core-badge,
.section-mark {
  display: inline-flex !important;
  align-items: center !important;
  width: auto !important;
  max-width: max-content !important;
  min-height: 34px !important;
  padding: 4px 18px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(32, 243, 160, .7) !important;
  background: rgba(32, 243, 160, .045) !important;
  color: var(--r5-mint) !important;
  font-size: 13px !important;
  line-height: 1 !important;
  font-weight: 500 !important;
}

/* Screen 2: product platform. One cinematic panel, compact copy, real hierarchy. */
#services.ai-origin {
  min-height: 100svh !important;
  padding: 92px 0 48px !important;
  background:
    radial-gradient(circle at 83% 26%, rgba(32, 243, 160, .16), transparent 30%),
    radial-gradient(circle at 18% 92%, rgba(32, 243, 160, .08), transparent 26%),
    linear-gradient(180deg, #020504 0%, #05100b 42%, #06140d 100%) !important;
}

#services.ai-origin::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  background:
    linear-gradient(115deg, transparent 0 37%, rgba(32, 243, 160, .08) 38%, transparent 39% 100%),
    radial-gradient(circle at 26% 28%, rgba(185, 247, 223, .32) 0 2px, transparent 3px),
    radial-gradient(circle at 68% 18%, rgba(32, 243, 160, .30) 0 2px, transparent 3px),
    radial-gradient(circle at 82% 74%, rgba(185, 247, 223, .26) 0 2px, transparent 3px),
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px) !important;
  background-size: auto, auto, auto, auto, 28px 28px, 28px 28px !important;
  opacity: .55 !important;
  pointer-events: none !important;
}

#services.ai-origin::after {
  content: "" !important;
  position: absolute !important;
  inset: auto 0 0 !important;
  height: 1px !important;
  background: linear-gradient(90deg, transparent, rgba(32, 243, 160, .35), transparent) !important;
  z-index: 2 !important;
}

#services .services-depth-field {
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  opacity: .46 !important;
  pointer-events: none !important;
}

#services .depth-layer {
  position: absolute !important;
  inset: 0 !important;
  background:
    linear-gradient(42deg, transparent 0 44%, rgba(32, 243, 160, .08) 45%, transparent 46%),
    linear-gradient(135deg, transparent 0 58%, rgba(185, 247, 223, .055) 59%, transparent 60%) !important;
  transform: translate3d(0, 0, 0) !important;
  animation: r5DepthDrift 16s ease-in-out infinite alternate !important;
}

#services .depth-layer-mid {
  opacity: .55 !important;
  animation-duration: 20s !important;
  transform: scale(1.06) !important;
}

#services .depth-layer-front {
  opacity: .34 !important;
  animation-duration: 24s !important;
  transform: scale(1.12) !important;
}

@keyframes r5DepthDrift {
  0% { transform: translate3d(-10px, 0, 0) scale(1.02); }
  100% { transform: translate3d(16px, -12px, 0) scale(1.07); }
}

#services .infrastructure-section {
  position: relative !important;
  z-index: 1 !important;
  width: min(1280px, calc(100% - var(--r5-page) * 2)) !important;
  min-height: calc(100svh - 140px) !important;
  margin: 0 auto !important;
  display: grid !important;
  grid-template-rows: auto minmax(390px, 1fr) !important;
  gap: clamp(26px, 3.2vh, 38px) !important;
}

#services .infra-hero {
  text-align: center !important;
  max-width: 780px !important;
  margin: 0 auto !important;
  padding: 0 !important;
}

#services .infra-hero h2 {
  margin: 18px 0 10px !important;
  color: #fff !important;
  font-size: var(--r5-title) !important;
  line-height: 1.14 !important;
  font-weight: 600 !important;
}

#services .infra-hero p {
  max-width: 640px !important;
  margin: 0 auto !important;
  color: var(--r5-green-soft) !important;
  font-size: var(--r5-body) !important;
  line-height: 1.72 !important;
}

#services .infra-metrics {
  margin-top: 18px !important;
  display: grid !important;
  grid-template-columns: repeat(3, auto) !important;
  justify-content: center !important;
  gap: 24px !important;
}

#services .infra-metrics span {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 3px !important;
  color: rgba(185, 247, 223, .62) !important;
  font-size: 12px !important;
}

#services .infra-metrics strong {
  color: var(--r5-mint) !important;
  font-size: clamp(22px, 1.8vw, 32px) !important;
  line-height: 1 !important;
}

#services .infra-showcase {
  width: 100% !important;
  min-height: 0 !important;
  height: min(520px, calc(100svh - 330px)) !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr) !important;
  grid-template-rows: repeat(3, minmax(0, 1fr)) !important;
  gap: 20px !important;
  align-items: stretch !important;
}

#services .infra-module,
#services .infra-module.reverse {
  position: relative !important;
  min-width: 0 !important;
  overflow: hidden !important;
  border-radius: var(--r5-radius) !important;
  border: 1px solid var(--r5-line-green) !important;
  background:
    radial-gradient(circle at 78% 45%, rgba(32, 243, 160, .18), transparent 34%),
    linear-gradient(135deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .012)) !important;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .34), inset 0 1px 0 rgba(255,255,255,.08) !important;
  transition: transform .35s ease, border-color .35s ease, box-shadow .35s ease !important;
}

#services .infra-module:hover {
  transform: translateY(-4px) !important;
  border-color: rgba(32, 243, 160, .62) !important;
  box-shadow: 0 30px 80px rgba(0,0,0,.42), 0 0 34px rgba(32, 243, 160, .12) !important;
}

#services .infra-module:first-child {
  grid-column: 1 !important;
  grid-row: 1 / span 3 !important;
  display: grid !important;
  grid-template-columns: minmax(0, .58fr) minmax(210px, .42fr) !important;
  align-items: start !important;
  padding: clamp(28px, 3vw, 42px) !important;
}

#services .infra-module:not(:first-child),
#services .infra-module.reverse:not(:first-child) {
  grid-column: 2 !important;
  min-height: 0 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 124px !important;
  align-items: center !important;
  gap: 20px !important;
  padding: 22px 26px !important;
}

#services .infra-module:nth-child(2) { grid-row: 1 !important; }
#services .infra-module:nth-child(3) { grid-row: 2 !important; }
#services .infra-module:nth-child(4) { grid-row: 3 !important; }

#services .infra-copy {
  position: relative !important;
  z-index: 2 !important;
  min-width: 0 !important;
}

#services .infra-copy span {
  color: var(--r5-green-soft) !important;
  font-size: 13px !important;
  line-height: 1 !important;
  font-weight: 600 !important;
}

#services .infra-copy h3 {
  margin: 16px 0 14px !important;
  color: #fff !important;
  font-size: var(--r5-card-title) !important;
  line-height: 1.18 !important;
  font-weight: 600 !important;
  white-space: nowrap !important;
}

#services .infra-module:first-child .infra-copy h3 {
  font-size: clamp(30px, 2.4vw, 40px) !important;
}

#services .infra-copy p {
  max-width: 470px !important;
  margin: 0 !important;
  color: var(--r5-muted) !important;
  font-size: var(--r5-body) !important;
  line-height: 1.75 !important;
}

#services .infra-copy ul {
  margin: 26px 0 0 !important;
  display: grid !important;
  gap: 11px !important;
}

#services .infra-copy li {
  color: rgba(255,255,255,.9) !important;
  font-size: 14px !important;
}

#services .infra-copy li::before {
  border-color: var(--r5-green) !important;
  box-shadow: 0 0 14px rgba(32, 243, 160, .38) !important;
}

#services .infra-visual,
#services .infra-module:not(:first-child) .infra-visual {
  position: relative !important;
  right: auto !important;
  bottom: auto !important;
  width: 124px !important;
  height: 124px !important;
  min-width: 124px !important;
  margin: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
  transform: none !important;
}

#services .infra-module:not(:first-child) .infra-visual img {
  width: 124px !important;
  height: 124px !important;
  object-fit: contain !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  mix-blend-mode: screen !important;
  filter: brightness(1.18) contrast(1.08) drop-shadow(0 0 22px rgba(32, 243, 160, .34)) !important;
}

#services .infra-module:first-child .infra-visual-base {
  position: absolute !important;
  right: clamp(18px, 3vw, 42px) !important;
  bottom: clamp(10px, 2.1vw, 30px) !important;
  width: clamp(210px, 19vw, 270px) !important;
  height: clamp(210px, 19vw, 270px) !important;
  z-index: 1 !important;
  pointer-events: none !important;
  transform: none !important;
}

#services .infra-module:first-child .infra-visual-base .infra-orb-static {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  opacity: .96 !important;
  mix-blend-mode: screen !important;
  filter: brightness(1.12) contrast(1.08) drop-shadow(0 0 38px rgba(32, 243, 160, .55)) !important;
  animation: none !important;
}

#services .infra-module:first-child .infra-visual-base .infra-orb-spin {
  display: none !important;
}

#services .infra-module:first-child .infra-visual-base::before {
  content: "" !important;
  position: absolute !important;
  left: 18% !important;
  top: 14% !important;
  width: 64% !important;
  height: 64% !important;
  border-radius: 50% !important;
  background:
    conic-gradient(from 0deg, transparent 0 18deg, rgba(185, 247, 223, .55) 20deg 23deg, transparent 25deg 95deg, rgba(32, 243, 160, .48) 98deg 101deg, transparent 104deg 360deg),
    repeating-radial-gradient(ellipse at center, transparent 0 18px, rgba(185, 247, 223, .20) 19px 20px, transparent 21px 40px) !important;
  opacity: .46 !important;
  mix-blend-mode: screen !important;
  filter: blur(.2px) drop-shadow(0 0 10px rgba(32, 243, 160, .55)) !important;
  animation: r5SphereRotate 7.2s linear infinite !important;
}

#services .infra-module:first-child .infra-visual-base::after {
  content: "" !important;
  position: absolute !important;
  left: 22% !important;
  top: 17% !important;
  width: 21% !important;
  height: 60% !important;
  border-radius: 50% !important;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.58), transparent) !important;
  opacity: .34 !important;
  mix-blend-mode: screen !important;
  filter: blur(6px) !important;
  animation: r5SphereSweep 4.8s ease-in-out infinite !important;
}

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

@keyframes r5SphereSweep {
  0%, 100% { transform: translateX(-24px) skewX(-9deg); opacity: .10; }
  45% { transform: translateX(98px) skewX(-9deg); opacity: .42; }
}

/* Screen 3: solutions. Big-left narrative + bento cards, all icons visible. */
#scenarios.ai-solutions {
  min-height: 100svh !important;
  padding: 84px var(--r5-page) 56px !important;
  display: grid !important;
  grid-template-columns: minmax(300px, .34fr) minmax(0, .66fr) !important;
  gap: clamp(38px, 4.5vw, 70px) !important;
  align-items: center !important;
  background:
    radial-gradient(circle at 12% 42%, rgba(32, 243, 160, .10), transparent 28%),
    linear-gradient(110deg, #030605 0%, #05110c 44%, #081a10 100%) !important;
}

#scenarios.ai-solutions::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background:
    linear-gradient(120deg, transparent 0 56%, rgba(32, 243, 160, .075) 57%, transparent 58%),
    radial-gradient(circle at 83% 24%, rgba(32, 243, 160, .18), transparent 18%) !important;
  opacity: .75 !important;
  pointer-events: none !important;
}

#scenarios .solution-glow {
  display: none !important;
}

#scenarios .solution-hero {
  position: relative !important;
  z-index: 1 !important;
  max-width: 520px !important;
  margin: 0 !important;
  text-align: left !important;
}

#scenarios .solution-hero h2 {
  margin: 26px 0 18px !important;
  color: #fff !important;
  font-size: var(--r5-title-lg) !important;
  line-height: 1.08 !important;
  font-weight: 600 !important;
  text-align: left !important;
}

#scenarios .solution-subtitle {
  max-width: 430px !important;
  color: var(--r5-muted) !important;
  font-size: var(--r5-body) !important;
  line-height: 1.75 !important;
}

#scenarios .solution-stats {
  margin-top: 28px !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
  justify-content: flex-start !important;
}

#scenarios .solution-stats span {
  min-height: 36px !important;
  padding: 0 18px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(32, 243, 160, .28) !important;
  background: rgba(32, 243, 160, .04) !important;
  color: var(--r5-muted) !important;
  font-size: 12px !important;
}

#scenarios .solution-stats strong {
  color: #fff !important;
  font-size: 17px !important;
}

#scenarios .solution-board {
  position: relative !important;
  z-index: 1 !important;
  min-width: 0 !important;
  height: min(570px, calc(100svh - 190px)) !important;
  min-height: 430px !important;
  display: grid !important;
  grid-template-columns: minmax(240px, 1.08fr) repeat(3, minmax(150px, .82fr)) !important;
  grid-template-rows: repeat(2, minmax(0, 1fr)) !important;
  gap: 16px !important;
}

#scenarios .solution-card,
#scenarios .solution-card:first-child,
#scenarios .solution-card:nth-child(2),
#scenarios .solution-card:nth-child(3),
#scenarios .solution-card:nth-child(4),
#scenarios .solution-card:nth-child(5),
#scenarios .solution-card:nth-child(6) {
  position: relative !important;
  display: grid !important;
  min-width: 0 !important;
  min-height: 0 !important;
  overflow: hidden !important;
  border-radius: var(--r5-radius) !important;
  border: 1px solid rgba(32, 243, 160, .24) !important;
  background:
    radial-gradient(circle at 72% 18%, rgba(32, 243, 160, .14), transparent 30%),
    rgba(13, 42, 28, .52) !important;
  transform: none !important;
}

#scenarios .solution-card:first-child {
  grid-column: 1 !important;
  grid-row: 1 / span 2 !important;
  padding: 28px !important;
}

#scenarios .solution-card:nth-child(2) { grid-column: 2 !important; grid-row: 1 !important; }
#scenarios .solution-card:nth-child(3) { grid-column: 3 !important; grid-row: 1 !important; }
#scenarios .solution-card:nth-child(4) { grid-column: 4 !important; grid-row: 1 !important; }
#scenarios .solution-card:nth-child(5) { grid-column: 2 !important; grid-row: 2 !important; }
#scenarios .solution-card:nth-child(6) { grid-column: 3 / span 2 !important; grid-row: 2 !important; display: grid !important; }

#scenarios .solution-card:not(:first-child) {
  grid-template-rows: 1fr auto !important;
  padding: 20px !important;
}

#scenarios .solution-card:hover {
  border-color: rgba(32, 243, 160, .68) !important;
  transform: translateY(-4px) !important;
}

#scenarios .solution-visual,
#scenarios .solution-card:first-child .solution-visual,
#scenarios .solution-card:not(:first-child) .solution-visual,
#scenarios .solution-card:nth-child(4) .solution-visual,
#scenarios .solution-card:nth-child(5) .solution-visual,
#scenarios .solution-card:nth-child(6) .solution-visual {
  position: relative !important;
  inset: auto !important;
  width: 100% !important;
  min-height: 96px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  opacity: 1 !important;
  transform: none !important;
  background: transparent !important;
}

#scenarios .solution-card:first-child .solution-visual {
  align-items: flex-start !important;
  min-height: 190px !important;
}

#scenarios .solution-icon,
#scenarios .solution-card:first-child .solution-icon,
#scenarios .solution-card:not(:first-child) .solution-icon,
#scenarios .solution-card:nth-child(4) .solution-icon,
#scenarios .solution-card:nth-child(5) .solution-icon,
#scenarios .solution-card:nth-child(6) .solution-icon {
  display: block !important;
  width: clamp(54px, 4.5vw, 82px) !important;
  height: clamp(54px, 4.5vw, 82px) !important;
  opacity: 1 !important;
  color: var(--r5-green) !important;
  stroke: currentColor !important;
  stroke-width: 4 !important;
  fill: none !important;
  filter: drop-shadow(0 0 18px rgba(32, 243, 160, .42)) !important;
}

#scenarios .solution-card:first-child .solution-icon {
  width: clamp(92px, 8vw, 132px) !important;
  height: clamp(92px, 8vw, 132px) !important;
}

#scenarios .solution-content,
#scenarios .solution-card:first-child .solution-content,
#scenarios .solution-card:nth-child(4) .solution-content,
#scenarios .solution-card:nth-child(5) .solution-content,
#scenarios .solution-card:nth-child(6) .solution-content {
  position: relative !important;
  inset: auto !important;
  z-index: 2 !important;
  align-self: end !important;
  display: block !important;
  transform: none !important;
}

#scenarios .solution-content span {
  color: var(--r5-green-soft) !important;
  font-size: 13px !important;
  letter-spacing: 2px !important;
}

#scenarios .solution-card h3,
#scenarios .solution-card:first-child h3,
#scenarios .solution-card:nth-child(4) h3,
#scenarios .solution-card:nth-child(5) h3,
#scenarios .solution-card:nth-child(6) h3 {
  margin: 13px 0 10px !important;
  color: #fff !important;
  font-size: clamp(20px, 1.4vw, 26px) !important;
  line-height: 1.28 !important;
  font-weight: 600 !important;
}

#scenarios .solution-card p,
#scenarios .solution-card:first-child p,
#scenarios .solution-card:nth-child(4) p,
#scenarios .solution-card:nth-child(5) p,
#scenarios .solution-card:nth-child(6) p {
  max-width: 100% !important;
  margin: 0 !important;
  color: var(--r5-muted) !important;
  font-size: clamp(12px, .78vw, 14px) !important;
  line-height: 1.65 !important;
  display: block !important;
  -webkit-line-clamp: initial !important;
  overflow: visible !important;
}

/* Screen 4: technical architecture. Different color temperature and larger icons. */
#capability.core-tech-section {
  min-height: 100svh !important;
  padding: 88px var(--r5-page) 72px !important;
  background:
    radial-gradient(circle at 78% 48%, rgba(32, 243, 160, .10), transparent 28%),
    linear-gradient(180deg, #04111e 0%, #06111b 42%, #071017 100%) !important;
}

#capability .capability-stage {
  width: min(1260px, 100%) !important;
  min-height: calc(100svh - 160px) !important;
  margin: 0 auto !important;
  display: grid !important;
  grid-template-columns: minmax(390px, .44fr) minmax(0, .56fr) !important;
  gap: clamp(40px, 5vw, 76px) !important;
  align-items: center !important;
}

#capability .capability-copy h2 {
  max-width: 760px !important;
  margin: 28px 0 0 !important;
  color: #fff !important;
  font-size: clamp(36px, 3.45vw, 54px) !important;
  line-height: 1.16 !important;
  font-weight: 600 !important;
  text-wrap: balance !important;
}

#capability .capability-copy h2 br {
  display: none !important;
}

#capability .capability-copy p {
  max-width: 620px !important;
  margin: 28px 0 0 !important;
  color: var(--r5-muted) !important;
  font-size: var(--r5-body) !important;
  line-height: 1.86 !important;
}

#capability .core-cta {
  margin-top: 34px !important;
  border-radius: 10px !important;
}

#capability .tech-console.core-card-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 16px !important;
  padding: 18px !important;
  border-radius: 16px !important;
  background:
    radial-gradient(circle at 20% 18%, rgba(32, 243, 160, .12), transparent 28%),
    rgba(255, 255, 255, .035) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
}

#capability .core-tech-card {
  min-height: 225px !important;
  padding: 26px !important;
  border-radius: var(--r5-radius) !important;
  background: rgba(0, 36, 23, .62) !important;
}

#capability .tech-icon {
  width: 68px !important;
  height: 68px !important;
  margin: 0 0 18px !important;
  color: var(--r5-green) !important;
  filter: drop-shadow(0 0 24px rgba(32, 243, 160, .42)) !important;
}

#capability .core-tech-card h3 {
  color: #fff !important;
  font-size: clamp(21px, 1.45vw, 26px) !important;
  line-height: 1.26 !important;
}

#capability .core-tech-card p {
  color: var(--r5-green-soft) !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
}

#capability .core-tech-card em {
  display: block !important;
  max-height: none !important;
  margin-top: 12px !important;
  color: rgba(139, 191, 170, .52) !important;
  font-size: 12px !important;
  line-height: 1.55 !important;
  -webkit-line-clamp: initial !important;
  overflow: visible !important;
}

/* Screen 5: delivery timeline. */
#training.ai-delivery {
  min-height: 100svh !important;
  padding: 86px var(--r5-page) 70px !important;
  background:
    radial-gradient(circle at 18% 38%, rgba(32, 243, 160, .09), transparent 28%),
    linear-gradient(180deg, #0c0d0d 0%, #090a09 100%) !important;
}

#training .delivery-stage {
  width: min(1260px, 100%) !important;
  min-height: calc(100svh - 156px) !important;
  margin: 0 auto !important;
  display: grid !important;
  grid-template-columns: minmax(330px, .38fr) minmax(0, .62fr) !important;
  gap: clamp(36px, 5vw, 78px) !important;
  align-items: center !important;
}

#training .stage-head h2 {
  color: #fff !important;
  font-size: var(--r5-title) !important;
  line-height: 1.18 !important;
  font-weight: 600 !important;
}

#training .stage-head p {
  color: var(--r5-muted) !important;
  font-size: var(--r5-body) !important;
  line-height: 1.75 !important;
}

#training .delivery-track {
  position: relative !important;
  display: grid !important;
  gap: 18px !important;
}

#training .delivery-track article {
  min-height: 116px !important;
  padding: 22px 24px 22px 96px !important;
  border-radius: var(--r5-radius) !important;
  background: rgba(255, 255, 255, .03) !important;
  border: 1px solid rgba(255, 255, 255, .13) !important;
}

#training .delivery-icon {
  left: 22px !important;
  top: 27px !important;
  width: 42px !important;
  height: 42px !important;
  color: var(--r5-green) !important;
  opacity: 1 !important;
}

#training .delivery-track article h3 {
  color: #fff !important;
  font-size: 22px !important;
  line-height: 1.25 !important;
}

#training .delivery-track article p {
  color: var(--r5-muted) !important;
  font-size: 13px !important;
  line-height: 1.58 !important;
}

/* Screen 6: developer/resources. Control-console feeling, not repeated cards. */
#resources.ai-resources {
  min-height: 100svh !important;
  padding: 86px var(--r5-page) 70px !important;
  background:
    radial-gradient(circle at 68% 26%, rgba(32, 243, 160, .10), transparent 30%),
    linear-gradient(180deg, #06130d 0%, #031009 100%) !important;
}

#resources .resource-stage {
  width: min(1260px, 100%) !important;
  min-height: calc(100svh - 156px) !important;
  margin: 0 auto !important;
  display: grid !important;
  grid-template-columns: minmax(350px, .42fr) minmax(0, .58fr) !important;
  gap: clamp(38px, 5vw, 72px) !important;
  align-items: center !important;
}

#resources .resource-main h2 {
  color: #fff !important;
  font-size: var(--r5-title) !important;
  line-height: 1.16 !important;
}

#resources .resource-main p {
  color: var(--r5-muted) !important;
  font-size: var(--r5-body) !important;
  line-height: 1.75 !important;
}

#resources .resource-panels {
  display: grid !important;
  gap: 16px !important;
}

#resources .resource-panels article {
  min-height: 158px !important;
  display: grid !important;
  grid-template-columns: 84px minmax(0, 1fr) !important;
  gap: 22px !important;
  align-items: center !important;
  padding: 24px !important;
  border-radius: var(--r5-radius) !important;
}

#resources .resource-icon {
  width: 62px !important;
  height: 62px !important;
  color: var(--r5-green) !important;
  opacity: 1 !important;
}

/* Screen 7: about. Cinematic intro plus clickable video frame. */
#about.ai-about {
  min-height: 100svh !important;
  padding: 86px var(--r5-page) 76px !important;
  background:
    radial-gradient(circle at 76% 22%, rgba(32, 243, 160, .08), transparent 30%),
    linear-gradient(180deg, #0a0b0b 0%, #050806 100%) !important;
}

#about .about-stage {
  width: min(1260px, 100%) !important;
  min-height: calc(100svh - 162px) !important;
  margin: 0 auto !important;
  display: grid !important;
  grid-template-columns: minmax(360px, .42fr) minmax(0, .58fr) !important;
  gap: clamp(42px, 5vw, 76px) !important;
  align-items: center !important;
}

#about .about-narrative-center h2 {
  color: #fff !important;
  font-size: var(--r5-title) !important;
  line-height: 1.18 !important;
  font-weight: 600 !important;
}

#about .about-narrative-center p {
  color: var(--r5-muted) !important;
  font-size: var(--r5-body) !important;
  line-height: 1.86 !important;
}

#about .about-video-frame {
  min-height: min(52vh, 520px) !important;
  border-radius: var(--r5-radius) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  background:
    radial-gradient(circle at 50% 42%, rgba(32, 243, 160, .11), transparent 28%),
    linear-gradient(135deg, rgba(255,255,255,.05), rgba(255,255,255,.015)) !important;
}

/* Footer. One-line legal row after 营业执照 on desktop. */
.dji-footer {
  background: #202220 !important;
}

.dji-footer .footer-download,
.dji-footer .footer-mega,
.dji-footer .footer-brandbar,
.dji-footer .footer-legal {
  width: min(1260px, calc(100% - var(--r5-page) * 2)) !important;
}

.dji-footer .footer-mega {
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: clamp(26px, 3vw, 44px) !important;
}

.footer-records {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 18px !important;
  min-width: 0 !important;
}

.footer-records a,
.footer-records span {
  margin: 0 !important;
  white-space: nowrap !important;
}

.footer-records .footer-copyright,
.footer-records .footer-tagline {
  display: inline-flex !important;
}

.footer-records .footer-copyright::before,
.footer-records .footer-tagline::before {
  content: "|" !important;
  width: auto !important;
  height: auto !important;
  margin: 0 10px 0 0 !important;
  background: none !important;
  color: rgba(255,255,255,.22) !important;
}

@media (max-width: 1280px) {
  #services .infrastructure-section,
  #training .delivery-stage,
  #resources .resource-stage,
  #about .about-stage {
    width: min(1160px, calc(100% - 56px)) !important;
  }

  #services .infra-showcase {
    height: auto !important;
    min-height: 520px !important;
  }

  #scenarios.ai-solutions {
    grid-template-columns: 1fr !important;
    align-items: start !important;
  }

  #scenarios .solution-hero {
    max-width: 760px !important;
    text-align: center !important;
    margin: 0 auto !important;
  }

  #scenarios .solution-hero h2,
  #scenarios .solution-subtitle {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  #scenarios .solution-stats {
    justify-content: center !important;
  }

  #scenarios .solution-board {
    height: auto !important;
    min-height: 520px !important;
  }
}

@media (max-width: 980px) {
  #services.ai-origin,
  #scenarios.ai-solutions,
  #capability.core-tech-section,
  #training.ai-delivery,
  #resources.ai-resources,
  #about.ai-about {
    min-height: auto !important;
    padding: 72px 20px !important;
  }

  #services .infrastructure-section,
  #capability .capability-stage,
  #training .delivery-stage,
  #resources .resource-stage,
  #about .about-stage {
    width: 100% !important;
    min-height: auto !important;
    grid-template-columns: 1fr !important;
  }

  #services .infra-showcase,
  #scenarios .solution-board,
  #capability .tech-console.core-card-grid {
    grid-template-columns: 1fr !important;
    grid-template-rows: none !important;
    height: auto !important;
    min-height: 0 !important;
  }

  #services .infra-module:first-child,
  #services .infra-module:not(:first-child),
  #scenarios .solution-card,
  #scenarios .solution-card:first-child,
  #scenarios .solution-card:nth-child(2),
  #scenarios .solution-card:nth-child(3),
  #scenarios .solution-card:nth-child(4),
  #scenarios .solution-card:nth-child(5),
  #scenarios .solution-card:nth-child(6) {
    grid-column: auto !important;
    grid-row: auto !important;
  }

  #services .infra-module:first-child {
    grid-template-columns: 1fr !important;
    min-height: 460px !important;
  }

  #services .infra-module:not(:first-child) {
    grid-template-columns: 1fr 108px !important;
  }

  #services .infra-module:not(:first-child) .infra-visual,
  #services .infra-module:not(:first-child) .infra-visual img {
    width: 104px !important;
    height: 104px !important;
    min-width: 104px !important;
  }

  #services .infra-module:first-child .infra-visual-base {
    width: 190px !important;
    height: 190px !important;
  }

  #scenarios .solution-card:nth-child(6) {
    display: grid !important;
  }

  #capability .capability-copy h2 br {
    display: initial !important;
  }

  .footer-records {
    flex-wrap: wrap !important;
  }
}
/* 2026-05-30 homepage authority layer.
   This block is intentionally appended at EOF so it wins over older design experiments. */
@media (min-width: 1024px) {
  :root {
    --home-page-x: clamp(48px, 6vw, 108px);
    --home-container: min(1320px, calc(100% - (var(--home-page-x) * 2)));
    --home-title: clamp(34px, 3vw, 46px);
    --home-hero-title: clamp(40px, 3.8vw, 56px);
    --home-card-title: clamp(21px, 1.62vw, 28px);
    --home-copy: clamp(13px, .95vw, 15px);
    --home-muted: #8bbfaa;
    --home-green: #20f3a0;
    --home-green-soft: #5dcaa5;
    --home-radius: 12px;
  }

  html,
  body {
    background: #020605 !important;
  }

  .hero-intelligence-core,
  .hero-metrics,
  .hero-slide.agent-slide::after,
  .agent-slide .hero-content::before,
  .agent-slide .hero-content::after {
    display: none !important;
    content: none !important;
  }

  .ai-home {
    background:
      linear-gradient(180deg, #020605 0%, #020605 18%, #03111d 46%, #0b0b0a 67%, #06140d 100%) !important;
  }

  .ai-section {
    min-height: 100svh !important;
    overflow: hidden !important;
  }

  .infra-hero h2,
  .solution-hero h2,
  .capability-copy h2,
  .delivery-copy h2,
  .resource-copy h2,
  .about-copy h2 {
    font-size: var(--home-title) !important;
    line-height: 1.12 !important;
    letter-spacing: 0 !important;
  }

  .infra-hero p,
  .solution-subtitle,
  .capability-copy p,
  .delivery-copy p,
  .resource-copy p,
  .about-copy p,
  .infra-copy p,
  .solution-card p,
  .core-tech-card p,
  .delivery-node p,
  .resource-pane p {
    font-size: var(--home-copy) !important;
    line-height: 1.7 !important;
  }

  #services.ai-origin {
    height: 100svh !important;
    min-height: 100svh !important;
    padding: 50px 0 42px !important;
    background:
      radial-gradient(circle at 72% 24%, rgba(32, 243, 160, .14), transparent 34%),
      radial-gradient(circle at 20% 78%, rgba(32, 243, 160, .08), transparent 30%),
      linear-gradient(180deg, #020605 0%, #06140d 100%) !important;
  }

  #services.ai-origin::before {
    opacity: .38 !important;
    background-size: 24px 24px !important;
  }

  #services .infrastructure-section {
    width: var(--home-container) !important;
    height: calc(100svh - 92px) !important;
    min-height: 0 !important;
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
    gap: 24px !important;
    margin: 0 auto !important;
  }

  #services .infra-hero {
    height: auto !important;
    min-height: 0 !important;
    display: grid !important;
    justify-items: center !important;
    align-content: start !important;
    padding-top: 0 !important;
  }

  #services .infra-pill {
    margin-bottom: 10px !important;
    padding: 6px 22px !important;
  }

  #services .infra-hero h2 {
    font-size: clamp(32px, 2.8vw, 44px) !important;
    margin: 0 0 8px !important;
    color: #fff !important;
  }

  #services .infra-hero p {
    max-width: 640px !important;
    color: var(--home-green-soft) !important;
    text-align: center !important;
    margin: 0 auto !important;
  }

  #services .infra-metrics {
    margin-top: 12px !important;
    gap: 24px !important;
  }

  #services .infra-showcase {
    height: auto !important;
    min-height: 0 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr) !important;
    grid-template-rows: repeat(3, minmax(0, 1fr)) !important;
    gap: 18px !important;
  }

  #services .infra-module {
    border-radius: var(--home-radius) !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  #services .infra-module:first-child {
    grid-column: 1 !important;
    grid-row: 1 / span 3 !important;
    display: grid !important;
    grid-template-columns: minmax(0, .6fr) minmax(210px, .4fr) !important;
    align-items: center !important;
    padding: 30px 34px !important;
  }

  #services .infra-module:not(:first-child) {
    grid-column: 2 !important;
    grid-row: auto !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 116px !important;
    align-items: center !important;
    gap: 18px !important;
    padding: 22px 28px !important;
  }

  #services .infra-copy {
    min-width: 0 !important;
  }

  #services .infra-copy span {
    font-size: 13px !important;
    color: var(--home-green-soft) !important;
    letter-spacing: .04em !important;
    margin-bottom: 10px !important;
  }

  #services .infra-copy h3 {
    font-size: var(--home-card-title) !important;
    line-height: 1.12 !important;
    color: #fff !important;
    margin: 0 0 14px !important;
    white-space: normal !important;
  }

  #services .infra-module:not(:first-child) .infra-copy h3 {
    color: #d4f5e9 !important;
    margin-bottom: 10px !important;
  }

  #services .infra-copy p {
    max-width: 520px !important;
    color: var(--home-muted) !important;
    margin: 0 !important;
  }

  #services .infra-module:first-child .infra-copy ul {
    margin-top: 22px !important;
    gap: 10px !important;
  }

  #services .infra-module:first-child .infra-visual-base {
    position: relative !important;
    inset: auto !important;
    justify-self: end !important;
    align-self: end !important;
    width: clamp(210px, 18vw, 260px) !important;
    height: clamp(210px, 18vw, 260px) !important;
    overflow: visible !important;
  }

  #services .infra-module:first-child .infra-visual-base::before,
  #services .infra-module:first-child .infra-visual-base::after {
    content: none !important;
    display: none !important;
  }

  #services .infra-module:first-child .infra-visual-base .infra-orb-static,
  #services .infra-module:first-child .infra-visual-base .infra-orb-spin {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  #services .infra-module:first-child .infra-visual-base .infra-orb-static {
    opacity: .96 !important;
  }

  #services .infra-module:first-child .infra-visual-base .infra-orb-spin {
    display: block !important;
    opacity: .5 !important;
    mix-blend-mode: screen !important;
    clip-path: circle(36% at 52% 43%) !important;
    transform-origin: 52% 43% !important;
    animation: homeOrbTurn 8s linear infinite !important;
  }

  @keyframes homeOrbTurn {
    0% { transform: rotate(0deg) scale(1.01); }
    100% { transform: rotate(360deg) scale(1.01); }
  }

  #services .infra-module:not(:first-child) .infra-visual {
    width: 112px !important;
    height: 112px !important;
    min-width: 112px !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
  }

  #services .infra-module:not(:first-child) .infra-visual img {
    width: 112px !important;
    height: 112px !important;
    object-fit: contain !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    mix-blend-mode: screen !important;
  }

  #scenarios.ai-solutions {
    height: 100svh !important;
    min-height: 100svh !important;
    padding: 56px var(--home-page-x) 52px !important;
    display: grid !important;
    grid-template-columns: minmax(260px, .32fr) minmax(0, .68fr) !important;
    align-items: center !important;
    gap: clamp(32px, 4vw, 64px) !important;
    background:
      radial-gradient(circle at 88% 22%, rgba(32, 243, 160, .14), transparent 28%),
      linear-gradient(135deg, #020605 0%, #050b09 58%, #0a0a09 100%) !important;
  }

  #scenarios.ai-solutions::before {
    opacity: .22 !important;
  }

  #scenarios .solution-hero {
    max-width: 420px !important;
    min-width: 0 !important;
    text-align: left !important;
    margin: 0 !important;
  }

  #scenarios .solution-badge {
    margin-bottom: 18px !important;
  }

  #scenarios .solution-hero h2 {
    font-size: clamp(36px, 3.6vw, 54px) !important;
    line-height: 1.14 !important;
    color: #fff !important;
    text-align: left !important;
    margin: 0 0 18px !important;
    max-width: 420px !important;
  }

  #scenarios .solution-subtitle {
    max-width: 420px !important;
    text-align: left !important;
    color: var(--home-muted) !important;
    margin: 0 !important;
  }

  #scenarios .solution-stats {
    margin-top: 24px !important;
    justify-content: flex-start !important;
    gap: 10px !important;
  }

  #scenarios .solution-stat {
    height: 36px !important;
    padding: 0 18px !important;
  }

  #scenarios .solution-board {
    height: min(520px, calc(100svh - 112px)) !important;
    min-height: 430px !important;
    display: grid !important;
    grid-template-columns: minmax(220px, 1.14fr) repeat(3, minmax(132px, .78fr)) !important;
    grid-template-rows: repeat(2, minmax(0, 1fr)) !important;
    gap: 14px !important;
  }

  #scenarios .solution-card {
    min-height: 0 !important;
    padding: 22px 24px !important;
    border-radius: var(--home-radius) !important;
  }

  #scenarios .solution-card:first-child {
    grid-column: 1 !important;
    grid-row: 1 / span 2 !important;
  }

  #scenarios .solution-card:nth-child(2) { grid-column: 2 !important; grid-row: 1 !important; }
  #scenarios .solution-card:nth-child(3) { grid-column: 3 / span 2 !important; grid-row: 1 !important; }
  #scenarios .solution-card:nth-child(4) { grid-column: 1 / span 2 !important; grid-row: 2 !important; }
  #scenarios .solution-card:nth-child(5) { grid-column: 3 !important; grid-row: 2 !important; }
  #scenarios .solution-card:nth-child(6) { grid-column: 4 !important; grid-row: 2 !important; }

  #scenarios .solution-card span {
    font-size: 13px !important;
    color: var(--home-green-soft) !important;
    margin-bottom: 12px !important;
  }

  #scenarios .solution-card h3 {
    font-size: clamp(20px, 1.45vw, 26px) !important;
    line-height: 1.18 !important;
    color: #fff !important;
    margin: 0 0 10px !important;
  }

  #scenarios .solution-card p {
    max-height: none !important;
    overflow: visible !important;
    color: var(--home-muted) !important;
  }

  #scenarios .solution-card svg {
    width: clamp(54px, 5vw, 86px) !important;
    height: clamp(54px, 5vw, 86px) !important;
    opacity: .9 !important;
    stroke: var(--home-green) !important;
  }

  #capability.core-tech-section {
    height: 100svh !important;
    min-height: 100svh !important;
    padding: 66px 0 !important;
    background:
      radial-gradient(circle at 72% 44%, rgba(24, 97, 150, .22), transparent 38%),
      linear-gradient(180deg, #04111e 0%, #061626 52%, #03101c 100%) !important;
  }

  #capability .capability-stage {
    width: var(--home-container) !important;
    height: calc(100svh - 132px) !important;
    min-height: 0 !important;
    display: grid !important;
    grid-template-columns: minmax(360px, .43fr) minmax(0, .57fr) !important;
    align-items: center !important;
    gap: clamp(36px, 5vw, 76px) !important;
  }

  #capability .capability-copy h2 {
    font-size: clamp(36px, 3.5vw, 54px) !important;
    line-height: 1.16 !important;
    max-width: 700px !important;
    white-space: normal !important;
    word-break: keep-all !important;
  }

  #capability .capability-copy h2 br {
    display: block !important;
  }

  #capability .capability-copy p {
    max-width: 560px !important;
    color: var(--home-muted) !important;
  }

  #capability .tech-console.core-card-grid {
    height: min(560px, calc(100svh - 150px)) !important;
    min-height: 470px !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 16px !important;
    padding: 16px !important;
    border-radius: 16px !important;
  }

  #capability .core-tech-card {
    min-height: 0 !important;
    padding: 24px !important;
    border-radius: var(--home-radius) !important;
    display: flex !important;
    flex-direction: column !important;
  }

  #capability .tech-icon {
    width: 44px !important;
    height: 44px !important;
    margin-bottom: 14px !important;
  }

  #capability .core-tech-card h3 {
    font-size: clamp(20px, 1.4vw, 25px) !important;
    line-height: 1.2 !important;
  }

  #capability .core-tech-card p,
  #capability .core-tech-card em {
    max-height: none !important;
    overflow: visible !important;
  }

  #training.ai-delivery {
    height: 100svh !important;
    min-height: 100svh !important;
    padding: 70px 0 !important;
    background: #0b0b0a !important;
  }

  #training .delivery-stage {
    width: var(--home-container) !important;
    height: calc(100svh - 140px) !important;
    min-height: 0 !important;
    display: grid !important;
    grid-template-columns: minmax(330px, .42fr) minmax(0, .58fr) !important;
    gap: clamp(38px, 5vw, 78px) !important;
    align-items: center !important;
  }

  #training .delivery-copy h2 {
    font-size: var(--home-title) !important;
    line-height: 1.16 !important;
    max-width: 560px !important;
  }

  #training .delivery-copy p {
    max-width: 520px !important;
    color: var(--home-muted) !important;
  }

  #training .delivery-flow {
    height: min(520px, calc(100svh - 180px)) !important;
    display: grid !important;
    align-content: center !important;
    gap: 16px !important;
  }

  #training .delivery-node {
    min-height: 92px !important;
    padding: 18px 24px 18px 84px !important;
    border-radius: var(--home-radius) !important;
  }

  #training .delivery-node h3 {
    font-size: clamp(20px, 1.5vw, 26px) !important;
    line-height: 1.18 !important;
  }

  #training .delivery-node::before {
    top: 22px !important;
    left: 28px !important;
  }

  #resources.ai-resources {
    height: 100svh !important;
    min-height: 100svh !important;
    padding: 70px 0 !important;
    background:
      radial-gradient(circle at 75% 44%, rgba(32, 243, 160, .12), transparent 36%),
      linear-gradient(180deg, #06140d 0%, #091610 100%) !important;
  }

  #resources .resource-stage {
    width: var(--home-container) !important;
    height: calc(100svh - 140px) !important;
    min-height: 0 !important;
    display: grid !important;
    grid-template-columns: minmax(330px, .4fr) minmax(0, .6fr) !important;
    gap: clamp(34px, 5vw, 76px) !important;
    align-items: center !important;
  }

  #resources .resource-copy h2 {
    font-size: var(--home-title) !important;
    line-height: 1.16 !important;
  }

  #resources .resource-copy p {
    color: var(--home-muted) !important;
    max-width: 520px !important;
  }

  #resources .resource-stack {
    min-height: 0 !important;
    display: grid !important;
    grid-template-columns: 180px minmax(0, 1fr) !important;
    gap: 18px !important;
  }

  #resources .resource-card {
    min-height: 0 !important;
    padding: 18px !important;
    border-radius: var(--home-radius) !important;
  }

  #resources .resource-card svg {
    width: 36px !important;
    height: 36px !important;
    margin-bottom: 12px !important;
  }

  #resources .resource-card h3 {
    font-size: 18px !important;
    margin-bottom: 6px !important;
  }

  #about.ai-about {
    height: 100svh !important;
    min-height: 100svh !important;
    padding: 70px 0 !important;
    background:
      radial-gradient(circle at 76% 42%, rgba(255, 255, 255, .06), transparent 32%),
      linear-gradient(180deg, #0c0c0c 0%, #060807 100%) !important;
  }

  #about .about-stage {
    width: var(--home-container) !important;
    height: calc(100svh - 140px) !important;
    min-height: 0 !important;
    display: grid !important;
    grid-template-columns: minmax(360px, .43fr) minmax(0, .57fr) !important;
    gap: clamp(42px, 5vw, 90px) !important;
    align-items: center !important;
  }

  #about .about-copy h2 {
    font-size: clamp(38px, 3.7vw, 58px) !important;
    line-height: 1.14 !important;
  }

  #about .about-copy p {
    max-width: 570px !important;
    color: var(--home-muted) !important;
  }

  #about .about-video {
    height: min(430px, calc(100svh - 190px)) !important;
    min-height: 330px !important;
    border-radius: var(--home-radius) !important;
    cursor: pointer !important;
  }

  #about .about-video::after {
    content: "播放公司介绍";
    position: absolute;
    left: 50%;
    bottom: 34px;
    transform: translateX(-50%);
    color: rgba(255,255,255,.74);
    font-size: 13px;
    letter-spacing: .08em;
  }

  .site-footer {
    background: #151716 !important;
    padding: 58px var(--home-page-x) 34px !important;
  }

  .footer-grid {
    width: var(--home-container) !important;
    margin: 0 auto !important;
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 36px !important;
    border-top: 1px solid rgba(255,255,255,.14) !important;
    padding-top: 34px !important;
  }

  .footer-records {
    width: var(--home-container) !important;
    margin: 34px auto 0 !important;
    display: flex !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    gap: 26px !important;
    white-space: nowrap !important;
    color: rgba(255,255,255,.42) !important;
  }

  .footer-records a,
  .footer-records span {
    display: inline-flex !important;
    align-items: center !important;
    margin: 0 !important;
    white-space: nowrap !important;
  }

  .footer-records .footer-copyright,
  .footer-records .footer-tagline {
    display: inline-flex !important;
  }

  .footer-records .footer-copyright::before,
  .footer-records .footer-tagline::before {
    content: "|" !important;
    margin-right: 26px !important;
    color: rgba(255,255,255,.22) !important;
  }
}

@media (min-width: 1024px) and (max-width: 1360px) {
  :root {
    --home-page-x: 36px;
    --home-container: min(1180px, calc(100% - 72px));
    --home-title: clamp(31px, 3vw, 40px);
    --home-card-title: clamp(20px, 1.75vw, 25px);
  }

  #services.ai-origin {
    padding-top: 42px !important;
  }

  #services .infrastructure-section {
    height: calc(100svh - 82px) !important;
    gap: 18px !important;
  }

  #services .infra-showcase {
    gap: 14px !important;
  }

  #services .infra-module:first-child {
    padding: 24px 28px !important;
    grid-template-columns: minmax(0, .62fr) minmax(180px, .38fr) !important;
  }

  #services .infra-module:first-child .infra-visual-base {
    width: 205px !important;
    height: 205px !important;
  }

  #services .infra-module:not(:first-child) {
    grid-template-columns: minmax(0, 1fr) 96px !important;
    padding: 18px 22px !important;
  }

  #services .infra-module:not(:first-child) .infra-visual,
  #services .infra-module:not(:first-child) .infra-visual img {
    width: 96px !important;
    height: 96px !important;
    min-width: 96px !important;
  }

  #scenarios.ai-solutions {
    padding-top: 48px !important;
    padding-bottom: 44px !important;
    gap: 32px !important;
  }

  #scenarios .solution-board {
    height: min(490px, calc(100svh - 104px)) !important;
    gap: 12px !important;
  }

  #scenarios .solution-card {
    padding: 18px 20px !important;
  }

  #capability.core-tech-section,
  #training.ai-delivery,
  #resources.ai-resources,
  #about.ai-about {
    padding-top: 56px !important;
    padding-bottom: 56px !important;
  }

  #capability .capability-stage,
  #training .delivery-stage,
  #resources .resource-stage,
  #about .about-stage {
    height: calc(100svh - 112px) !important;
  }

  #capability .tech-console.core-card-grid {
    min-height: 440px !important;
  }
}

/* 2026-05-30 rhythm11 hard lock: this must stay at the end of the stylesheet */
:root {
  --sws-x: clamp(42px, 6vw, 116px);
  --sws-container: min(1600px, calc(100% - (var(--sws-x) * 2)));
  --sws-title: clamp(38px, 3vw, 50px);
  --sws-title-sm: clamp(34px, 2.45vw, 42px);
  --sws-card-title: clamp(22px, 1.55vw, 29px);
  --sws-text: clamp(14px, .86vw, 16px);
  --sws-sub: clamp(15px, .95vw, 18px);
  --sws-green: #20f3a0;
  --sws-soft: #8bbfaa;
  --sws-line: rgba(157, 225, 203, .16);
  --sws-radius: 12px;
}

.hero-intelligence-core,
.hero-metrics,
.agent-slide::before,
.agent-slide::after,
.agent-slide .hero-stage::before,
.agent-slide .hero-stage::after,
.agent-slide .hero-content::before,
.agent-slide .hero-content::after {
  display: none !important;
  content: none !important;
}

.ai-home {
  background: #020403 !important;
}

.ai-home .ai-section {
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate !important;
  color: #fff !important;
  font-family: "PingFang SC", "Helvetica Neue", Arial, sans-serif !important;
}

.ai-home .ai-section h2,
.ai-home .ai-section h3,
.ai-home .ai-section p,
.ai-home .ai-section li,
.ai-home .ai-section span {
  letter-spacing: 0 !important;
}

#services.ai-origin {
  min-height: 100svh !important;
  padding: 56px 0 64px !important;
  background:
    radial-gradient(circle at 76% 20%, rgba(32, 243, 160, .13), transparent 26%),
    radial-gradient(circle at 18% 82%, rgba(32, 243, 160, .08), transparent 30%),
    linear-gradient(180deg, #030605 0%, #06110c 54%, #020504 100%) !important;
}

#services.ai-origin::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: -2 !important;
  opacity: .34 !important;
  background:
    linear-gradient(rgba(32,243,160,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(32,243,160,.055) 1px, transparent 1px),
    radial-gradient(circle at 14% 22%, rgba(157,225,203,.34) 0 2px, transparent 3px),
    radial-gradient(circle at 84% 38%, rgba(32,243,160,.32) 0 2px, transparent 3px),
    linear-gradient(28deg, transparent 0 24%, rgba(32,243,160,.12) 24.3%, transparent 25.2% 100%) !important;
  background-size: 32px 32px, 32px 32px, 560px 420px, 720px 520px, 100% 100% !important;
}

#services .services-depth-field,
#services .depth-layer {
  display: none !important;
}

#services .infrastructure-section {
  width: var(--sws-container) !important;
  min-height: calc(100svh - 120px) !important;
  display: grid !important;
  grid-template-rows: auto 1fr !important;
  align-content: center !important;
  gap: clamp(26px, 3.2vh, 38px) !important;
}

#services .infra-hero {
  max-width: 820px !important;
  margin: 0 auto !important;
  text-align: center !important;
}

#services .infra-pill,
#scenarios .solution-badge,
#capability .core-badge {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  min-height: 34px !important;
  padding: 0 22px !important;
  border: 1px solid rgba(32,243,160,.68) !important;
  border-radius: 999px !important;
  background: rgba(32,243,160,.035) !important;
  color: #9fe1cb !important;
  font-size: 14px !important;
  font-weight: 500 !important;
}

#services .infra-hero h2 {
  margin: 14px 0 10px !important;
  font-size: var(--sws-title) !important;
  line-height: 1.12 !important;
  color: #fff !important;
  font-weight: 700 !important;
}

#services .infra-hero p {
  max-width: 740px !important;
  margin: 0 auto !important;
  font-size: var(--sws-sub) !important;
  line-height: 1.65 !important;
  color: #5dcaa5 !important;
}

#services .infra-metrics {
  display: flex !important;
  justify-content: center !important;
  gap: 0 !important;
  margin-top: 22px !important;
}

#services .infra-metrics span {
  min-width: 132px !important;
  padding: 0 24px !important;
  border-right: 1px solid rgba(157,225,203,.18) !important;
  color: rgba(139,191,170,.74) !important;
  font-size: 13px !important;
}

#services .infra-metrics span:last-child { border-right: 0 !important; }
#services .infra-metrics strong {
  display: block !important;
  color: #d4f5e9 !important;
  font-size: 32px !important;
  line-height: 1 !important;
  margin-bottom: 6px !important;
}

#services .infra-showcase {
  display: grid !important;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr) !important;
  grid-template-rows: repeat(3, minmax(138px, 1fr)) !important;
  gap: 18px !important;
  min-height: 500px !important;
}

#services .infra-module {
  position: relative !important;
  min-width: 0 !important;
  min-height: 0 !important;
  overflow: hidden !important;
  border-radius: var(--sws-radius) !important;
  border: 1px solid var(--sws-line) !important;
  background:
    radial-gradient(circle at 78% 48%, rgba(32,243,160,.16), transparent 42%),
    rgba(255,255,255,.025) !important;
  backdrop-filter: blur(22px) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.09), 0 26px 70px rgba(0,0,0,.2) !important;
  transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease !important;
}

#services .infra-module:hover,
#services .infra-module:focus-visible {
  transform: translateY(-4px) !important;
  border-color: rgba(32,243,160,.62) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 26px 80px rgba(32,243,160,.09) !important;
}

#services .infra-module:first-child {
  grid-row: 1 / span 3 !important;
  display: grid !important;
  grid-template-columns: minmax(0, .58fr) minmax(230px, .42fr) !important;
  align-items: center !important;
  gap: 24px !important;
  padding: clamp(30px, 3.1vw, 46px) !important;
}

#services .infra-module:not(:first-child) {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 132px !important;
  align-items: center !important;
  gap: 20px !important;
  padding: 24px 30px !important;
}

#services .infra-copy {
  min-width: 0 !important;
  position: relative !important;
  z-index: 2 !important;
}

#services .infra-copy span {
  display: inline-flex !important;
  align-items: center !important;
  gap: 12px !important;
  margin: 0 0 14px !important;
  color: #5dcaa5 !important;
  font-size: 13px !important;
  font-weight: 700 !important;
}

#services .infra-copy span::after {
  content: "" !important;
  width: 42px !important;
  height: 1px !important;
  background: rgba(32,243,160,.5) !important;
}

#services .infra-copy h3 {
  margin: 0 0 16px !important;
  color: #fff !important;
  font-size: var(--sws-card-title) !important;
  line-height: 1.16 !important;
  font-weight: 700 !important;
}

#services .infra-module:not(:first-child) .infra-copy h3 {
  color: #d4f5e9 !important;
}

#services .infra-copy p {
  margin: 0 !important;
  max-width: 560px !important;
  color: var(--sws-soft) !important;
  font-size: var(--sws-text) !important;
  line-height: 1.72 !important;
}

#services .infra-copy ul {
  display: grid !important;
  gap: 12px !important;
  margin: 28px 0 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

#services .infra-copy li {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  color: rgba(255,255,255,.88) !important;
  font-size: 15px !important;
  white-space: nowrap !important;
}

#services .infra-copy li::before {
  content: "" !important;
  width: 10px !important;
  height: 10px !important;
  border-radius: 50% !important;
  border: 2px solid var(--sws-green) !important;
}

#services .infra-visual,
#services .infra-visual img {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

#services .infra-module:first-child .infra-visual-base {
  position: relative !important;
  justify-self: end !important;
  align-self: end !important;
  width: clamp(230px, 19vw, 290px) !important;
  height: clamp(230px, 19vw, 290px) !important;
  overflow: visible !important;
}

#services .infra-orb-static {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  opacity: .96 !important;
  filter: drop-shadow(0 0 24px rgba(32,243,160,.38)) !important;
}

#services .infra-orb-spin {
  display: none !important;
}

#services .infra-visual-base::before {
  content: "" !important;
  position: absolute !important;
  left: 28% !important;
  top: 17% !important;
  width: 62% !important;
  height: 62% !important;
  border-radius: 50% !important;
  background:
    conic-gradient(from 0deg, transparent 0 18%, rgba(255,255,255,.55) 20%, transparent 22% 46%, rgba(32,243,160,.45) 49%, transparent 52% 100%),
    repeating-radial-gradient(circle, rgba(255,255,255,.18) 0 1px, transparent 2px 18px) !important;
  mix-blend-mode: screen !important;
  opacity: .48 !important;
  animation: swsSphereSpin 9s linear infinite !important;
  pointer-events: none !important;
}

#services .infra-visual-base::after {
  content: "" !important;
  position: absolute !important;
  left: 28% !important;
  bottom: 8% !important;
  width: 58% !important;
  height: 16% !important;
  border-radius: 50% !important;
  background: radial-gradient(ellipse, rgba(32,243,160,.28), transparent 66%) !important;
  filter: blur(2px) !important;
  opacity: .6 !important;
}

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

#services .infra-module:not(:first-child) .infra-visual,
#services .infra-module:not(:first-child) .infra-visual img {
  width: 132px !important;
  height: 132px !important;
  min-width: 132px !important;
  display: block !important;
  object-fit: contain !important;
  overflow: visible !important;
  mix-blend-mode: screen !important;
  filter: brightness(1.08) drop-shadow(0 0 20px rgba(32,243,160,.3)) !important;
}

#scenarios.ai-solutions {
  min-height: 100svh !important;
  padding: 56px var(--sws-x) 60px !important;
  display: grid !important;
  grid-template-columns: minmax(290px, .33fr) minmax(0, .67fr) !important;
  align-items: center !important;
  gap: clamp(34px, 4.4vw, 76px) !important;
  background:
    radial-gradient(circle at 86% 12%, rgba(32,243,160,.08), transparent 24%),
    linear-gradient(118deg, #030505 0%, #080908 58%, #0a0a09 100%) !important;
}

#scenarios .solution-glow,
#scenarios .solution-divider {
  display: none !important;
}

#scenarios .solution-hero {
  max-width: 390px !important;
  text-align: left !important;
  margin: 0 !important;
}

#scenarios .solution-badge { margin: 0 0 20px !important; }

#scenarios .solution-hero h2 {
  max-width: 390px !important;
  margin: 0 0 18px !important;
  color: #fff !important;
  font-size: clamp(38px, 3.55vw, 54px) !important;
  line-height: 1.12 !important;
  text-align: left !important;
}

#scenarios .solution-subtitle {
  max-width: 360px !important;
  margin: 0 !important;
  color: var(--sws-soft) !important;
  font-size: var(--sws-sub) !important;
  line-height: 1.7 !important;
  text-align: left !important;
}

#scenarios .solution-stats {
  margin: 28px 0 0 !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  justify-content: flex-start !important;
}

#scenarios .solution-stats span {
  min-height: 34px !important;
  padding: 0 16px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  border: 1px solid rgba(157,225,203,.18) !important;
  border-radius: 999px !important;
  color: var(--sws-soft) !important;
  font-size: 13px !important;
}

#scenarios .solution-stats strong {
  color: #d4f5e9 !important;
  font-size: 17px !important;
}

#scenarios .solution-board {
  width: 100% !important;
  height: min(560px, calc(100svh - 120px)) !important;
  min-height: 500px !important;
  display: grid !important;
  grid-template-columns: 1.35fr 1fr 1fr !important;
  grid-template-rows: repeat(2, minmax(0, 1fr)) !important;
  gap: 16px !important;
}

#scenarios .solution-card {
  position: relative !important;
  min-height: 0 !important;
  overflow: hidden !important;
  padding: 24px !important;
  border-radius: var(--sws-radius) !important;
  border: 1px solid rgba(32,243,160,.22) !important;
  background:
    radial-gradient(circle at 76% 24%, rgba(32,243,160,.14), transparent 34%),
    rgba(13,42,28,.58) !important;
  backdrop-filter: blur(18px) !important;
}

#scenarios .solution-card:first-child {
  grid-column: 1 !important;
  grid-row: 1 / span 2 !important;
  display: flex !important;
  align-items: flex-end !important;
}

#scenarios .solution-card:nth-child(2) { grid-column: 2 !important; grid-row: 1 !important; }
#scenarios .solution-card:nth-child(3) { grid-column: 3 !important; grid-row: 1 !important; }
#scenarios .solution-card:nth-child(4) { grid-column: 1 !important; grid-row: 2 !important; }
#scenarios .solution-card:nth-child(5) { grid-column: 2 !important; grid-row: 2 !important; }
#scenarios .solution-card:nth-child(6) { grid-column: 3 !important; grid-row: 2 !important; }

#scenarios .solution-visual {
  position: absolute !important;
  right: 22px !important;
  top: 18px !important;
  width: clamp(70px, 6vw, 108px) !important;
  height: clamp(70px, 6vw, 108px) !important;
  opacity: .95 !important;
}

#scenarios .solution-card:first-child .solution-visual {
  width: clamp(116px, 10vw, 170px) !important;
  height: clamp(116px, 10vw, 170px) !important;
  top: 40px !important;
  right: 36px !important;
}

#scenarios .solution-icon {
  width: 100% !important;
  height: 100% !important;
  stroke: var(--sws-green) !important;
  stroke-width: 2.5 !important;
  fill: none !important;
  filter: drop-shadow(0 0 18px rgba(32,243,160,.32)) !important;
}

#scenarios .solution-content {
  position: relative !important;
  z-index: 2 !important;
  max-width: 84% !important;
}

#scenarios .solution-content span {
  display: block !important;
  margin-bottom: 12px !important;
  color: #5dcaa5 !important;
  font-size: 13px !important;
  font-weight: 700 !important;
}

#scenarios .solution-content h3 {
  margin: 0 0 10px !important;
  color: #fff !important;
  font-size: clamp(22px, 1.55vw, 28px) !important;
  line-height: 1.18 !important;
}

#scenarios .solution-content p {
  margin: 0 !important;
  color: var(--sws-soft) !important;
  font-size: var(--sws-text) !important;
  line-height: 1.62 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 3 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

#capability.core-tech-section {
  min-height: 100svh !important;
  padding: 70px 0 !important;
  background:
    radial-gradient(circle at 78% 40%, rgba(32,243,160,.09), transparent 26%),
    radial-gradient(circle at 45% 50%, rgba(20,80,120,.18), transparent 38%),
    linear-gradient(180deg, #04111e 0%, #071625 56%, #04101a 100%) !important;
}

#capability .capability-stage {
  width: var(--sws-container) !important;
  min-height: calc(100svh - 140px) !important;
  display: grid !important;
  grid-template-columns: minmax(430px, .44fr) minmax(0, .56fr) !important;
  align-items: center !important;
  gap: clamp(42px, 5.2vw, 86px) !important;
}

#capability .capability-copy h2 {
  margin: 0 0 22px !important;
  color: #fff !important;
  font-size: var(--sws-title-sm) !important;
  line-height: 1.18 !important;
  max-width: 690px !important;
  white-space: normal !important;
  word-break: keep-all !important;
}

#capability .capability-copy h2 br {
  display: none !important;
}

#capability .capability-copy p {
  margin: 0 0 30px !important;
  max-width: 620px !important;
  color: var(--sws-soft) !important;
  font-size: var(--sws-sub) !important;
  line-height: 1.76 !important;
}

#capability .core-cta {
  min-height: 46px !important;
  display: inline-flex !important;
  align-items: center !important;
  padding: 0 28px !important;
  border: 1px solid rgba(32,243,160,.7) !important;
  border-radius: var(--sws-radius) !important;
  color: var(--sws-green) !important;
  text-decoration: none !important;
}

#capability .tech-console.core-card-grid {
  width: 100% !important;
  min-height: 520px !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 16px !important;
  padding: 18px !important;
  border-radius: 18px !important;
  background: rgba(13,31,20,.62) !important;
  border: 1px solid rgba(157,225,203,.08) !important;
}

#capability .core-tech-card {
  min-height: 230px !important;
  padding: 28px !important;
  border-radius: var(--sws-radius) !important;
  background: rgba(10,40,24,.74) !important;
  border: 1px solid rgba(32,243,160,.16) !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}

#capability .tech-icon {
  width: 58px !important;
  height: 58px !important;
  margin: 0 0 18px !important;
  stroke: var(--sws-green) !important;
  fill: none !important;
  filter: drop-shadow(0 0 20px rgba(32,243,160,.35)) !important;
}

#capability .core-tech-card span {
  color: rgba(32,243,160,.46) !important;
  font-size: 13px !important;
  margin-bottom: 10px !important;
}

#capability .core-tech-card h3 {
  margin: 0 0 12px !important;
  color: #fff !important;
  font-size: clamp(21px, 1.55vw, 28px) !important;
  line-height: 1.18 !important;
}

#capability .core-tech-card p {
  margin: 0 0 12px !important;
  color: #5dcaa5 !important;
  font-size: var(--sws-text) !important;
  line-height: 1.55 !important;
}

#capability .core-tech-card em {
  margin-top: auto !important;
  padding-top: 12px !important;
  border-top: 1px solid rgba(32,243,160,.14) !important;
  color: rgba(139,191,170,.62) !important;
  font-style: normal !important;
  font-size: 13px !important;
  line-height: 1.6 !important;
}

#training.ai-delivery {
  min-height: 100svh !important;
  padding: 70px 0 !important;
  background:
    radial-gradient(circle at 18% 28%, rgba(32,243,160,.08), transparent 28%),
    linear-gradient(180deg, #0d0d0c 0%, #060706 100%) !important;
}

#training .delivery-stage {
  width: var(--sws-container) !important;
  min-height: calc(100svh - 140px) !important;
  display: grid !important;
  grid-template-columns: minmax(360px, .4fr) minmax(0, .6fr) !important;
  gap: clamp(46px, 6vw, 100px) !important;
  align-items: center !important;
}

#training .stage-head .section-mark,
#resources .resource-main .section-mark,
#about .section-mark {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  color: var(--sws-green) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  margin: 0 0 24px !important;
}

#training .stage-head .section-mark::before,
#resources .resource-main .section-mark::before,
#about .section-mark::before {
  content: "" !important;
  width: 10px !important;
  height: 10px !important;
  border-radius: 50% !important;
  background: var(--sws-green) !important;
}

#training .stage-head h2,
#resources .resource-main h2,
#about .about-narrative h2 {
  margin: 0 0 22px !important;
  color: #fff !important;
  font-size: var(--sws-title-sm) !important;
  line-height: 1.18 !important;
}

#training .stage-head p,
#resources .resource-main p,
#about .about-narrative p {
  color: var(--sws-soft) !important;
  font-size: var(--sws-sub) !important;
  line-height: 1.78 !important;
}

#training .delivery-track {
  position: relative !important;
  display: grid !important;
  gap: 18px !important;
  padding-left: 46px !important;
}

#training .delivery-track::before {
  content: "" !important;
  position: absolute !important;
  left: 16px !important;
  top: 18px !important;
  bottom: 18px !important;
  width: 1px !important;
  background: linear-gradient(180deg, transparent, rgba(32,243,160,.75), transparent) !important;
}

#training .delivery-track article {
  position: relative !important;
  min-height: 118px !important;
  display: grid !important;
  grid-template-columns: 54px minmax(0, 1fr) !important;
  grid-template-areas: "icon num" "icon title" "icon text" !important;
  column-gap: 20px !important;
  align-content: center !important;
  padding: 22px 26px !important;
  border-radius: var(--sws-radius) !important;
  background: rgba(255,255,255,.022) !important;
  border: 1px solid rgba(157,225,203,.13) !important;
}

#training .delivery-track article::before {
  content: "" !important;
  position: absolute !important;
  left: -36px !important;
  top: 50% !important;
  width: 12px !important;
  height: 12px !important;
  margin-top: -6px !important;
  border-radius: 50% !important;
  background: var(--sws-green) !important;
}

#training .delivery-icon {
  grid-area: icon !important;
  display: block !important;
  width: 48px !important;
  height: 48px !important;
  align-self: center !important;
  stroke: var(--sws-green) !important;
  fill: none !important;
}

#training .delivery-track article span { grid-area: num !important; color: #5dcaa5 !important; font-size: 13px !important; }
#training .delivery-track article h3 { grid-area: title !important; margin: 0 0 6px !important; color: #fff !important; font-size: clamp(22px, 1.55vw, 28px) !important; }
#training .delivery-track article p { grid-area: text !important; margin: 0 !important; color: var(--sws-soft) !important; font-size: var(--sws-text) !important; }

#resources.ai-resources {
  min-height: 100svh !important;
  padding: 70px 0 !important;
  background:
    radial-gradient(circle at 72% 34%, rgba(32,243,160,.12), transparent 30%),
    linear-gradient(180deg, #07140e 0%, #08110d 100%) !important;
}

#resources .resource-stage {
  width: var(--sws-container) !important;
  min-height: calc(100svh - 140px) !important;
  display: grid !important;
  grid-template-columns: minmax(340px, .38fr) minmax(0, .62fr) !important;
  gap: clamp(44px, 5.8vw, 92px) !important;
  align-items: center !important;
}

#resources .resource-tabs {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 10px !important;
  margin-top: 30px !important;
}

#resources .resource-tabs button {
  min-height: 42px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(32,243,160,.22) !important;
  background: rgba(255,255,255,.02) !important;
  color: var(--sws-soft) !important;
}

#resources .resource-tabs button.is-active {
  border-color: rgba(32,243,160,.74) !important;
  color: var(--sws-green) !important;
}

#resources .resource-panels {
  display: grid !important;
  gap: 16px !important;
}

#resources .resource-panels article {
  min-height: 158px !important;
  display: grid !important;
  grid-template-columns: 64px minmax(0, 1fr) !important;
  grid-template-areas: "icon label" "icon title" "icon text" !important;
  column-gap: 22px !important;
  align-content: center !important;
  padding: 24px !important;
  border-radius: var(--sws-radius) !important;
  border: 1px solid rgba(157,225,203,.14) !important;
  background: rgba(255,255,255,.025) !important;
  opacity: .76 !important;
}

#resources .resource-panels article.is-active {
  opacity: 1 !important;
  border-color: rgba(32,243,160,.54) !important;
  background: rgba(13,42,28,.54) !important;
}

#resources .resource-icon {
  grid-area: icon !important;
  display: block !important;
  width: 56px !important;
  height: 56px !important;
  align-self: center !important;
  stroke: var(--sws-green) !important;
  fill: none !important;
}

#resources .resource-panels article span { grid-area: label !important; color: #5dcaa5 !important; font-size: 13px !important; }
#resources .resource-panels article h3 { grid-area: title !important; margin: 0 0 8px !important; color: #fff !important; font-size: clamp(22px, 1.55vw, 28px) !important; }
#resources .resource-panels article p { grid-area: text !important; margin: 0 !important; color: var(--sws-soft) !important; font-size: var(--sws-text) !important; }

#about.ai-about {
  min-height: 100svh !important;
  padding: 74px 0 !important;
  background:
    radial-gradient(circle at 72% 46%, rgba(255,255,255,.07), transparent 32%),
    linear-gradient(180deg, #0b0c0b 0%, #070907 100%) !important;
}

#about .about-stage {
  width: var(--sws-container) !important;
  min-height: calc(100svh - 148px) !important;
  display: grid !important;
  grid-template-columns: minmax(400px, .42fr) minmax(0, .58fr) !important;
  gap: clamp(48px, 6vw, 110px) !important;
  align-items: center !important;
}

#about .about-narrative {
  max-width: 660px !important;
  text-align: left !important;
}

#about .about-cinema {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  min-height: min(430px, calc(100svh - 190px)) !important;
  border-radius: var(--sws-radius) !important;
  border: 1px solid rgba(255,255,255,.13) !important;
  background:
    radial-gradient(circle at 52% 42%, rgba(32,243,160,.14), transparent 22%),
    linear-gradient(140deg, rgba(255,255,255,.07), rgba(255,255,255,.012) 42%, rgba(32,243,160,.05)) !important;
  overflow: hidden !important;
  cursor: pointer !important;
}

#about .about-cinema-mark {
  position: absolute !important;
  inset: 16% 20% !important;
  opacity: .42 !important;
}

#about .about-cinema-mark span {
  position: absolute !important;
  left: 50% !important;
  bottom: 10% !important;
  width: 1px !important;
  height: 58% !important;
  transform-origin: bottom center !important;
  background: rgba(157,225,203,.42) !important;
}

#about .about-cinema-mark span:nth-child(1) { transform: rotate(-48deg); }
#about .about-cinema-mark span:nth-child(2) { transform: rotate(-24deg); }
#about .about-cinema-mark span:nth-child(3) { transform: rotate(0deg); }
#about .about-cinema-mark span:nth-child(4) { transform: rotate(24deg); }
#about .about-cinema-mark span:nth-child(5) { transform: rotate(48deg); }

#about .about-cinema::after {
  content: "播放公司介绍";
  position: absolute;
  left: 50%;
  bottom: 30px;
  transform: translateX(-50%);
  color: rgba(255,255,255,.7);
  font-size: 13px;
}

.site-footer.dji-footer {
  background: #242524 !important;
  color: rgba(255,255,255,.72) !important;
  padding: 54px 0 30px !important;
}

.site-footer .container {
  width: var(--sws-container) !important;
  max-width: var(--sws-container) !important;
}

.footer-download {
  min-height: 86px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 26px !important;
  padding-bottom: 34px !important;
  border-bottom: 1px solid rgba(255,255,255,.14) !important;
}

.footer-download p { margin: 0 !important; color: rgba(255,255,255,.84) !important; font-size: 18px !important; font-weight: 600 !important; }
.footer-download a { min-height: 42px !important; padding: 0 28px !important; display: inline-flex !important; align-items: center !important; border-radius: 999px !important; background: rgba(255,255,255,.1) !important; color: #fff !important; text-decoration: none !important; }

.footer-mega {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: clamp(24px, 4vw, 62px) !important;
  padding: 38px 0 48px !important;
}

.footer-column { display: flex !important; flex-direction: column !important; gap: 12px !important; }
.footer-column h3 { margin: 18px 0 4px !important; color: #fff !important; font-size: 15px !important; }
.footer-column h3:first-child { margin-top: 0 !important; }
.footer-column a,
.footer-column span { color: rgba(255,255,255,.66) !important; font-size: 14px !important; line-height: 1.45 !important; text-decoration: none !important; }

.footer-brandbar {
  display: grid !important;
  grid-template-columns: 120px minmax(0, 1fr) auto !important;
  gap: 30px !important;
  align-items: center !important;
  padding: 24px 0 !important;
  border-top: 1px solid rgba(255,255,255,.14) !important;
  border-bottom: 1px solid rgba(255,255,255,.14) !important;
}

.footer-brandbar img { width: 104px !important; filter: brightness(0) invert(1) !important; }
.footer-brandbar nav,
.footer-social { display: flex !important; flex-wrap: wrap !important; align-items: center !important; gap: 22px !important; }
.footer-brandbar a,
.footer-social a { color: rgba(255,255,255,.72) !important; font-size: 14px !important; text-decoration: none !important; }
.footer-social a { width: 34px !important; height: 34px !important; border-radius: 50% !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; background: rgba(255,255,255,.1) !important; font-size: 12px !important; }

.footer-legal {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 24px !important;
  padding-top: 22px !important;
}

.footer-records {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 0 !important;
}

.footer-records a,
.footer-records span {
  display: inline-flex !important;
  align-items: center !important;
  margin: 0 !important;
  color: rgba(255,255,255,.48) !important;
  font-size: 14px !important;
  line-height: 1.7 !important;
  text-decoration: none !important;
}

.footer-records a:not(:last-child)::after,
.footer-records span:not(:last-child)::after {
  content: "|" !important;
  margin: 0 18px !important;
  color: rgba(255,255,255,.2) !important;
}

.footer-records .footer-copyright,
.footer-records .footer-tagline {
  display: inline-flex !important;
}

.footer-records .footer-copyright::before,
.footer-records .footer-tagline::before {
  content: none !important;
}

@media (max-width: 1360px) and (min-width: 1024px) {
  :root {
    --sws-x: 42px;
    --sws-title: clamp(34px, 3vw, 46px);
    --sws-title-sm: clamp(31px, 2.55vw, 40px);
  }

  #services .infrastructure-section,
  #training .delivery-stage,
  #resources .resource-stage,
  #about .about-stage,
  #capability .capability-stage {
    width: min(1180px, calc(100% - 72px)) !important;
  }

  #services .infra-showcase { min-height: 450px !important; gap: 14px !important; }
  #services .infra-module:first-child { padding: 28px !important; grid-template-columns: minmax(0, .62fr) 205px !important; }
  #services .infra-module:first-child .infra-visual-base { width: 205px !important; height: 205px !important; }
  #services .infra-module:not(:first-child) { grid-template-columns: minmax(0, 1fr) 96px !important; padding: 20px 24px !important; }
  #services .infra-module:not(:first-child) .infra-visual,
  #services .infra-module:not(:first-child) .infra-visual img { width: 96px !important; height: 96px !important; min-width: 96px !important; }
  #scenarios .solution-board { min-height: 450px !important; height: min(480px, calc(100svh - 100px)) !important; }
}

@media (max-width: 1023px) {
  :root {
    --sws-x: 24px;
    --sws-title: clamp(32px, 9vw, 42px);
    --sws-title-sm: clamp(30px, 8vw, 38px);
  }

  #services.ai-origin,
  #scenarios.ai-solutions,
  #capability.core-tech-section,
  #training.ai-delivery,
  #resources.ai-resources,
  #about.ai-about {
    min-height: auto !important;
    padding: 58px 24px !important;
    display: block !important;
  }

  #services .infrastructure-section,
  #capability .capability-stage,
  #training .delivery-stage,
  #resources .resource-stage,
  #about .about-stage {
    width: 100% !important;
    min-height: auto !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }

  #services .infra-showcase,
  #scenarios .solution-board {
    height: auto !important;
    min-height: 0 !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: none !important;
    gap: 14px !important;
  }

  #services .infra-module,
  #services .infra-module:first-child,
  #services .infra-module:not(:first-child) {
    grid-column: auto !important;
    grid-row: auto !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 98px !important;
    min-height: 178px !important;
    padding: 24px !important;
  }

  #services .infra-module:first-child {
    grid-template-columns: 1fr !important;
    min-height: 420px !important;
  }

  #services .infra-module:first-child .infra-visual-base {
    justify-self: center !important;
    width: 210px !important;
    height: 210px !important;
  }

  #services .infra-module:not(:first-child) .infra-visual,
  #services .infra-module:not(:first-child) .infra-visual img {
    display: block !important;
    width: 98px !important;
    height: 98px !important;
    min-width: 98px !important;
  }

  #scenarios .solution-card,
  #scenarios .solution-card:first-child,
  #scenarios .solution-card:nth-child(n) {
    grid-column: auto !important;
    grid-row: auto !important;
    min-height: 188px !important;
  }

  #capability .tech-console.core-card-grid {
    width: 100% !important;
    min-height: auto !important;
    grid-template-columns: 1fr !important;
  }

  #training .delivery-track { padding-left: 32px !important; }
  #resources .resource-tabs { grid-template-columns: 1fr !important; }
  .footer-mega,
  .footer-brandbar,
  .footer-legal { display: grid !important; grid-template-columns: 1fr !important; }
}

/* 2026-05-30 rhythm12: homepage visual rhythm reset, keep this block last */
:root {
  --sws-black: #020504;
  --sws-ink: #06140e;
  --sws-green-deep: #071b12;
  --sws-green-card: rgba(10, 38, 25, .72);
  --sws-blue-deep: #04111e;
  --sws-neutral: #0b0c0c;
  --sws-line: rgba(157, 225, 203, .18);
  --sws-line-strong: rgba(29, 158, 117, .46);
  --sws-brand: #19df9a;
  --sws-brand-soft: #5dcaa5;
  --sws-text: #f4fff9;
  --sws-muted: #8bbfaa;
  --sws-faint: rgba(139, 191, 170, .58);
  --sws-page-x: clamp(28px, 5.4vw, 118px);
  --sws-title: clamp(34px, 3.05vw, 52px);
  --sws-title-tight: clamp(32px, 2.65vw, 46px);
  --sws-card-title: clamp(22px, 1.75vw, 30px);
  --sws-body: clamp(14px, .96vw, 16px);
}

html,
body {
  background: var(--sws-black) !important;
  color: var(--sws-text) !important;
  overflow-x: clip !important;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(circle at 82% 8%, rgba(29, 158, 117, .12), transparent 28%),
    radial-gradient(circle at 12% 78%, rgba(10, 42, 28, .42), transparent 30%),
    linear-gradient(180deg, #020504 0%, #050807 100%);
}

.site-header {
  height: 72px !important;
  padding: 0 var(--sws-page-x) !important;
  background: rgba(0, 0, 0, .62) !important;
  border-bottom: 1px solid rgba(255, 255, 255, .08) !important;
  backdrop-filter: blur(18px) saturate(120%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(120%) !important;
  border-radius: 0 !important;
}

.brand img {
  width: auto !important;
  height: 38px !important;
  object-fit: contain !important;
}

.site-nav {
  gap: clamp(28px, 3.5vw, 58px) !important;
}

.nav-link,
.console-link,
.lang-switch {
  font-size: 15px !important;
  font-weight: 400 !important;
  letter-spacing: .02em !important;
  color: rgba(255, 255, 255, .76) !important;
}

.nav-link:hover,
.nav-link.is-active,
.console-link:hover {
  color: var(--sws-brand) !important;
}

.nav-panel {
  background:
    radial-gradient(circle at 18% 0%, rgba(29, 158, 117, .16), transparent 38%),
    rgba(1, 9, 6, .94) !important;
  border: 1px solid rgba(157, 225, 203, .12) !important;
  box-shadow: 0 28px 90px rgba(0, 0, 0, .42) !important;
  backdrop-filter: blur(22px) !important;
  border-radius: 14px !important;
}

.nav-panel-grid a {
  border-radius: 10px !important;
  background: rgba(255, 255, 255, .025) !important;
  border: 1px solid rgba(157, 225, 203, .08) !important;
}

.nav-panel-grid a:hover {
  border-color: rgba(29, 158, 117, .5) !important;
  background: rgba(29, 158, 117, .08) !important;
}

.hero .about-cinema-mark,
.hero .about-cinema-mark *,
.hero-intelligence-core,
.hero-metrics,
.agent-slide::before,
.agent-slide::after,
.agent-slide .hero-stage::before,
.agent-slide .hero-stage::after,
.agent-slide .hero-content::before,
.agent-slide .hero-content::after {
  display: none !important;
  content: none !important;
}

.hero {
  background: #020302 !important;
}

.hero .hero-stage {
  width: min(1520px, calc(100% - var(--sws-page-x) * 2)) !important;
}

.hero .hero-content h1,
.hero-slide h2 {
  font-size: clamp(52px, 5.5vw, 92px) !important;
  line-height: 1.08 !important;
  letter-spacing: 0 !important;
  font-weight: 600 !important;
}

.hero .hero-copy,
.cert-content p,
.workflow-content p {
  font-size: clamp(18px, 1.35vw, 24px) !important;
  color: rgba(255, 255, 255, .78) !important;
  letter-spacing: .02em !important;
}

.hero .button {
  border-radius: 6px !important;
  min-width: 136px !important;
  height: 44px !important;
  font-size: 15px !important;
  font-weight: 500 !important;
}

.hero .button.primary {
  background: #16b878 !important;
  color: #fff !important;
  border-color: #16b878 !important;
  box-shadow: 0 18px 46px rgba(22, 184, 120, .26) !important;
}

.hero .button.secondary {
  background: rgba(0, 0, 0, .12) !important;
  color: rgba(255, 255, 255, .86) !important;
  border-color: rgba(255, 255, 255, .36) !important;
}

.hero-pagination,
.hero-dots {
  display: none !important;
}

.hero-arrows .hero-arrow {
  width: 42px !important;
  height: 64px !important;
  border: 0 !important;
  background: transparent !important;
  opacity: .74 !important;
}

.hero-arrows .hero-arrow::before {
  width: 18px !important;
  height: 18px !important;
  border-width: 0 0 3px 3px !important;
  border-color: rgba(255, 255, 255, .86) !important;
}

.hero-arrow-prev { left: -8px !important; }
.hero-arrow-next { right: -8px !important; }

.ai-home {
  background: var(--sws-black) !important;
}

.ai-home > .ai-section {
  position: relative !important;
  isolation: isolate !important;
  overflow: hidden !important;
  padding: clamp(64px, 8vh, 92px) var(--sws-page-x) !important;
  min-height: min(100svh, 960px) !important;
  border-top: 1px solid rgba(157, 225, 203, .08) !important;
}

.ai-home > .ai-section::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: -2 !important;
  pointer-events: none !important;
  opacity: .9 !important;
}

.ai-home > .ai-section::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: -1 !important;
  pointer-events: none !important;
  background-image:
    linear-gradient(rgba(157, 225, 203, .025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(157, 225, 203, .025) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: radial-gradient(circle at center, #000 0%, transparent 72%);
}

#services.ai-origin {
  background: #010705 !important;
}

#services.ai-origin::before {
  background:
    radial-gradient(circle at 50% 0%, rgba(29, 158, 117, .12), transparent 30%),
    radial-gradient(circle at 78% 45%, rgba(29, 158, 117, .18), transparent 36%),
    linear-gradient(180deg, #020504 0%, #06170f 66%, #020604 100%) !important;
}

#services .services-depth-field {
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  opacity: .52 !important;
  pointer-events: none !important;
}

#services .depth-layer {
  position: absolute !important;
  inset: -10% !important;
  background:
    radial-gradient(circle at 8% 30%, rgba(157, 225, 203, .8) 0 2px, transparent 3px),
    radial-gradient(circle at 28% 70%, rgba(157, 225, 203, .62) 0 2px, transparent 3px),
    radial-gradient(circle at 78% 25%, rgba(157, 225, 203, .7) 0 2px, transparent 3px),
    linear-gradient(32deg, transparent 0 44%, rgba(93, 202, 165, .12) 45%, transparent 46% 100%),
    linear-gradient(148deg, transparent 0 54%, rgba(93, 202, 165, .1) 55%, transparent 56% 100%) !important;
  filter: blur(.1px) !important;
  animation: swsMeshDrift 22s linear infinite alternate !important;
}

#services .depth-layer-mid { animation-duration: 28s !important; transform: scale(1.1) !important; opacity: .62 !important; }
#services .depth-layer-front { animation-duration: 18s !important; transform: scale(1.22) !important; opacity: .38 !important; }

@keyframes swsMeshDrift {
  from { transform: translate3d(-1.5%, -1%, 0) scale(1.02); }
  to { transform: translate3d(1.5%, 1.2%, 0) scale(1.08); }
}

#services .infrastructure-section {
  width: min(1540px, 100%) !important;
  min-height: calc(100svh - 160px) !important;
  margin: 0 auto !important;
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
  align-content: center !important;
  gap: clamp(24px, 3vh, 38px) !important;
}

#services .infra-hero {
  width: min(860px, 100%) !important;
  margin: 0 auto !important;
  text-align: center !important;
}

.infra-pill,
.solution-badge,
.core-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  border: 1px solid rgba(29, 158, 117, .75) !important;
  border-radius: 999px !important;
  padding: 7px 18px !important;
  color: #9fe1cb !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  letter-spacing: .08em !important;
  background: rgba(1, 18, 11, .38) !important;
}

.infra-pill span,
.solution-badge span,
.core-badge span {
  color: var(--sws-brand) !important;
}

#services .infra-hero h2,
#scenarios .solution-hero h2,
#capability .capability-copy h2,
#training .stage-head h2,
#resources .resource-main h2,
#about .about-narrative h2 {
  margin: 18px 0 10px !important;
  color: var(--sws-text) !important;
  font-size: var(--sws-title) !important;
  line-height: 1.14 !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
}

#services .infra-hero p,
#scenarios .solution-subtitle,
#training .stage-head p,
#resources .resource-main p,
#about .about-narrative p {
  color: var(--sws-muted) !important;
  font-size: var(--sws-body) !important;
  line-height: 1.75 !important;
  margin: 0 auto !important;
  max-width: 760px !important;
}

#services .infra-metrics {
  display: grid !important;
  grid-template-columns: repeat(3, auto) !important;
  justify-content: center !important;
  gap: clamp(28px, 4vw, 58px) !important;
  margin-top: 24px !important;
  padding-top: 20px !important;
  border-top: 1px solid rgba(157, 225, 203, .16) !important;
}

#services .infra-metrics span {
  display: grid !important;
  gap: 2px !important;
  color: rgba(157, 225, 203, .7) !important;
  font-size: 13px !important;
}

#services .infra-metrics strong {
  color: #caffec !important;
  font-size: clamp(24px, 2vw, 34px) !important;
  font-weight: 600 !important;
}

#services .infra-showcase {
  display: grid !important;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, .92fr) !important;
  grid-template-rows: repeat(3, minmax(0, 1fr)) !important;
  gap: 18px !important;
  height: clamp(500px, 57vh, 620px) !important;
  min-height: 0 !important;
}

#services .infra-module {
  min-width: 0 !important;
  min-height: 0 !important;
  position: relative !important;
  overflow: hidden !important;
  border-radius: 12px !important;
  border: 1px solid rgba(157, 225, 203, .2) !important;
  background:
    radial-gradient(circle at 78% 50%, rgba(29, 158, 117, .24), transparent 46%),
    linear-gradient(135deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .01)),
    rgba(0, 0, 0, .46) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .08),
    0 22px 60px rgba(0, 0, 0, .36) !important;
  backdrop-filter: blur(24px) saturate(115%) !important;
  transition: transform .32s ease, border-color .32s ease, box-shadow .32s ease !important;
}

#services .infra-module:hover,
#services .infra-module:focus-visible {
  transform: translateY(-3px) !important;
  border-color: rgba(29, 158, 117, .62) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .12),
    0 28px 80px rgba(0, 0, 0, .46),
    0 0 0 1px rgba(29, 158, 117, .08) !important;
}

#services .infra-module:first-child {
  grid-column: 1 !important;
  grid-row: 1 / 4 !important;
  display: grid !important;
  grid-template-columns: minmax(0, .62fr) minmax(210px, .38fr) !important;
  align-items: stretch !important;
  padding: clamp(28px, 3.2vw, 54px) !important;
}

#services .infra-module:not(:first-child) {
  grid-column: 2 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(112px, 132px) !important;
  align-items: center !important;
  gap: 22px !important;
  padding: 24px 28px !important;
}

#services .infra-copy {
  position: relative !important;
  z-index: 2 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: flex-start !important;
  min-width: 0 !important;
}

#services .infra-module:first-child .infra-copy {
  justify-content: flex-start !important;
  padding-top: 4px !important;
}

#services .infra-copy span,
#scenarios .solution-content span {
  color: var(--sws-brand-soft) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: .08em !important;
}

#services .infra-copy h3,
#scenarios .solution-card h3,
#training .delivery-track h3,
#resources .resource-panels h3 {
  margin: 12px 0 14px !important;
  color: #e9fff6 !important;
  font-size: var(--sws-card-title) !important;
  line-height: 1.18 !important;
  font-weight: 600 !important;
}

#services .infra-copy p,
#scenarios .solution-card p,
#training .delivery-track p,
#resources .resource-panels p {
  max-width: 520px !important;
  margin: 0 !important;
  color: var(--sws-muted) !important;
  font-size: var(--sws-body) !important;
  line-height: 1.68 !important;
}

#services .infra-copy ul {
  display: grid !important;
  gap: 12px !important;
  margin: 28px 0 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

#services .infra-copy li {
  position: relative !important;
  padding-left: 26px !important;
  color: rgba(255, 255, 255, .9) !important;
  font-size: 14px !important;
  line-height: 1.45 !important;
}

#services .infra-copy li::before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  top: .58em !important;
  width: 10px !important;
  height: 10px !important;
  border-radius: 50% !important;
  border: 2px solid var(--sws-brand) !important;
  box-shadow: 0 0 16px rgba(25, 223, 154, .35) !important;
}

#services .infra-visual {
  z-index: 1 !important;
  justify-self: end !important;
  align-self: center !important;
  overflow: visible !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

#services .infra-module:first-child .infra-visual-base {
  position: relative !important;
  width: clamp(220px, 18vw, 310px) !important;
  height: clamp(220px, 18vw, 310px) !important;
  align-self: end !important;
  justify-self: end !important;
  margin: 0 -16px -18px 0 !important;
  perspective: 900px !important;
}

#services .infra-module:first-child .infra-visual-base::before {
  content: "" !important;
  position: absolute !important;
  left: 18% !important;
  right: 18% !important;
  bottom: 4% !important;
  height: 16% !important;
  border-radius: 50% !important;
  background: radial-gradient(ellipse, rgba(25, 223, 154, .34), rgba(25, 223, 154, .08) 45%, transparent 72%) !important;
  filter: blur(2px) !important;
}

#services .infra-module:first-child .infra-visual-base img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  mix-blend-mode: screen !important;
  filter: brightness(1.07) contrast(1.04) drop-shadow(0 0 34px rgba(25, 223, 154, .38)) !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

#services .infra-orb-static {
  opacity: .66 !important;
  animation: swsOrbBreath 5.6s ease-in-out infinite !important;
}

#services .infra-orb-spin {
  display: block !important;
  opacity: .46 !important;
  transform-origin: 52% 45% !important;
  clip-path: circle(37% at 52% 45%) !important;
  animation: swsOrbRotate 11s linear infinite !important;
}

@keyframes swsOrbBreath {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(0, -5px, 0) scale(1.025); }
}

@keyframes swsOrbRotate {
  from { transform: rotate(0deg) scale(1.018); filter: brightness(1.12) contrast(1.08) drop-shadow(0 0 36px rgba(25, 223, 154, .45)); }
  to { transform: rotate(360deg) scale(1.018); filter: brightness(1.02) contrast(1.02) drop-shadow(0 0 28px rgba(25, 223, 154, .32)); }
}

#services .infra-module:not(:first-child) .infra-visual,
#services .infra-module:not(:first-child) .infra-visual img {
  width: clamp(104px, 7vw, 132px) !important;
  height: clamp(104px, 7vw, 132px) !important;
  min-width: clamp(104px, 7vw, 132px) !important;
  object-fit: contain !important;
  mix-blend-mode: screen !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  filter: brightness(1.08) drop-shadow(0 0 22px rgba(25, 223, 154, .28)) !important;
}

#scenarios.ai-solutions {
  background: #050706 !important;
}

#scenarios.ai-solutions::before {
  background:
    linear-gradient(118deg, rgba(0, 0, 0, .96) 0%, rgba(0, 0, 0, .92) 32%, rgba(6, 28, 18, .92) 100%),
    radial-gradient(circle at 76% 18%, rgba(29, 158, 117, .13), transparent 38%) !important;
}

#scenarios.ai-solutions::after {
  opacity: .35 !important;
}

#scenarios.ai-solutions {
  display: grid !important;
  grid-template-columns: minmax(300px, .34fr) minmax(0, .66fr) !important;
  align-items: center !important;
  gap: clamp(28px, 4vw, 72px) !important;
}

#scenarios .solution-glow { display: none !important; }

#scenarios .solution-hero {
  width: auto !important;
  max-width: 520px !important;
  margin: 0 !important;
  text-align: left !important;
  align-self: center !important;
}

#scenarios .solution-badge {
  margin: 0 0 22px !important;
}

#scenarios .solution-hero h2 {
  margin: 0 0 18px !important;
  font-size: clamp(38px, 3.35vw, 58px) !important;
  line-height: 1.12 !important;
}

#scenarios .solution-subtitle {
  margin: 0 !important;
  max-width: 420px !important;
}

#scenarios .solution-stats {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
  margin-top: 28px !important;
}

#scenarios .solution-stats span {
  display: inline-flex !important;
  align-items: baseline !important;
  gap: 8px !important;
  min-width: auto !important;
  padding: 9px 15px !important;
  border: 1px solid rgba(157, 225, 203, .2) !important;
  border-radius: 999px !important;
  background: rgba(29, 158, 117, .055) !important;
  color: var(--sws-muted) !important;
  font-size: 13px !important;
}

#scenarios .solution-stats strong {
  color: #e9fff6 !important;
  font-size: 19px !important;
}

#scenarios .solution-divider {
  display: block !important;
  width: 100% !important;
  height: 1px !important;
  margin-top: 34px !important;
  background: linear-gradient(90deg, rgba(29, 158, 117, .72), transparent) !important;
}

#scenarios .solution-board {
  width: 100% !important;
  display: grid !important;
  grid-template-columns: 1.24fr 1fr 1fr !important;
  grid-template-rows: repeat(3, minmax(132px, 1fr)) !important;
  gap: 14px !important;
  min-height: 560px !important;
  max-height: 620px !important;
}

#scenarios .solution-card {
  position: relative !important;
  overflow: hidden !important;
  min-height: 0 !important;
  border-radius: 12px !important;
  border: 1px solid rgba(29, 158, 117, .28) !important;
  background:
    radial-gradient(circle at 88% 20%, rgba(29, 158, 117, .14), transparent 35%),
    linear-gradient(145deg, rgba(13, 42, 28, .84), rgba(3, 14, 9, .82)) !important;
  padding: clamp(20px, 2vw, 34px) !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) clamp(54px, 5vw, 96px) !important;
  align-items: end !important;
  gap: 14px !important;
  transition: transform .28s ease, border-color .28s ease, background .28s ease !important;
}

#scenarios .solution-card::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  opacity: .4 !important;
  pointer-events: none !important;
}

#scenarios .solution-card:hover {
  transform: translateY(-4px) !important;
  border-color: rgba(29, 158, 117, .7) !important;
}

#scenarios .solution-card:first-child {
  grid-column: 1 !important;
  grid-row: 1 / 4 !important;
  grid-template-columns: minmax(0, 1fr) clamp(110px, 10vw, 160px) !important;
  align-items: center !important;
  background:
    radial-gradient(circle at 76% 45%, rgba(29, 158, 117, .2), transparent 38%),
    linear-gradient(145deg, rgba(13, 42, 28, .78), rgba(1, 8, 5, .88)) !important;
}

#scenarios .solution-card:nth-child(6) {
  grid-column: 2 / 4 !important;
}

#scenarios .solution-visual {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  align-self: center !important;
  justify-self: end !important;
  width: clamp(54px, 5vw, 96px) !important;
  height: clamp(54px, 5vw, 96px) !important;
}

#scenarios .solution-card:first-child .solution-visual {
  width: clamp(110px, 10vw, 160px) !important;
  height: clamp(110px, 10vw, 160px) !important;
}

#scenarios .solution-icon {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  fill: none !important;
  stroke: var(--sws-brand) !important;
  stroke-width: 2.8 !important;
  filter: drop-shadow(0 0 16px rgba(25, 223, 154, .32)) !important;
  opacity: .98 !important;
}

#scenarios .solution-content {
  position: relative !important;
  z-index: 1 !important;
  align-self: end !important;
}

#scenarios .solution-card h3 {
  margin-top: 14px !important;
  font-size: clamp(21px, 1.45vw, 27px) !important;
}

#scenarios .solution-card p {
  max-width: 360px !important;
  font-size: 14px !important;
}

#capability.core-tech-section {
  background: var(--sws-blue-deep) !important;
}

#capability.core-tech-section::before {
  background:
    radial-gradient(circle at 70% 48%, rgba(29, 158, 117, .13), transparent 32%),
    radial-gradient(circle at 24% 12%, rgba(33, 92, 140, .16), transparent 34%),
    linear-gradient(180deg, #04111e 0%, #061421 55%, #020607 100%) !important;
}

#capability.core-tech-section::after {
  background-image:
    linear-gradient(rgba(80, 146, 184, .03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(80, 146, 184, .03) 1px, transparent 1px) !important;
  background-size: 88px 88px !important;
}

#capability .capability-stage {
  width: min(1580px, 100%) !important;
  min-height: calc(100svh - 160px) !important;
  margin: 0 auto !important;
  display: grid !important;
  grid-template-columns: minmax(420px, .43fr) minmax(0, .57fr) !important;
  align-items: center !important;
  gap: clamp(40px, 5vw, 86px) !important;
}

#capability .capability-copy {
  max-width: 720px !important;
}

#capability .capability-copy h2 {
  max-width: 780px !important;
  font-size: clamp(38px, 3.35vw, 58px) !important;
  line-height: 1.16 !important;
  word-break: keep-all !important;
  overflow-wrap: normal !important;
  text-wrap: balance !important;
}

#capability .capability-copy h2 br {
  display: none !important;
}

#capability .capability-copy p {
  max-width: 640px !important;
  font-size: var(--sws-body) !important;
  line-height: 1.85 !important;
  color: var(--sws-muted) !important;
}

#capability .core-cta {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-top: 30px !important;
  min-width: 168px !important;
  height: 44px !important;
  border: 1px solid rgba(29, 158, 117, .86) !important;
  border-radius: 8px !important;
  color: var(--sws-brand) !important;
  background: rgba(29, 158, 117, .04) !important;
  font-size: 14px !important;
  text-decoration: none !important;
}

#capability .tech-console.core-card-grid {
  width: 100% !important;
  min-height: 520px !important;
  padding: 18px !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 16px !important;
  border-radius: 18px !important;
  background: rgba(4, 24, 36, .5) !important;
  border: 1px solid rgba(82, 159, 189, .12) !important;
  box-shadow: 0 34px 90px rgba(0, 0, 0, .36) !important;
}

#capability .core-tech-card {
  min-height: 238px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  padding: 28px !important;
  border-radius: 12px !important;
  border: 1px solid rgba(29, 158, 117, .24) !important;
  background:
    radial-gradient(circle at 18% 10%, rgba(25, 223, 154, .16), transparent 36%),
    rgba(1, 28, 16, .76) !important;
  overflow: hidden !important;
}

#capability .tech-icon {
  width: 48px !important;
  height: 48px !important;
  margin: 0 0 22px !important;
  stroke: var(--sws-brand) !important;
  stroke-width: 1.8 !important;
  filter: drop-shadow(0 0 18px rgba(25, 223, 154, .28)) !important;
}

#capability .core-tech-card span {
  color: rgba(93, 202, 165, .65) !important;
  font-size: 12px !important;
  letter-spacing: .14em !important;
}

#capability .core-tech-card h3 {
  margin: 12px 0 10px !important;
  color: #f0fff8 !important;
  font-size: clamp(21px, 1.45vw, 28px) !important;
  line-height: 1.18 !important;
}

#capability .core-tech-card p {
  margin: 0 0 14px !important;
  color: var(--sws-brand-soft) !important;
  font-size: 14px !important;
  line-height: 1.55 !important;
}

#capability .core-tech-card em {
  display: block !important;
  margin-top: auto !important;
  padding-top: 14px !important;
  border-top: 1px solid rgba(29, 158, 117, .18) !important;
  color: rgba(139, 191, 170, .62) !important;
  font-style: normal !important;
  font-size: 12px !important;
  line-height: 1.65 !important;
  opacity: 1 !important;
}

#training.ai-delivery {
  background: var(--sws-neutral) !important;
}

#training.ai-delivery::before {
  background:
    radial-gradient(circle at 17% 50%, rgba(29, 158, 117, .11), transparent 34%),
    linear-gradient(180deg, #0b0c0c 0%, #050606 100%) !important;
}

#training .delivery-stage {
  width: min(1500px, 100%) !important;
  min-height: calc(100svh - 160px) !important;
  margin: 0 auto !important;
  display: grid !important;
  grid-template-columns: minmax(360px, .38fr) minmax(0, .62fr) !important;
  gap: clamp(42px, 6vw, 110px) !important;
  align-items: center !important;
}

.section-mark {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  color: var(--sws-brand) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  letter-spacing: .18em !important;
}

.section-mark::before {
  content: "" !important;
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
  background: var(--sws-brand) !important;
  box-shadow: 0 0 18px rgba(25, 223, 154, .55) !important;
}

#training .stage-head {
  text-align: left !important;
  max-width: 520px !important;
  margin: 0 !important;
}

#training .stage-head h2 {
  margin-top: 22px !important;
  font-size: var(--sws-title-tight) !important;
}

#training .stage-head p {
  margin: 0 !important;
}

#training .delivery-track {
  position: relative !important;
  display: grid !important;
  gap: 16px !important;
  padding-left: 44px !important;
}

#training .delivery-track::before {
  content: "" !important;
  position: absolute !important;
  left: 13px !important;
  top: 32px !important;
  bottom: 32px !important;
  width: 1px !important;
  background: linear-gradient(180deg, transparent, var(--sws-brand), transparent) !important;
}

#training .delivery-track article {
  position: relative !important;
  min-height: 124px !important;
  display: grid !important;
  grid-template-columns: 56px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 18px !important;
  padding: 20px 24px !important;
  border-radius: 12px !important;
  border: 1px solid rgba(255, 255, 255, .1) !important;
  background:
    radial-gradient(circle at 100% 0%, rgba(29, 158, 117, .12), transparent 34%),
    rgba(255, 255, 255, .025) !important;
}

#training .delivery-track article::before {
  content: "" !important;
  position: absolute !important;
  left: -38px !important;
  top: 50% !important;
  width: 12px !important;
  height: 12px !important;
  border-radius: 50% !important;
  transform: translateY(-50%) !important;
  background: var(--sws-brand) !important;
  box-shadow: 0 0 24px rgba(25, 223, 154, .72) !important;
}

#training .delivery-icon {
  grid-row: 1 / 4 !important;
  display: block !important;
  width: 46px !important;
  height: 46px !important;
  stroke: var(--sws-brand) !important;
  stroke-width: 1.7 !important;
  fill: none !important;
  filter: drop-shadow(0 0 14px rgba(25, 223, 154, .28)) !important;
}

#training .delivery-track span {
  color: var(--sws-brand-soft) !important;
  font-size: 12px !important;
  letter-spacing: .14em !important;
}

#training .delivery-track h3,
#training .delivery-track p {
  grid-column: 2 !important;
}

#resources.ai-resources {
  background: #04111e !important;
}

#resources.ai-resources::before {
  background:
    radial-gradient(circle at 70% 22%, rgba(42, 115, 155, .16), transparent 36%),
    linear-gradient(180deg, #04111e 0%, #061421 100%) !important;
}

#resources .resource-stage {
  width: min(1500px, 100%) !important;
  min-height: calc(100svh - 160px) !important;
  margin: 0 auto !important;
  display: grid !important;
  grid-template-columns: minmax(360px, .42fr) minmax(0, .58fr) !important;
  align-items: center !important;
  gap: clamp(42px, 6vw, 110px) !important;
}

#resources .resource-main h2 {
  font-size: var(--sws-title-tight) !important;
}

#resources .resource-tabs {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 12px !important;
  margin-top: 34px !important;
  width: min(360px, 100%) !important;
}

#resources .resource-tabs button {
  justify-content: space-between !important;
  height: 54px !important;
  padding: 0 18px !important;
  border-radius: 10px !important;
  border: 1px solid rgba(157, 225, 203, .16) !important;
  background: rgba(255, 255, 255, .025) !important;
  color: rgba(255, 255, 255, .78) !important;
  font-size: 15px !important;
}

#resources .resource-tabs button.is-active {
  color: var(--sws-brand) !important;
  border-color: rgba(29, 158, 117, .6) !important;
  background: rgba(29, 158, 117, .08) !important;
}

#resources .resource-panels {
  display: grid !important;
  gap: 16px !important;
}

#resources .resource-panels article {
  display: grid !important;
  grid-template-columns: 64px minmax(0, 1fr) !important;
  column-gap: 18px !important;
  align-items: center !important;
  min-height: 146px !important;
  padding: 24px 28px !important;
  border-radius: 12px !important;
  border: 1px solid rgba(157, 225, 203, .15) !important;
  background:
    radial-gradient(circle at 95% 20%, rgba(29, 158, 117, .12), transparent 36%),
    rgba(1, 17, 10, .7) !important;
}

#resources .resource-icon {
  grid-row: 1 / 4 !important;
  width: 52px !important;
  height: 52px !important;
  stroke: var(--sws-brand) !important;
  stroke-width: 1.8 !important;
  fill: none !important;
  filter: drop-shadow(0 0 16px rgba(25, 223, 154, .24)) !important;
}

#resources .resource-panels span,
#resources .resource-panels h3,
#resources .resource-panels p {
  grid-column: 2 !important;
}

#about.ai-about {
  background: #04120c !important;
}

#about.ai-about::before {
  background:
    radial-gradient(circle at 75% 50%, rgba(29, 158, 117, .12), transparent 38%),
    linear-gradient(180deg, #04120c 0%, #020604 100%) !important;
}

#about .about-stage {
  width: min(1540px, 100%) !important;
  min-height: calc(100svh - 160px) !important;
  margin: 0 auto !important;
  display: grid !important;
  grid-template-columns: minmax(360px, .43fr) minmax(0, .57fr) !important;
  gap: clamp(42px, 6vw, 110px) !important;
  align-items: center !important;
}

#about .about-narrative {
  text-align: left !important;
  max-width: 620px !important;
}

#about .about-narrative h2 {
  font-size: var(--sws-title-tight) !important;
}

#about .about-cinema {
  width: 100% !important;
  aspect-ratio: 16 / 9 !important;
  min-height: 340px !important;
  border-radius: 14px !important;
  border: 1px solid rgba(157, 225, 203, .18) !important;
  background:
    radial-gradient(circle at 54% 46%, rgba(29, 158, 117, .12), transparent 18%),
    linear-gradient(135deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, .006)),
    #050908 !important;
  box-shadow: 0 30px 90px rgba(0, 0, 0, .42) !important;
  cursor: pointer !important;
}

#about .about-cinema-mark {
  display: block !important;
  opacity: .8 !important;
}

.site-footer.dji-footer {
  background: #242424 !important;
  color: rgba(255, 255, 255, .78) !important;
  padding: 58px var(--sws-page-x) 34px !important;
  border-top: 1px solid rgba(255, 255, 255, .08) !important;
}

.site-footer .container {
  width: min(1560px, 100%) !important;
  margin-inline: auto !important;
}

.footer-download {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 20px !important;
  padding-bottom: 42px !important;
  border-bottom: 1px solid rgba(255, 255, 255, .14) !important;
  margin-bottom: 42px !important;
}

.footer-download p {
  color: rgba(255, 255, 255, .86) !important;
  font-size: 17px !important;
}

.footer-download a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 108px !important;
  height: 40px !important;
  border-radius: 20px !important;
  background: rgba(255, 255, 255, .13) !important;
  color: #fff !important;
  text-decoration: none !important;
  font-size: 14px !important;
}

.footer-mega {
  display: grid !important;
  grid-template-columns: 1.05fr 1.05fr 1.05fr 1.05fr 1.25fr !important;
  gap: clamp(36px, 5vw, 92px) !important;
  padding-bottom: 56px !important;
}

.footer-column {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 14px !important;
}

.footer-column h3 {
  margin: 0 0 4px !important;
  color: #fff !important;
  font-size: 15px !important;
  font-weight: 600 !important;
}

.footer-column h3:not(:first-child) {
  margin-top: 22px !important;
}

.footer-column a,
.footer-column span {
  color: rgba(255, 255, 255, .72) !important;
  text-decoration: none !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
}

.footer-column a:hover,
.footer-brandbar a:hover {
  color: #fff !important;
}

.footer-mailbox {
  display: grid !important;
  grid-template-columns: 1fr 42px !important;
  align-items: center !important;
  width: 100% !important;
  max-width: 280px !important;
  height: 42px !important;
  border: 1px solid rgba(255, 255, 255, .34) !important;
  border-radius: 3px !important;
  overflow: hidden !important;
}

.footer-mailbox span {
  padding-left: 12px !important;
  color: rgba(255, 255, 255, .55) !important;
}

.footer-mailbox button {
  height: 100% !important;
  border: 0 !important;
  background: rgba(255, 255, 255, .28) !important;
  color: #fff !important;
}

.footer-brandbar {
  display: grid !important;
  grid-template-columns: auto 1fr auto !important;
  align-items: center !important;
  gap: 34px !important;
  padding: 20px 0 !important;
  border-top: 1px solid rgba(255, 255, 255, .12) !important;
  border-bottom: 1px solid rgba(255, 255, 255, .12) !important;
}

.footer-brandbar img {
  height: 34px !important;
  width: auto !important;
  filter: brightness(0) invert(1) !important;
}

.footer-brandbar nav,
.footer-social {
  display: flex !important;
  align-items: center !important;
  gap: 24px !important;
  flex-wrap: wrap !important;
}

.footer-brandbar a {
  color: rgba(255, 255, 255, .78) !important;
  text-decoration: none !important;
  font-size: 14px !important;
}

.footer-social a {
  width: 34px !important;
  height: 34px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, .12) !important;
  color: #fff !important;
  font-size: 12px !important;
}

.footer-legal {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 24px !important;
  align-items: center !important;
  padding-top: 24px !important;
}

.footer-records {
  display: flex !important;
  align-items: center !important;
  gap: 0 !important;
  flex-wrap: wrap !important;
  color: rgba(255, 255, 255, .58) !important;
}

.footer-records a,
.footer-records span {
  display: inline-flex !important;
  align-items: center !important;
  color: rgba(255, 255, 255, .58) !important;
  text-decoration: none !important;
  font-size: 13px !important;
  line-height: 1.8 !important;
  white-space: nowrap !important;
}

.footer-records a:not(:last-child)::after,
.footer-records span:not(:last-child)::after {
  content: "|" !important;
  display: inline-block !important;
  margin: 0 18px !important;
  color: rgba(255, 255, 255, .28) !important;
}

.footer-records .footer-copyright::before,
.footer-records .footer-tagline::before {
  content: none !important;
}

.footer-locale {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  color: rgba(255, 255, 255, .82) !important;
  font-size: 14px !important;
}

@media (max-width: 1320px) and (min-width: 1024px) {
  :root {
    --sws-page-x: 44px;
    --sws-title: clamp(34px, 3vw, 46px);
    --sws-title-tight: clamp(32px, 2.7vw, 42px);
  }

  #services .infra-showcase {
    height: 540px !important;
  }

  #services .infra-module:first-child {
    grid-template-columns: minmax(0, .64fr) 220px !important;
    padding: 30px !important;
  }

  #services .infra-module:first-child .infra-visual-base {
    width: 220px !important;
    height: 220px !important;
  }

  #services .infra-module:not(:first-child) {
    grid-template-columns: minmax(0, 1fr) 104px !important;
  }

  #scenarios.ai-solutions {
    grid-template-columns: minmax(290px, .32fr) minmax(0, .68fr) !important;
    gap: 34px !important;
  }
}

@media (max-width: 1023px) {
  :root {
    --sws-page-x: 22px;
    --sws-title: clamp(30px, 8vw, 40px);
    --sws-title-tight: clamp(29px, 7.4vw, 38px);
    --sws-card-title: clamp(22px, 6vw, 28px);
  }

  .site-header {
    height: auto !important;
    min-height: 68px !important;
    padding: 0 20px !important;
  }

  .site-nav {
    gap: 18px !important;
  }

  .nav-link,
  .console-link,
  .lang-switch {
    font-size: 14px !important;
  }

  .hero .hero-content h1,
  .hero-slide h2 {
    font-size: clamp(42px, 13vw, 62px) !important;
  }

  .ai-home > .ai-section {
    min-height: auto !important;
    padding: 58px var(--sws-page-x) !important;
  }

  #services .infrastructure-section,
  #capability .capability-stage,
  #training .delivery-stage,
  #resources .resource-stage,
  #about .about-stage {
    min-height: auto !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }

  #services .infra-metrics {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 10px !important;
  }

  #services .infra-showcase,
  #scenarios .solution-board {
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: none !important;
  }

  #services .infra-module,
  #services .infra-module:first-child,
  #services .infra-module:not(:first-child) {
    grid-column: auto !important;
    grid-row: auto !important;
    min-height: 184px !important;
    padding: 24px !important;
    grid-template-columns: minmax(0, 1fr) 96px !important;
  }

  #services .infra-module:first-child {
    min-height: 430px !important;
    grid-template-columns: 1fr !important;
  }

  #services .infra-module:first-child .infra-visual-base {
    width: 220px !important;
    height: 220px !important;
    margin: 12px auto -10px !important;
    justify-self: center !important;
  }

  #services .infra-module:not(:first-child) .infra-visual,
  #services .infra-module:not(:first-child) .infra-visual img {
    width: 88px !important;
    height: 88px !important;
    min-width: 88px !important;
  }

  #scenarios.ai-solutions {
    display: block !important;
  }

  #scenarios .solution-hero {
    max-width: none !important;
    margin-bottom: 28px !important;
  }

  #scenarios .solution-card,
  #scenarios .solution-card:first-child,
  #scenarios .solution-card:nth-child(6) {
    grid-column: auto !important;
    grid-row: auto !important;
    min-height: 172px !important;
    grid-template-columns: minmax(0, 1fr) 70px !important;
  }

  #scenarios .solution-visual,
  #scenarios .solution-card:first-child .solution-visual {
    width: 64px !important;
    height: 64px !important;
  }

  #capability .tech-console.core-card-grid {
    min-height: auto !important;
    grid-template-columns: 1fr !important;
  }

  #capability .core-tech-card {
    min-height: 210px !important;
  }

  #training .delivery-track {
    padding-left: 28px !important;
  }

  #resources .resource-panels article {
    grid-template-columns: 50px minmax(0, 1fr) !important;
  }

  #about .about-cinema {
    min-height: 240px !important;
  }

  .footer-download,
  .footer-brandbar,
  .footer-legal {
    grid-template-columns: 1fr !important;
    display: grid !important;
    justify-items: start !important;
  }

  .footer-mega {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 32px !important;
  }
}

@media (max-width: 640px) {
  .hero .hero-stage {
    width: calc(100% - 44px) !important;
  }

  #services .infra-metrics {
    grid-template-columns: 1fr !important;
  }

  #services .infra-module,
  #services .infra-module:not(:first-child),
  #scenarios .solution-card,
  #scenarios .solution-card:first-child,
  #resources .resource-panels article {
    grid-template-columns: 1fr !important;
  }

  #services .infra-module:not(:first-child) .infra-visual,
  #scenarios .solution-visual {
    justify-self: start !important;
  }

  .footer-mega {
    grid-template-columns: 1fr !important;
  }

  .footer-records a,
  .footer-records span {
    white-space: normal !important;
  }
}

/* 2026-05-30 rhythm13: full-homepage rhythm pass, keep this block last */
:root {
  --sws-page-x: clamp(32px, 5.2vw, 112px);
  --sws-section-title: clamp(38px, 3vw, 56px);
  --sws-title-line: 1.14;
  --sws-card-title-final: clamp(22px, 1.55vw, 30px);
  --sws-body-final: clamp(14px, .92vw, 16px);
  --sws-header-h: 72px;
}

html,
body {
  background: #020403 !important;
  overflow-x: hidden !important;
}

body::before {
  background:
    radial-gradient(circle at 88% 6%, rgba(29, 158, 117, .1), transparent 25%),
    radial-gradient(circle at 8% 68%, rgba(16, 45, 72, .16), transparent 32%),
    linear-gradient(180deg, #020403 0%, #040807 100%) !important;
}

.site-header {
  height: var(--sws-header-h) !important;
  background: rgba(0, 0, 0, .74) !important;
  border-bottom: 1px solid rgba(255, 255, 255, .07) !important;
  box-shadow: 0 18px 60px rgba(0, 0, 0, .22) !important;
}

.nav-link,
.console-link,
.lang-switch {
  font-size: 14px !important;
  font-weight: 400 !important;
  color: rgba(255, 255, 255, .72) !important;
}

.hero .about-cinema-mark,
.hero .about-cinema-mark *,
.hero-intelligence-core,
.hero-metrics,
.hero .hero-metrics,
.agent-slide .hero-content::before,
.agent-slide .hero-content::after,
.agent-slide .hero-stage::before,
.agent-slide .hero-stage::after {
  display: none !important;
  content: none !important;
}

.hero .hero-content h1,
.hero-slide h2 {
  font-size: clamp(50px, 5vw, 86px) !important;
  line-height: 1.08 !important;
  font-weight: 600 !important;
}

.hero .hero-copy,
.cert-content p,
.workflow-content p {
  font-size: clamp(17px, 1.15vw, 22px) !important;
}

.hero .button {
  height: 42px !important;
  min-width: 128px !important;
  border-radius: 6px !important;
}

.hero-arrows .hero-arrow {
  width: 34px !important;
  height: 58px !important;
}

.hero-arrows .hero-arrow::before {
  width: 15px !important;
  height: 15px !important;
  border-width: 0 0 2px 2px !important;
}

.hero-arrow-prev { left: -18px !important; }
.hero-arrow-next { right: -18px !important; }

.ai-home > .ai-section {
  padding: clamp(62px, 7vh, 86px) var(--sws-page-x) !important;
  min-height: calc(100svh - var(--sws-header-h)) !important;
  border-top: 1px solid rgba(157, 225, 203, .075) !important;
}

.infra-hero h2,
.solution-hero h2,
#capability .capability-copy h2,
#training .stage-head h2,
#resources .resource-main h2,
#about .about-narrative h2 {
  font-size: var(--sws-section-title) !important;
  line-height: var(--sws-title-line) !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
}

#services.ai-origin {
  background:
    radial-gradient(circle at 50% 9%, rgba(29, 158, 117, .12), transparent 28%),
    radial-gradient(circle at 82% 55%, rgba(29, 158, 117, .14), transparent 33%),
    #020806 !important;
}

#services.ai-origin::before {
  opacity: 1 !important;
  background:
    linear-gradient(120deg, transparent 0 24%, rgba(29, 158, 117, .045) 25%, transparent 26% 74%, rgba(29, 158, 117, .04) 75%, transparent 76%),
    radial-gradient(circle at 14% 30%, rgba(157, 225, 203, .16), transparent 20%),
    linear-gradient(180deg, rgba(0, 0, 0, .98), rgba(3, 19, 12, .96)) !important;
}

#services .infrastructure-section {
  min-height: calc(100svh - 132px) !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
  gap: clamp(22px, 2.7vh, 34px) !important;
}

#services .infra-hero {
  max-width: 840px !important;
}

#services .infra-hero h2 {
  white-space: nowrap !important;
  margin-top: 14px !important;
  margin-bottom: 8px !important;
}

#services .infra-hero p {
  max-width: 760px !important;
  color: #5dcaa5 !important;
  font-weight: 500 !important;
}

#services .infra-metrics {
  margin-top: 14px !important;
  padding-top: 12px !important;
  gap: clamp(26px, 4vw, 64px) !important;
}

#services .infra-metrics strong {
  font-size: clamp(22px, 1.8vw, 30px) !important;
}

#services .infra-showcase {
  height: clamp(480px, 57vh, 600px) !important;
  gap: 20px !important;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr) !important;
}

#services .infra-module {
  border-radius: 14px !important;
  background:
    radial-gradient(circle at 82% 56%, rgba(25, 223, 154, .22), transparent 42%),
    linear-gradient(135deg, rgba(255, 255, 255, .052), rgba(255, 255, 255, .012)),
    rgba(4, 14, 10, .76) !important;
}

#services .infra-module:first-child {
  padding: clamp(30px, 3vw, 48px) !important;
  grid-template-columns: minmax(0, .62fr) minmax(220px, .38fr) !important;
}

#services .infra-module:not(:first-child) {
  padding: 28px 30px !important;
  grid-template-columns: minmax(0, 1fr) minmax(128px, 156px) !important;
  gap: 24px !important;
}

#services .infra-copy {
  justify-content: center !important;
}

#services .infra-module:first-child .infra-copy {
  justify-content: flex-start !important;
  padding-top: 0 !important;
}

#services .infra-copy h3 {
  font-size: clamp(30px, 2.35vw, 44px) !important;
  color: #fff !important;
}

#services .infra-module:not(:first-child) .infra-copy h3 {
  font-size: clamp(26px, 1.9vw, 36px) !important;
  color: #d4f5e9 !important;
}

#services .infra-copy p {
  color: #8bbfaa !important;
  font-size: var(--sws-body-final) !important;
}

#services .infra-module:first-child .infra-visual-base {
  width: clamp(230px, 18vw, 292px) !important;
  height: clamp(230px, 18vw, 292px) !important;
  margin: 0 -10px -14px 0 !important;
  align-self: end !important;
  justify-self: end !important;
}

#services .infra-module:first-child .infra-visual-base::before {
  left: 20% !important;
  right: 20% !important;
  bottom: 1% !important;
  height: 13% !important;
  opacity: .75 !important;
}

#services .infra-module:first-child .infra-visual-base::after {
  content: "" !important;
  position: absolute !important;
  width: 58% !important;
  height: 58% !important;
  right: 10% !important;
  bottom: 18% !important;
  border-radius: 50% !important;
  background:
    conic-gradient(from 0deg, transparent 0 12%, rgba(255, 255, 255, .34) 16%, transparent 24% 42%, rgba(25, 223, 154, .34) 47%, transparent 55% 100%),
    radial-gradient(circle at 70% 24%, rgba(255, 255, 255, .36), transparent 12%),
    radial-gradient(circle at 28% 78%, rgba(25, 223, 154, .2), transparent 18%) !important;
  mix-blend-mode: screen !important;
  filter: blur(.15px) drop-shadow(0 0 18px rgba(25, 223, 154, .42)) !important;
  animation: swsGlobeOnlySpin 13s linear infinite !important;
  pointer-events: none !important;
}

#services .infra-orb-static {
  opacity: .72 !important;
  animation: swsOrbBreath 6.6s ease-in-out infinite !important;
}

#services .infra-orb-spin {
  display: none !important;
}

@keyframes swsGlobeOnlySpin {
  from { transform: rotate(0deg); opacity: .34; }
  50% { opacity: .52; }
  to { transform: rotate(360deg); opacity: .34; }
}

#services .infra-module:not(:first-child) .infra-visual,
#services .infra-module:not(:first-child) .infra-visual img {
  width: clamp(124px, 7.8vw, 154px) !important;
  height: clamp(124px, 7.8vw, 154px) !important;
  min-width: clamp(124px, 7.8vw, 154px) !important;
  mix-blend-mode: screen !important;
  opacity: .92 !important;
}

#scenarios.ai-solutions {
  min-height: calc(100svh - var(--sws-header-h)) !important;
  padding-top: clamp(58px, 7vh, 78px) !important;
  padding-bottom: clamp(58px, 7vh, 78px) !important;
  display: grid !important;
  grid-template-columns: minmax(290px, .31fr) minmax(0, .69fr) !important;
  gap: clamp(34px, 4.4vw, 72px) !important;
  align-items: center !important;
  background:
    radial-gradient(circle at 85% 18%, rgba(29, 158, 117, .1), transparent 30%),
    linear-gradient(110deg, #040605 0%, #080a09 44%, #04100b 100%) !important;
}

#scenarios.ai-solutions::before {
  background:
    linear-gradient(123deg, rgba(255, 255, 255, .025), transparent 36%),
    linear-gradient(90deg, rgba(255, 255, 255, .018) 1px, transparent 1px),
    linear-gradient(rgba(255, 255, 255, .018) 1px, transparent 1px) !important;
  background-size: auto, 74px 74px, 74px 74px !important;
  opacity: .9 !important;
}

#scenarios .solution-hero {
  max-width: 470px !important;
}

#scenarios .solution-badge {
  margin-bottom: 20px !important;
}

#scenarios .solution-hero h2 {
  font-size: var(--sws-section-title) !important;
  line-height: 1.13 !important;
  margin-bottom: 18px !important;
}

#scenarios .solution-subtitle {
  max-width: 440px !important;
}

#scenarios .solution-stats {
  gap: 10px !important;
  margin-top: 22px !important;
}

#scenarios .solution-divider {
  margin-top: 24px !important;
}

#scenarios .solution-board {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  grid-template-rows: repeat(2, minmax(0, 1fr)) !important;
  gap: 16px !important;
  min-height: 0 !important;
  height: clamp(500px, 58vh, 600px) !important;
  max-height: none !important;
}

#scenarios .solution-card,
#scenarios .solution-card:first-child,
#scenarios .solution-card:nth-child(6) {
  grid-column: auto !important;
  grid-row: auto !important;
  min-height: 0 !important;
  padding: 24px !important;
  grid-template-columns: 1fr !important;
  grid-template-rows: 82px 1fr !important;
  align-items: stretch !important;
  background:
    radial-gradient(circle at 86% 16%, rgba(25, 223, 154, .13), transparent 34%),
    linear-gradient(145deg, rgba(8, 41, 26, .72), rgba(1, 9, 6, .84)) !important;
}

#scenarios .solution-card:first-child {
  border-color: rgba(29, 158, 117, .56) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 20px 54px rgba(0, 0, 0, .28) !important;
}

#scenarios .solution-visual,
#scenarios .solution-card:first-child .solution-visual {
  width: 76px !important;
  height: 76px !important;
  justify-self: end !important;
  align-self: start !important;
}

#scenarios .solution-icon,
#scenarios .solution-card:first-child .solution-icon {
  width: 76px !important;
  height: 76px !important;
  stroke: #19df9a !important;
  stroke-width: 3 !important;
  fill: none !important;
  filter: drop-shadow(0 0 18px rgba(25, 223, 154, .28)) !important;
}

#scenarios .solution-content {
  align-self: end !important;
  min-width: 0 !important;
}

#scenarios .solution-content h3 {
  font-size: clamp(21px, 1.45vw, 28px) !important;
  white-space: normal !important;
}

#scenarios .solution-content p {
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

#capability.core-tech-section {
  background:
    radial-gradient(circle at 74% 45%, rgba(25, 223, 154, .1), transparent 26%),
    linear-gradient(180deg, #04111e 0%, #020b14 100%) !important;
}

#capability.core-tech-section::before {
  background:
    radial-gradient(circle at 22% 24%, rgba(71, 149, 190, .15), transparent 34%),
    linear-gradient(90deg, transparent, rgba(67, 132, 181, .06), transparent) !important;
}

#capability .capability-stage {
  min-height: calc(100svh - 132px) !important;
  grid-template-columns: minmax(440px, .43fr) minmax(0, .57fr) !important;
  gap: clamp(44px, 5.2vw, 90px) !important;
}

#capability .capability-copy h2 {
  max-width: 780px !important;
  font-size: var(--sws-section-title) !important;
  line-height: 1.18 !important;
  word-break: keep-all !important;
  overflow-wrap: normal !important;
  text-wrap: balance !important;
}

#capability .capability-copy h2 br {
  display: block !important;
}

#capability .tech-console.core-card-grid {
  min-height: 540px !important;
  gap: 18px !important;
  border-radius: 18px !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(71, 149, 190, .13), transparent 42%),
    rgba(3, 18, 29, .62) !important;
}

#capability .core-tech-card {
  min-height: 0 !important;
  padding: 28px 30px !important;
}

#capability .tech-icon {
  width: 68px !important;
  height: 68px !important;
  margin-bottom: 22px !important;
  stroke-width: 1.5 !important;
  filter: drop-shadow(0 0 24px rgba(25, 223, 154, .34)) !important;
}

#capability .core-tech-card h3 {
  font-size: clamp(22px, 1.45vw, 28px) !important;
}

#capability .core-tech-card em {
  font-size: 12px !important;
  line-height: 1.55 !important;
  max-height: none !important;
}

#training.ai-delivery {
  background:
    radial-gradient(circle at 18% 50%, rgba(29, 158, 117, .1), transparent 28%),
    #0b0c0c !important;
}

#training .delivery-stage {
  min-height: calc(100svh - 132px) !important;
}

#training .delivery-icon {
  width: 58px !important;
  height: 58px !important;
}

#training .delivery-track article {
  min-height: 138px !important;
  grid-template-columns: 72px minmax(0, 1fr) !important;
  padding: 24px 28px !important;
}

#resources.ai-resources {
  background:
    radial-gradient(circle at 78% 30%, rgba(66, 132, 186, .16), transparent 34%),
    linear-gradient(180deg, #03111f 0%, #06101a 100%) !important;
}

#resources .resource-stage {
  min-height: calc(100svh - 132px) !important;
}

#resources .resource-panels article {
  min-height: 166px !important;
  background:
    radial-gradient(circle at 90% 14%, rgba(74, 163, 203, .12), transparent 34%),
    rgba(2, 19, 18, .74) !important;
}

#resources .resource-icon {
  width: 68px !important;
  height: 68px !important;
  stroke-width: 1.55 !important;
}

#about.ai-about {
  background:
    radial-gradient(circle at 78% 54%, rgba(29, 158, 117, .12), transparent 36%),
    linear-gradient(180deg, #04120c 0%, #020604 100%) !important;
}

#about .about-stage {
  min-height: calc(100svh - 132px) !important;
  grid-template-columns: 1fr !important;
  grid-template-rows: auto 1fr !important;
  gap: 34px !important;
  align-content: center !important;
}

#about .about-narrative {
  max-width: 980px !important;
  margin: 0 auto !important;
  text-align: center !important;
}

#about .about-cinema {
  width: min(1120px, 100%) !important;
  min-height: 360px !important;
  margin: 0 auto !important;
}

.site-footer.dji-footer {
  background: #242424 !important;
  padding-top: 48px !important;
}

.footer-download {
  padding-bottom: 34px !important;
  margin-bottom: 34px !important;
}

.footer-mega {
  gap: clamp(30px, 4vw, 78px) !important;
  padding-bottom: 42px !important;
}

.footer-records {
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  scrollbar-width: none !important;
}

.footer-records::-webkit-scrollbar {
  display: none !important;
}

.footer-records a,
.footer-records span {
  white-space: nowrap !important;
}

@media (max-width: 1360px) and (min-width: 1024px) {
  :root {
    --sws-page-x: 42px;
    --sws-section-title: clamp(36px, 3vw, 48px);
  }

  #services .infra-showcase {
    height: 520px !important;
  }

  #services .infra-module:first-child {
    grid-template-columns: minmax(0, .64fr) 230px !important;
  }

  #services .infra-module:not(:first-child) {
    grid-template-columns: minmax(0, 1fr) 118px !important;
    padding: 24px !important;
  }

  #services .infra-module:not(:first-child) .infra-visual,
  #services .infra-module:not(:first-child) .infra-visual img {
    width: 112px !important;
    height: 112px !important;
    min-width: 112px !important;
  }

  #scenarios.ai-solutions {
    grid-template-columns: minmax(260px, .3fr) minmax(0, .7fr) !important;
    gap: 34px !important;
  }

  #scenarios .solution-board {
    height: 520px !important;
  }

  #capability .capability-stage {
    grid-template-columns: minmax(360px, .38fr) minmax(0, .62fr) !important;
  }
}

@media (max-width: 1023px) {
  .ai-home > .ai-section {
    min-height: auto !important;
    padding: 60px var(--sws-page-x) !important;
  }

  #services .infra-hero h2 {
    white-space: normal !important;
  }

  #scenarios.ai-solutions {
    display: block !important;
  }

  #scenarios .solution-board {
    grid-template-columns: 1fr !important;
    grid-template-rows: none !important;
    height: auto !important;
  }

  #capability .capability-copy h2 br {
    display: none !important;
  }

  .footer-records {
    flex-wrap: wrap !important;
  }
}

/* 2026-05-30 rhythm16: full homepage art-direction lock.
   Purpose: make every screen feel authored, not templated. Keep hero media intact. */
:root {
  --sws16-green: #20f3a0;
  --sws16-green-2: #5dcaa5;
  --sws16-copy: #8bbfaa;
  --sws16-copy-soft: rgba(139, 191, 170, .72);
  --sws16-line: rgba(157, 225, 203, .16);
  --sws16-glass: rgba(255, 255, 255, .032);
  --sws16-card: rgba(7, 22, 15, .78);
  --sws16-radius: 12px;
}

html,
body {
  background: #020605 !important;
  overflow-x: hidden !important;
}

.hero .about-cinema-mark,
.hero .hero-metrics,
.hero .infra-pills,
.hero .resource-panels {
  display: none !important;
}

@media (min-width: 1024px) {
  :root {
    --sws16-x: clamp(48px, 5.4vw, 112px);
    --sws16-wrap: min(1500px, calc(100vw - (var(--sws16-x) * 2)));
    --sws16-section-title: clamp(36px, 2.8vw, 48px);
    --sws16-card-title: clamp(22px, 1.58vw, 30px);
    --sws16-copy-size: clamp(13px, .82vw, 15px);
  }

  .ai-home {
    background:
      linear-gradient(180deg,
        #020605 0 17%,
        #050706 17% 34%,
        #03111f 34% 51%,
        #0c0c0c 51% 68%,
        #05111f 68% 84%,
        #070908 84% 100%) !important;
  }

  .ai-home > .ai-section {
    position: relative !important;
    min-height: 100svh !important;
    height: auto !important;
    padding: 0 !important;
    overflow: hidden !important;
    border-top: 1px solid rgba(255, 255, 255, .055) !important;
  }

  .ai-home > .ai-section::after {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    pointer-events: none !important;
    background-image:
      radial-gradient(circle, rgba(255,255,255,.11) 1px, transparent 1.6px) !important;
    background-size: 28px 28px !important;
    opacity: .045 !important;
    z-index: 0 !important;
  }

  .ai-home > .ai-section > * {
    position: relative !important;
    z-index: 1 !important;
  }

  .infra-hero h2,
  .solution-hero h2,
  .capability-copy h2,
  .stage-head h2,
  .resource-main h2,
  .about-narrative-center h2 {
    margin-top: 0 !important;
    color: #fff !important;
    font-size: var(--sws16-section-title) !important;
    font-weight: 650 !important;
    line-height: 1.15 !important;
    letter-spacing: 0 !important;
  }

  .infra-hero p,
  .solution-subtitle,
  .capability-copy p,
  .stage-head p,
  .resource-main p,
  .about-narrative-center p,
  .infra-copy p,
  .solution-card p,
  .core-tech-card p,
  .core-tech-card em,
  .delivery-track article p,
  .resource-panels article p {
    color: var(--sws16-copy) !important;
    font-size: var(--sws16-copy-size) !important;
    line-height: 1.62 !important;
    letter-spacing: 0 !important;
  }

  .infra-copy h3,
  .solution-card h3,
  .core-tech-card h3,
  .delivery-track article h3,
  .resource-panels article h3 {
    color: #fff !important;
    font-size: var(--sws16-card-title) !important;
    font-weight: 620 !important;
    line-height: 1.16 !important;
    letter-spacing: 0 !important;
  }

  /* Screen 2: flagship infrastructure, not a generic card grid. */
  #services.ai-origin {
    min-height: 100svh !important;
    background:
      radial-gradient(circle at 72% 14%, rgba(32, 243, 160, .13), transparent 25%),
      radial-gradient(circle at 10% 80%, rgba(32, 243, 160, .08), transparent 30%),
      linear-gradient(180deg, #020706 0%, #06150e 100%) !important;
  }

  #services.ai-origin::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    pointer-events: none !important;
    background:
      linear-gradient(126deg, transparent 0 18%, rgba(32,243,160,.075) 18.2%, transparent 30%),
      linear-gradient(36deg, transparent 0 62%, rgba(32,243,160,.075) 62.2%, transparent 75%) !important;
    opacity: .48 !important;
    z-index: 0 !important;
  }

  #services .services-depth-field {
    opacity: .5 !important;
    filter: saturate(135%) contrast(108%) !important;
  }

  #services .infrastructure-section {
    width: var(--sws16-wrap) !important;
    min-height: 100svh !important;
    height: auto !important;
    margin: 0 auto !important;
    padding: clamp(78px, 9vh, 96px) 0 clamp(42px, 5vh, 58px) !important;
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
    gap: clamp(22px, 3vh, 34px) !important;
    align-content: center !important;
  }

  #services .infra-hero {
    max-width: 900px !important;
    margin: 0 auto !important;
    text-align: center !important;
  }

  #services .infra-pill {
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    height: 36px !important;
    margin: 0 0 12px !important;
    padding: 0 24px !important;
    border: 1px solid rgba(32, 243, 160, .68) !important;
    border-radius: 999px !important;
    background: rgba(1, 20, 12, .52) !important;
    color: #9fe1cb !important;
    box-shadow: 0 0 28px rgba(32, 243, 160, .08) !important;
  }

  #services .infra-hero h2 {
    margin: 0 0 8px !important;
    white-space: nowrap !important;
  }

  #services .infra-hero p {
    max-width: 760px !important;
    margin: 0 auto !important;
    color: var(--sws16-green-2) !important;
  }

  #services .infra-metrics {
    display: none !important;
  }

  #services .infra-showcase {
    width: 100% !important;
    height: min(560px, calc(100svh - 238px)) !important;
    min-height: 500px !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr) !important;
    grid-template-rows: repeat(3, minmax(0, 1fr)) !important;
    gap: 18px !important;
  }

  #services .infra-module {
    min-width: 0 !important;
    min-height: 0 !important;
    border-radius: var(--sws16-radius) !important;
    border: 1px solid rgba(157, 225, 203, .18) !important;
    background:
      radial-gradient(circle at 80% 58%, rgba(32, 243, 160, .15), transparent 43%),
      rgba(255, 255, 255, .024) !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.08),
      0 24px 54px rgba(0,0,0,.28) !important;
    overflow: hidden !important;
    transition: border-color .28s ease, transform .28s ease, box-shadow .28s ease !important;
  }

  #services .infra-module:hover,
  #services .infra-module:focus-visible {
    border-color: rgba(32, 243, 160, .62) !important;
    transform: translateY(-2px) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.10), 0 30px 70px rgba(0,0,0,.34), 0 0 34px rgba(32,243,160,.08) !important;
  }

  #services .infra-module:first-child {
    grid-column: 1 !important;
    grid-row: 1 / span 3 !important;
    display: grid !important;
    grid-template-columns: minmax(0, .58fr) minmax(220px, .42fr) !important;
    align-items: end !important;
    gap: 18px !important;
    padding: clamp(30px, 3vw, 44px) !important;
  }

  #services .infra-module:not(:first-child) {
    grid-column: 2 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) clamp(118px, 8vw, 154px) !important;
    align-items: center !important;
    gap: 20px !important;
    padding: clamp(22px, 2vw, 32px) !important;
  }

  #services .infra-copy span {
    color: var(--sws16-green-2) !important;
    font-size: 13px !important;
    letter-spacing: .04em !important;
  }

  #services .infra-copy h3 {
    margin: 10px 0 12px !important;
    color: #d4f5e9 !important;
    white-space: normal !important;
  }

  #services .infra-module:first-child .infra-copy h3 {
    color: #fff !important;
    font-size: clamp(32px, 2.5vw, 44px) !important;
  }

  #services .infra-copy p {
    max-width: 560px !important;
    margin: 0 !important;
  }

  #services .infra-copy ul {
    display: grid !important;
    gap: 10px !important;
    margin: 24px 0 0 !important;
    padding: 0 !important;
  }

  #services .infra-copy li {
    color: rgba(255,255,255,.88) !important;
    font-size: var(--sws16-copy-size) !important;
    line-height: 1.45 !important;
  }

  #services .infra-visual {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
  }

  #services .infra-module:first-child .infra-visual-base {
    position: relative !important;
    justify-self: end !important;
    align-self: end !important;
    width: clamp(230px, 17.5vw, 290px) !important;
    height: clamp(230px, 17.5vw, 290px) !important;
    transform: translate(5%, 6%) !important;
  }

  #services .infra-orb-spin {
    display: none !important;
  }

  #services .infra-module:first-child .infra-visual-base img,
  #services .infra-module:not(:first-child) .infra-visual img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    mix-blend-mode: screen !important;
    filter: drop-shadow(0 0 30px rgba(32,243,160,.34)) !important;
  }

  #services .infra-module:first-child .infra-visual-base::before,
  #services .infra-module:first-child .infra-visual-base::after {
    content: "" !important;
    position: absolute !important;
    border-radius: 50% !important;
    pointer-events: none !important;
    background-color: transparent !important;
    clip-path: none !important;
    mix-blend-mode: screen !important;
  }

  #services .infra-module:first-child .infra-visual-base::before {
    z-index: 5 !important;
    left: 20% !important;
    top: 17% !important;
    width: 61% !important;
    height: 61% !important;
    background:
      repeating-linear-gradient(90deg, rgba(255,255,255,.24) 0 1px, transparent 1px 15px),
      linear-gradient(90deg, transparent 0%, rgba(32,243,160,.18) 50%, transparent 100%) !important;
    mask-image: radial-gradient(circle, #000 0 66%, transparent 68%) !important;
    opacity: .28 !important;
    animation: sws16OrbLongitudes 9s linear infinite !important;
  }

  #services .infra-module:first-child .infra-visual-base::after {
    z-index: 6 !important;
    left: 24% !important;
    top: 18% !important;
    width: 54% !important;
    height: 54% !important;
    background:
      radial-gradient(circle at 38% 30%, rgba(255,255,255,.36), transparent 25%),
      linear-gradient(104deg, transparent 0 40%, rgba(255,255,255,.30) 48%, transparent 58% 100%) !important;
    opacity: .22 !important;
    animation: sws16OrbSweep 5.8s ease-in-out infinite !important;
  }

  @keyframes sws16OrbLongitudes {
    from { transform: translateX(-8%) rotate(0deg) scaleX(.88); }
    to { transform: translateX(8%) rotate(360deg) scaleX(.88); }
  }

  @keyframes sws16OrbSweep {
    0%, 100% { transform: translateX(-28%) rotate(10deg); opacity: .10; }
    50% { transform: translateX(28%) rotate(10deg); opacity: .33; }
  }

  #services .infra-module:not(:first-child) .infra-visual,
  #services .infra-module:not(:first-child) .infra-visual img {
    width: clamp(118px, 8vw, 154px) !important;
    height: clamp(118px, 8vw, 154px) !important;
    min-width: clamp(118px, 8vw, 154px) !important;
  }

  /* Screen 3: scenario bento, different density and rhythm. */
  #scenarios.ai-solutions {
    min-height: 100svh !important;
    display: grid !important;
    grid-template-columns: minmax(300px, .30fr) minmax(0, .70fr) !important;
    gap: clamp(34px, 4.5vw, 72px) !important;
    align-items: center !important;
    padding: clamp(78px, 9vh, 98px) var(--sws16-x) clamp(46px, 5vh, 64px) !important;
    background:
      radial-gradient(circle at 83% 20%, rgba(32, 243, 160, .105), transparent 27%),
      linear-gradient(135deg, #020606 0%, #0b0b0a 60%, #050706 100%) !important;
  }

  #scenarios.ai-solutions::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    pointer-events: none !important;
    background:
      linear-gradient(125deg, transparent 0 62%, rgba(32,243,160,.06) 62.2%, transparent 73%),
      radial-gradient(circle at 4% 64%, rgba(255,255,255,.05), transparent 28%) !important;
    opacity: .9 !important;
  }

  #scenarios .solution-hero {
    max-width: 440px !important;
    text-align: left !important;
  }

  #scenarios .solution-badge {
    width: max-content !important;
    margin: 0 0 24px !important;
  }

  #scenarios .solution-hero h2 {
    max-width: 460px !important;
    margin: 0 0 18px !important;
    font-size: clamp(36px, 3vw, 48px) !important;
    line-height: 1.15 !important;
    text-align: left !important;
  }

  #scenarios .solution-subtitle {
    max-width: 400px !important;
    margin: 0 !important;
    text-align: left !important;
  }

  #scenarios .solution-stats {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    margin: 28px 0 0 !important;
  }

  #scenarios .solution-stats span {
    height: 34px !important;
    padding: 0 14px !important;
    border-radius: 999px !important;
    font-size: 12px !important;
    color: var(--sws16-copy) !important;
  }

  #scenarios .solution-divider {
    display: none !important;
  }

  #scenarios .solution-board {
    width: 100% !important;
    height: min(560px, calc(100svh - 160px)) !important;
    min-height: 480px !important;
    display: grid !important;
    grid-template-columns: minmax(250px, 1.08fr) repeat(3, minmax(145px, .72fr)) !important;
    grid-template-rows: repeat(2, minmax(0, 1fr)) !important;
    gap: 16px !important;
  }

  #scenarios .solution-card,
  #scenarios .solution-card:first-child,
  #scenarios .solution-card:nth-child(2),
  #scenarios .solution-card:nth-child(3),
  #scenarios .solution-card:nth-child(4),
  #scenarios .solution-card:nth-child(5),
  #scenarios .solution-card:nth-child(6) {
    display: block !important;
    grid-column: auto !important;
    grid-row: auto !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  #scenarios .solution-card:first-child { grid-column: 1 !important; grid-row: 1 / span 2 !important; }
  #scenarios .solution-card:nth-child(2) { grid-column: 2 !important; grid-row: 1 !important; }
  #scenarios .solution-card:nth-child(3) { grid-column: 3 / span 2 !important; grid-row: 1 !important; }
  #scenarios .solution-card:nth-child(4) { grid-column: 2 !important; grid-row: 2 !important; }
  #scenarios .solution-card:nth-child(5) { grid-column: 3 !important; grid-row: 2 !important; }
  #scenarios .solution-card:nth-child(6) { grid-column: 4 !important; grid-row: 2 !important; }

  #scenarios .solution-card {
    position: relative !important;
    min-height: 0 !important;
    padding: clamp(22px, 2vw, 30px) !important;
    border-radius: var(--sws16-radius) !important;
    border: 1px solid rgba(32,243,160,.20) !important;
    background:
      radial-gradient(circle at 86% 18%, rgba(32,243,160,.12), transparent 45%),
      rgba(255,255,255,.018) !important;
    overflow: hidden !important;
  }

  #scenarios .solution-visual {
    position: absolute !important;
    right: 20px !important;
    top: 18px !important;
    width: clamp(72px, 5.2vw, 98px) !important;
    height: clamp(72px, 5.2vw, 98px) !important;
    display: grid !important;
    place-items: center !important;
    opacity: .9 !important;
  }

  #scenarios .solution-card:first-child .solution-visual {
    width: clamp(120px, 8.6vw, 160px) !important;
    height: clamp(120px, 8.6vw, 160px) !important;
  }

  #scenarios .solution-icon {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    stroke: var(--sws16-green) !important;
    stroke-width: 2.1 !important;
    fill: none !important;
    filter: drop-shadow(0 0 22px rgba(32,243,160,.32)) !important;
  }

  #scenarios .solution-content {
    position: relative !important;
    z-index: 2 !important;
    min-height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
    padding-right: clamp(72px, 5vw, 104px) !important;
  }

  #scenarios .solution-card:first-child .solution-content {
    padding-right: 0 !important;
  }

  #scenarios .solution-content > span {
    color: var(--sws16-green-2) !important;
    letter-spacing: .18em !important;
    font-size: 12px !important;
  }

  #scenarios .solution-card h3 {
    margin: 12px 0 10px !important;
    color: #fff !important;
  }

  #scenarios .solution-card p {
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    margin: 0 !important;
  }

  /* Screen 4: cooler technology architecture with a wider left title. */
  #capability.core-tech-section {
    min-height: 100svh !important;
    padding: 0 !important;
    background:
      radial-gradient(circle at 76% 38%, rgba(58, 129, 190, .18), transparent 32%),
      linear-gradient(180deg, #04111e 0%, #020b14 100%) !important;
  }

  #capability .capability-stage {
    width: var(--sws16-wrap) !important;
    min-height: 100svh !important;
    height: auto !important;
    margin: 0 auto !important;
    padding: clamp(84px, 10vh, 112px) 0 clamp(48px, 6vh, 70px) !important;
    display: grid !important;
    grid-template-columns: minmax(560px, .47fr) minmax(0, .53fr) !important;
    align-items: center !important;
    gap: clamp(42px, 5vw, 82px) !important;
  }

  #capability .capability-copy {
    max-width: 760px !important;
    min-width: 0 !important;
  }

  #capability .capability-copy h2 {
    max-width: 760px !important;
    margin: 0 0 22px !important;
    font-size: clamp(38px, 3.05vw, 54px) !important;
    line-height: 1.13 !important;
    text-align: left !important;
    word-spacing: 0 !important;
    white-space: normal !important;
    text-wrap: auto !important;
    word-break: keep-all !important;
    overflow-wrap: normal !important;
  }

  #capability .capability-copy h2 br {
    display: block !important;
  }

  #capability .capability-copy p {
    max-width: 650px !important;
    margin: 0 0 30px !important;
  }

  #capability .tech-console.core-card-grid {
    height: min(550px, calc(100svh - 172px)) !important;
    min-height: 480px !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 18px !important;
    padding: 18px !important;
    border-radius: 18px !important;
    background:
      radial-gradient(circle at 52% 0%, rgba(74, 163, 203, .15), transparent 42%),
      rgba(3, 18, 29, .68) !important;
  }

  #capability .core-tech-card {
    min-height: 0 !important;
    padding: 28px !important;
    border-radius: var(--sws16-radius) !important;
    overflow: hidden !important;
  }

  #capability .tech-icon {
    width: clamp(62px, 4.4vw, 80px) !important;
    height: clamp(62px, 4.4vw, 80px) !important;
    margin-bottom: 18px !important;
    filter: drop-shadow(0 0 24px rgba(32, 243, 160, .25)) !important;
  }

  #capability .core-tech-card em {
    display: block !important;
    max-height: none !important;
    overflow: visible !important;
    opacity: .74 !important;
  }

  /* Screen 5: timeline/process instead of another card deck. */
  #training.ai-delivery {
    min-height: 100svh !important;
    padding: 0 !important;
    background:
      radial-gradient(circle at 22% 26%, rgba(32, 243, 160, .08), transparent 28%),
      linear-gradient(180deg, #0b0b0a 0%, #0c0c0c 100%) !important;
  }

  #training .delivery-stage {
    width: var(--sws16-wrap) !important;
    min-height: 100svh !important;
    height: auto !important;
    margin: 0 auto !important;
    padding: clamp(84px, 10vh, 112px) 0 clamp(48px, 6vh, 70px) !important;
    display: grid !important;
    grid-template-columns: minmax(350px, .36fr) minmax(0, .64fr) !important;
    align-items: center !important;
    gap: clamp(44px, 5vw, 90px) !important;
  }

  #training .delivery-track {
    min-height: 430px !important;
    display: grid !important;
    grid-template-rows: repeat(4, minmax(0, 1fr)) !important;
    gap: 16px !important;
  }

  #training .delivery-track::before {
    left: 32px !important;
    right: auto !important;
    top: 8% !important;
    bottom: 8% !important;
    width: 1px !important;
    height: auto !important;
    background: linear-gradient(180deg, transparent, rgba(32,243,160,.62), transparent) !important;
  }

  #training .delivery-track article {
    display: grid !important;
    grid-template-columns: 76px minmax(0, 1fr) !important;
    align-content: center !important;
    min-height: 0 !important;
    padding: 20px 28px !important;
    border-radius: var(--sws16-radius) !important;
    overflow: visible !important;
  }

  #training .delivery-icon {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    grid-row: 1 / span 3 !important;
    align-self: center !important;
    width: 54px !important;
    height: 54px !important;
    stroke: var(--sws16-green) !important;
    filter: drop-shadow(0 0 20px rgba(32, 243, 160, .24)) !important;
  }

  /* Screen 6: resource console as a tabbed product surface. */
  #resources.ai-resources {
    min-height: 100svh !important;
    padding: 0 !important;
    background:
      radial-gradient(circle at 82% 28%, rgba(66, 132, 186, .16), transparent 34%),
      linear-gradient(180deg, #03111f 0%, #06101a 100%) !important;
  }

  #resources .resource-stage {
    width: var(--sws16-wrap) !important;
    min-height: 100svh !important;
    height: auto !important;
    margin: 0 auto !important;
    padding: clamp(84px, 10vh, 112px) 0 clamp(48px, 6vh, 70px) !important;
    display: grid !important;
    grid-template-columns: minmax(360px, .38fr) minmax(0, .62fr) !important;
    align-items: center !important;
    gap: clamp(42px, 5vw, 84px) !important;
  }

  #resources .resource-panels {
    min-height: 450px !important;
    display: grid !important;
    grid-template-rows: repeat(3, minmax(0, 1fr)) !important;
    gap: 16px !important;
  }

  #resources .resource-panels article {
    min-height: 0 !important;
    padding: 26px 30px 26px 108px !important;
    border-radius: var(--sws16-radius) !important;
  }

  #resources .resource-icon {
    width: 62px !important;
    height: 62px !important;
    stroke: var(--sws16-green) !important;
    filter: drop-shadow(0 0 20px rgba(32, 243, 160, .25)) !important;
  }

  /* Screen 7: Xiaopeng/NIO style company story and clickable cinema frame. */
  #about.ai-about {
    min-height: 100svh !important;
    padding: 0 !important;
    background:
      radial-gradient(circle at 78% 36%, rgba(255,255,255,.06), transparent 34%),
      linear-gradient(180deg, #0c0c0c 0%, #060807 100%) !important;
  }

  #about .about-stage {
    width: var(--sws16-wrap) !important;
    min-height: 100svh !important;
    height: auto !important;
    margin: 0 auto !important;
    padding: clamp(84px, 10vh, 112px) 0 clamp(48px, 6vh, 70px) !important;
    display: grid !important;
    grid-template-columns: minmax(410px, .42fr) minmax(0, .58fr) !important;
    align-items: center !important;
    gap: clamp(44px, 5vw, 88px) !important;
  }

  #about .about-video-frame {
    height: min(460px, calc(100svh - 190px)) !important;
    min-height: 340px !important;
    border-radius: var(--sws16-radius) !important;
    cursor: pointer !important;
  }

  /* Footer: DJI-like dense utility footer, one legal row. */
  .site-footer.dji-footer {
    background: #242424 !important;
    color: rgba(255,255,255,.72) !important;
  }

  .dji-footer .footer-download,
  .dji-footer .footer-mega,
  .dji-footer .footer-brandbar,
  .dji-footer .footer-legal {
    width: var(--sws16-wrap) !important;
    max-width: var(--sws16-wrap) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .dji-footer .footer-download {
    padding: 44px 0 42px !important;
    border-bottom: 1px solid rgba(255,255,255,.14) !important;
  }

  .dji-footer .footer-mega {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: clamp(28px, 4vw, 72px) !important;
    padding: 42px 0 54px !important;
  }

  .dji-footer .footer-column h3 {
    color: #fff !important;
    font-size: 14px !important;
    margin: 0 0 16px !important;
  }

  .dji-footer .footer-column a,
  .dji-footer .footer-column span {
    color: rgba(255,255,255,.70) !important;
    font-size: 13px !important;
    line-height: 2.05 !important;
  }

  .dji-footer .footer-brandbar {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 32px !important;
    padding: 26px 0 !important;
    border-top: 1px solid rgba(255,255,255,.14) !important;
    border-bottom: 1px solid rgba(255,255,255,.14) !important;
  }

  .dji-footer .footer-brandbar img {
    width: 158px !important;
    height: auto !important;
    filter: brightness(0) invert(1) !important;
  }

  .dji-footer .footer-brandbar nav {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 22px !important;
  }

  .footer-social {
    display: flex !important;
    gap: 14px !important;
  }

  .footer-social a {
    width: 36px !important;
    height: 36px !important;
    display: inline-grid !important;
    place-items: center !important;
    border: 1px solid rgba(255,255,255,.18) !important;
    border-radius: 999px !important;
    font-size: 11px !important;
  }

  .dji-footer .footer-legal {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 24px !important;
    padding: 24px 0 34px !important;
  }

  .footer-records {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 0 !important;
    white-space: nowrap !important;
    overflow-x: auto !important;
    scrollbar-width: none !important;
  }

  .footer-records::-webkit-scrollbar {
    display: none !important;
  }

  .footer-records a,
  .footer-records span {
    color: rgba(255,255,255,.58) !important;
    font-size: 13px !important;
    white-space: nowrap !important;
    margin: 0 !important;
  }

  .footer-records a:not(:last-child)::after,
  .footer-records span:not(:last-child)::after {
    content: "|" !important;
    margin: 0 18px !important;
    color: rgba(255,255,255,.20) !important;
  }

  .footer-records .footer-copyright::before,
  .footer-records .footer-tagline::before {
    content: "" !important;
    margin: 0 !important;
  }
}

@media (min-width: 1024px) and (max-width: 1360px) {
  :root {
    --sws16-x: 38px;
    --sws16-section-title: clamp(32px, 2.6vw, 42px);
    --sws16-card-title: clamp(21px, 1.55vw, 27px);
    --sws16-copy-size: 13px;
  }

  #services .infra-showcase {
    min-height: 470px !important;
    gap: 14px !important;
  }

  #services .infra-module:first-child {
    grid-template-columns: minmax(0, .62fr) 210px !important;
  }

  #services .infra-module:first-child .infra-visual-base {
    width: 218px !important;
    height: 218px !important;
  }

  #services .infra-module:not(:first-child) {
    grid-template-columns: minmax(0, 1fr) 108px !important;
    padding: 20px 22px !important;
  }

  #services .infra-module:not(:first-child) .infra-visual,
  #services .infra-module:not(:first-child) .infra-visual img {
    width: 108px !important;
    height: 108px !important;
    min-width: 108px !important;
  }

  #scenarios.ai-solutions {
    grid-template-columns: minmax(260px, .29fr) minmax(0, .71fr) !important;
    gap: 30px !important;
  }

  #scenarios .solution-board {
    height: min(500px, calc(100svh - 140px)) !important;
    min-height: 430px !important;
    gap: 12px !important;
  }

  #capability .capability-stage {
    grid-template-columns: minmax(430px, .43fr) minmax(0, .57fr) !important;
  }

  #capability .capability-copy h2 {
    font-size: clamp(34px, 3vw, 46px) !important;
  }

  #capability .tech-console.core-card-grid {
    height: min(500px, calc(100svh - 150px)) !important;
    min-height: 420px !important;
  }
}

@media (max-width: 1023px) {
  .ai-home > .ai-section {
    min-height: auto !important;
    height: auto !important;
    padding: 64px 24px !important;
    overflow: visible !important;
  }

  #services .infrastructure-section,
  #capability .capability-stage,
  #training .delivery-stage,
  #resources .resource-stage,
  #about .about-stage {
    width: 100% !important;
    min-height: 0 !important;
    height: auto !important;
    padding: 0 !important;
    display: block !important;
  }

  #services .infra-hero h2,
  #scenarios .solution-hero h2,
  #capability .capability-copy h2 {
    font-size: clamp(30px, 9vw, 42px) !important;
    white-space: normal !important;
  }

  #services .infra-showcase,
  #scenarios .solution-board,
  #capability .tech-console.core-card-grid,
  #training .delivery-track,
  #resources .resource-panels {
    display: grid !important;
    grid-template-columns: 1fr !important;
    height: auto !important;
    min-height: 0 !important;
    gap: 14px !important;
    margin-top: 28px !important;
  }

  #services .infra-module,
  #services .infra-module:first-child,
  #services .infra-module:not(:first-child),
  #scenarios .solution-card,
  #scenarios .solution-card:first-child,
  #scenarios .solution-card:nth-child(2),
  #scenarios .solution-card:nth-child(3),
  #scenarios .solution-card:nth-child(4),
  #scenarios .solution-card:nth-child(5),
  #scenarios .solution-card:nth-child(6) {
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-column: auto !important;
    grid-row: auto !important;
    position: relative !important;
    width: auto !important;
    height: auto !important;
    min-height: 220px !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  .dji-footer .footer-mega,
  .dji-footer .footer-brandbar,
  .dji-footer .footer-legal {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 22px !important;
  }
}

/* 2026-05-30 rhythm14: premium homepage rhythm and density correction. */
:root {
  --sws-green: #20f3a0;
  --sws-green-soft: #5dcaa5;
  --sws-copy-green: #8bbfaa;
  --sws-line-green: rgba(32, 243, 160, .22);
  --sws-panel: rgba(255, 255, 255, .026);
  --sws-radius-sharp: 12px;
}

html,
body {
  overflow-x: hidden;
}

.hero .about-cinema-mark,
.hero .hero-metrics,
.hero .infra-pills,
.hero .resource-panels {
  display: none !important;
}

@media (min-width: 1024px) {
  :root {
    --sws-page-x: clamp(44px, 5.2vw, 104px);
    --sws-wrap: min(1440px, calc(100vw - (var(--sws-page-x) * 2)));
    --sws-title: clamp(34px, 2.35vw, 42px);
    --sws-title-small: clamp(30px, 2.15vw, 40px);
    --sws-card-title: clamp(22px, 1.4vw, 28px);
    --sws-copy-size: clamp(13px, .88vw, 15px);
  }

  .ai-home {
    background:
      linear-gradient(180deg,
        #020706 0 24%,
        #020707 24% 38%,
        #04111e 38% 54%,
        #0b0b0a 54% 70%,
        #06140d 70% 86%,
        #060807 86% 100%) !important;
  }

  .ai-home > .ai-section {
    position: relative !important;
    min-height: 100svh !important;
    padding: 0 !important;
    overflow: hidden !important;
    border-top: 1px solid rgba(255, 255, 255, .055) !important;
  }

  .ai-home > .ai-section::after {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    pointer-events: none !important;
    background-image: radial-gradient(circle, rgba(255,255,255,.09) 1px, transparent 1.6px) !important;
    background-size: 26px 26px !important;
    opacity: .055 !important;
    z-index: 0 !important;
  }

  .ai-section > * {
    position: relative;
    z-index: 1;
  }

  .infra-hero h2,
  .solution-hero h2,
  .capability-copy h2,
  .stage-head h2,
  .resource-main h2,
  .about-narrative-center h2 {
    font-size: var(--sws-title) !important;
    line-height: 1.16 !important;
    font-weight: 650 !important;
    letter-spacing: 0 !important;
    color: #fff !important;
  }

  .infra-hero p,
  .solution-subtitle,
  .capability-copy p,
  .stage-head p,
  .resource-main p,
  .about-narrative-center p,
  .infra-copy p,
  .solution-card p,
  .core-tech-card p,
  .core-tech-card em,
  .delivery-track article p,
  .resource-panels article p {
    font-size: var(--sws-copy-size) !important;
    line-height: 1.62 !important;
    color: var(--sws-copy-green) !important;
  }

  .infra-copy h3,
  .solution-card h3,
  .core-tech-card h3,
  .delivery-track article h3,
  .resource-panels article h3 {
    font-size: var(--sws-card-title) !important;
    line-height: 1.18 !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
  }

  #services.ai-origin {
    height: 100svh !important;
    min-height: 760px !important;
    background:
      radial-gradient(circle at 74% 18%, rgba(32, 243, 160, .15), transparent 27%),
      radial-gradient(circle at 16% 78%, rgba(32, 243, 160, .08), transparent 28%),
      linear-gradient(180deg, #020706 0%, #06150e 100%) !important;
  }

  #services.ai-origin::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    background:
      linear-gradient(120deg, transparent 0 16%, rgba(32,243,160,.08) 16.2%, transparent 28%),
      linear-gradient(36deg, transparent 0 60%, rgba(32,243,160,.08) 60.2%, transparent 72%) !important;
    opacity: .42 !important;
    pointer-events: none !important;
  }

  #services .services-depth-field {
    opacity: .66 !important;
    filter: saturate(130%) contrast(108%) !important;
  }

  #services .infrastructure-section {
    width: var(--sws-wrap) !important;
    height: 100% !important;
    margin: 0 auto !important;
    padding: clamp(78px, 9vh, 96px) 0 clamp(34px, 4vh, 48px) !important;
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
    gap: clamp(20px, 3vh, 34px) !important;
  }

  #services .infra-hero {
    max-width: 840px !important;
    margin: 0 auto !important;
    text-align: center !important;
  }

  #services .infra-pill {
    display: inline-flex !important;
    height: 36px !important;
    align-items: center !important;
    gap: 10px !important;
    margin: 0 0 12px !important;
    padding: 0 24px !important;
    border-radius: 999px !important;
    color: #9fe1cb !important;
    border: 1px solid rgba(32, 243, 160, .7) !important;
    background: rgba(1, 22, 14, .48) !important;
  }

  #services .infra-hero h2 {
    margin: 0 0 8px !important;
    white-space: nowrap !important;
  }

  #services .infra-hero p {
    max-width: 720px !important;
    margin: 0 auto !important;
    color: #5dcaa5 !important;
  }

  #services .infra-metrics {
    display: none !important;
  }

  #services .infra-showcase {
    height: 100% !important;
    min-height: 0 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1.06fr) minmax(0, .94fr) !important;
    grid-template-rows: repeat(3, minmax(0, 1fr)) !important;
    gap: 18px !important;
  }

  #services .infra-module {
    min-width: 0 !important;
    min-height: 0 !important;
    border-radius: var(--sws-radius-sharp) !important;
    border: 1px solid rgba(157, 225, 203, .18) !important;
    background:
      radial-gradient(circle at 78% 56%, rgba(32, 243, 160, .16), transparent 42%),
      rgba(255, 255, 255, .022) !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.08),
      0 20px 50px rgba(0,0,0,.24) !important;
    overflow: hidden !important;
  }

  #services .infra-module:first-child {
    grid-column: 1 !important;
    grid-row: 1 / span 3 !important;
    display: grid !important;
    grid-template-columns: minmax(0, .6fr) minmax(210px, .4fr) !important;
    align-items: end !important;
    gap: 18px !important;
    padding: clamp(28px, 3vw, 42px) !important;
  }

  #services .infra-module:not(:first-child) {
    grid-column: 2 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) clamp(112px, 8vw, 150px) !important;
    align-items: center !important;
    gap: 18px !important;
    padding: clamp(22px, 2vw, 32px) !important;
  }

  #services .infra-copy span {
    color: var(--sws-green-soft) !important;
    font-size: 13px !important;
    letter-spacing: .04em !important;
  }

  #services .infra-copy h3 {
    margin: 10px 0 12px !important;
    color: #d4f5e9 !important;
    white-space: normal !important;
  }

  #services .infra-module:first-child .infra-copy h3 {
    font-size: clamp(30px, 2.35vw, 42px) !important;
    color: #fff !important;
  }

  #services .infra-copy p {
    max-width: 560px !important;
    margin: 0 !important;
  }

  #services .infra-copy ul {
    margin-top: 22px !important;
  }

  #services .infra-copy li {
    color: rgba(255,255,255,.88) !important;
    font-size: var(--sws-copy-size) !important;
  }

  #services .infra-visual {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
  }

  #services .infra-module:first-child .infra-visual-base {
    position: relative !important;
    justify-self: end !important;
    align-self: end !important;
    width: clamp(220px, 17vw, 286px) !important;
    height: clamp(220px, 17vw, 286px) !important;
    transform: translate(6%, 7%) !important;
  }

  #services .infra-orb-spin {
    display: none !important;
  }

  #services .infra-orb-static,
  #services .infra-module:first-child .infra-visual-base img,
  #services .infra-module:not(:first-child) .infra-visual img {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    object-fit: contain !important;
    mix-blend-mode: screen !important;
    filter: drop-shadow(0 0 28px rgba(32,243,160,.32)) !important;
  }

  #services .infra-module:first-child .infra-visual-base::before {
    content: "" !important;
    position: absolute !important;
    z-index: 5 !important;
    left: 23% !important;
    top: 20% !important;
    width: 58% !important;
    height: 58% !important;
    border-radius: 50% !important;
    background:
      repeating-linear-gradient(90deg, rgba(255,255,255,.32) 0 1px, transparent 1px 14px),
      radial-gradient(circle at 42% 35%, rgba(255,255,255,.30), transparent 24%) !important;
    mask-image: radial-gradient(circle, #000 0 66%, transparent 68%) !important;
    opacity: .28 !important;
    mix-blend-mode: screen !important;
    animation: swsGlobeTurn14 10s linear infinite !important;
    pointer-events: none !important;
  }

  #services .infra-module:first-child .infra-visual-base::after {
    content: "" !important;
    position: absolute !important;
    z-index: 6 !important;
    left: 25% !important;
    top: 18% !important;
    width: 54% !important;
    height: 54% !important;
    border-radius: 50% !important;
    background: linear-gradient(100deg, transparent 0 42%, rgba(255,255,255,.38) 48%, transparent 56% 100%) !important;
    opacity: .22 !important;
    mix-blend-mode: screen !important;
    animation: swsGlobeSweep14 5.5s ease-in-out infinite !important;
    pointer-events: none !important;
  }

  @keyframes swsGlobeTurn14 {
    from { transform: translateX(-10%) rotateY(0deg) rotate(0deg); }
    to { transform: translateX(10%) rotateY(360deg) rotate(360deg); }
  }

  @keyframes swsGlobeSweep14 {
    0%, 100% { transform: translateX(-28%) rotate(12deg); opacity: .10; }
    50% { transform: translateX(30%) rotate(12deg); opacity: .34; }
  }

  #services .infra-module:not(:first-child) .infra-visual,
  #services .infra-module:not(:first-child) .infra-visual img {
    width: clamp(112px, 8vw, 150px) !important;
    height: clamp(112px, 8vw, 150px) !important;
    min-width: clamp(112px, 8vw, 150px) !important;
  }

  #scenarios.ai-solutions {
    height: 100svh !important;
    min-height: 760px !important;
    display: grid !important;
    grid-template-columns: minmax(290px, .3fr) minmax(0, .7fr) !important;
    gap: clamp(34px, 4.2vw, 70px) !important;
    align-items: center !important;
    padding: clamp(78px, 9vh, 98px) var(--sws-page-x) clamp(42px, 5vh, 58px) !important;
    background:
      radial-gradient(circle at 82% 20%, rgba(32, 243, 160, .12), transparent 26%),
      linear-gradient(135deg, #020606 0%, #0b0b0a 58%, #050706 100%) !important;
  }

  #scenarios .solution-hero {
    max-width: 420px !important;
    text-align: left !important;
  }

  #scenarios .solution-badge {
    margin-bottom: 22px !important;
  }

  #scenarios .solution-hero h2 {
    max-width: 430px !important;
    margin: 0 0 16px !important;
    font-size: var(--sws-title-small) !important;
    line-height: 1.18 !important;
    text-align: left !important;
  }

  #scenarios .solution-subtitle {
    max-width: 390px !important;
    margin: 0 !important;
    text-align: left !important;
  }

  #scenarios .solution-stats {
    display: flex !important;
    margin-top: 24px !important;
    gap: 10px !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
  }

  #scenarios .solution-stats span {
    height: 34px !important;
    padding: 0 14px !important;
    border-radius: 999px !important;
    font-size: 12px !important;
  }

  #scenarios .solution-board {
    width: 100% !important;
    height: min(560px, calc(100svh - 154px)) !important;
    min-height: 470px !important;
    display: grid !important;
    grid-template-columns: minmax(230px, 1.08fr) repeat(3, minmax(140px, .72fr)) !important;
    grid-template-rows: repeat(2, minmax(0, 1fr)) !important;
    gap: 16px !important;
  }

  #scenarios .solution-card,
  #scenarios .solution-card:first-child,
  #scenarios .solution-card:nth-child(2),
  #scenarios .solution-card:nth-child(3),
  #scenarios .solution-card:nth-child(4),
  #scenarios .solution-card:nth-child(5),
  #scenarios .solution-card:nth-child(6) {
    grid-column: auto !important;
    grid-row: auto !important;
  }

  #scenarios .solution-card:first-child {
    grid-column: 1 !important;
    grid-row: 1 / span 2 !important;
  }

  #scenarios .solution-card:nth-child(2) {
    grid-column: 2 !important;
    grid-row: 1 !important;
  }

  #scenarios .solution-card:nth-child(3) {
    grid-column: 3 / span 2 !important;
    grid-row: 1 !important;
  }

  #scenarios .solution-card:nth-child(4) {
    grid-column: 2 !important;
    grid-row: 2 !important;
  }

  #scenarios .solution-card:nth-child(5) {
    grid-column: 3 !important;
    grid-row: 2 !important;
  }

  #scenarios .solution-card:nth-child(6) {
    grid-column: 4 !important;
    grid-row: 2 !important;
    display: block !important;
  }

  #scenarios .solution-card {
    position: relative !important;
    min-height: 0 !important;
    padding: clamp(22px, 2vw, 30px) !important;
    border-radius: var(--sws-radius-sharp) !important;
    border: 1px solid rgba(32,243,160,.20) !important;
    background:
      radial-gradient(circle at 84% 18%, rgba(32,243,160,.12), transparent 42%),
      rgba(255,255,255,.018) !important;
    overflow: hidden !important;
  }

  #scenarios .solution-visual {
    position: absolute !important;
    right: 22px !important;
    top: 20px !important;
    width: clamp(62px, 4.8vw, 92px) !important;
    height: clamp(62px, 4.8vw, 92px) !important;
    display: grid !important;
    place-items: center !important;
    opacity: .95 !important;
  }

  #scenarios .solution-card:first-child .solution-visual {
    width: clamp(112px, 8vw, 150px) !important;
    height: clamp(112px, 8vw, 150px) !important;
  }

  #scenarios .solution-icon {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    stroke: var(--sws-green) !important;
    stroke-width: 2.15 !important;
    fill: none !important;
    filter: drop-shadow(0 0 22px rgba(32,243,160,.30)) !important;
  }

  #scenarios .solution-content {
    min-height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
    padding-right: clamp(70px, 5vw, 96px) !important;
  }

  #scenarios .solution-card:first-child .solution-content {
    padding-right: 0 !important;
  }

  #scenarios .solution-card h3 {
    margin: 0 0 8px !important;
    color: #fff !important;
  }

  #scenarios .solution-card p {
    margin: 0 !important;
    -webkit-line-clamp: 2 !important;
  }

  #capability.core-tech-section {
    height: 100svh !important;
    min-height: 760px !important;
    padding: 0 !important;
    background:
      radial-gradient(circle at 74% 42%, rgba(58, 129, 190, .20), transparent 34%),
      linear-gradient(180deg, #04111e 0%, #020b14 100%) !important;
  }

  #capability .capability-stage {
    width: var(--sws-wrap) !important;
    height: 100% !important;
    min-height: 0 !important;
    margin: 0 auto !important;
    padding: clamp(82px, 10vh, 112px) 0 clamp(44px, 5vh, 60px) !important;
    display: grid !important;
    grid-template-columns: minmax(520px, .48fr) minmax(0, .52fr) !important;
    align-items: center !important;
    gap: clamp(42px, 5.2vw, 84px) !important;
  }

  #capability .capability-copy {
    max-width: 720px !important;
    min-width: 0 !important;
  }

  #capability .capability-copy h2 {
    max-width: 760px !important;
    margin: 0 0 20px !important;
    font-size: clamp(34px, 2.35vw, 42px) !important;
    line-height: 1.14 !important;
    white-space: normal !important;
    word-break: keep-all !important;
    overflow-wrap: normal !important;
    text-wrap: balance !important;
  }

  #capability .capability-copy h2 br {
    display: block !important;
  }

  #capability .capability-copy p {
    max-width: 620px !important;
    margin: 0 0 28px !important;
  }

  #capability .tech-console.core-card-grid {
    height: min(560px, calc(100svh - 170px)) !important;
    min-height: 470px !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 18px !important;
    padding: 18px !important;
    border-radius: 18px !important;
    background:
      radial-gradient(circle at 50% 0%, rgba(74, 163, 203, .14), transparent 40%),
      rgba(3, 18, 29, .68) !important;
  }

  #capability .core-tech-card {
    min-height: 0 !important;
    padding: 26px !important;
    border-radius: var(--sws-radius-sharp) !important;
    overflow: hidden !important;
  }

  #capability .tech-icon {
    width: clamp(54px, 4vw, 72px) !important;
    height: clamp(54px, 4vw, 72px) !important;
    margin-bottom: 18px !important;
  }

  #capability .core-tech-card em {
    max-height: none !important;
    overflow: visible !important;
    opacity: .74 !important;
  }

  #training.ai-delivery {
    height: 100svh !important;
    min-height: 720px !important;
    padding: 0 !important;
    background:
      radial-gradient(circle at 24% 24%, rgba(32, 243, 160, .08), transparent 26%),
      linear-gradient(180deg, #0b0b0a 0%, #0c0c0c 100%) !important;
  }

  #training .delivery-stage {
    width: var(--sws-wrap) !important;
    height: 100% !important;
    margin: 0 auto !important;
    padding: clamp(82px, 10vh, 110px) 0 clamp(48px, 5vh, 64px) !important;
    display: grid !important;
    grid-template-columns: minmax(330px, .36fr) minmax(0, .64fr) !important;
    align-items: center !important;
    gap: clamp(40px, 5vw, 90px) !important;
  }

  #training .delivery-track {
    min-height: 420px !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: repeat(4, minmax(0, 1fr)) !important;
    gap: 14px !important;
  }

  #training .delivery-track::before {
    left: 32px !important;
    right: auto !important;
    top: 8% !important;
    bottom: 8% !important;
    width: 1px !important;
    height: auto !important;
    background: linear-gradient(180deg, transparent, rgba(32,243,160,.55), transparent) !important;
  }

  #training .delivery-track article {
    display: grid !important;
    grid-template-columns: 72px minmax(0, 1fr) !important;
    align-content: center !important;
    min-height: 0 !important;
    padding: 20px 26px !important;
  }

  #training .delivery-icon {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    grid-row: 1 / span 3 !important;
    align-self: center !important;
    width: 48px !important;
    height: 48px !important;
  }

  #resources.ai-resources {
    height: 100svh !important;
    min-height: 720px !important;
    padding: 0 !important;
    background:
      radial-gradient(circle at 82% 28%, rgba(66, 132, 186, .16), transparent 32%),
      linear-gradient(180deg, #03111f 0%, #06101a 100%) !important;
  }

  #resources .resource-stage {
    width: var(--sws-wrap) !important;
    height: 100% !important;
    margin: 0 auto !important;
    padding: clamp(82px, 10vh, 110px) 0 clamp(48px, 5vh, 64px) !important;
    display: grid !important;
    grid-template-columns: minmax(340px, .38fr) minmax(0, .62fr) !important;
    align-items: center !important;
  }

  #resources .resource-panels {
    min-height: 430px !important;
    display: grid !important;
    grid-template-rows: repeat(3, minmax(0, 1fr)) !important;
    gap: 16px !important;
  }

  #resources .resource-panels article {
    min-height: 0 !important;
    padding: 24px 28px 24px 100px !important;
  }

  #resources .resource-icon {
    width: 54px !important;
    height: 54px !important;
  }

  #about.ai-about {
    height: 100svh !important;
    min-height: 720px !important;
    padding: 0 !important;
    background:
      radial-gradient(circle at 78% 36%, rgba(255,255,255,.06), transparent 32%),
      linear-gradient(180deg, #0c0c0c 0%, #060807 100%) !important;
  }

  #about .about-stage {
    width: var(--sws-wrap) !important;
    height: 100% !important;
    margin: 0 auto !important;
    padding: clamp(82px, 10vh, 112px) 0 clamp(48px, 5vh, 64px) !important;
    display: grid !important;
    grid-template-columns: minmax(410px, .42fr) minmax(0, .58fr) !important;
    align-items: center !important;
  }

  #about .about-video-frame {
    height: min(460px, calc(100svh - 190px)) !important;
    min-height: 340px !important;
  }

  .dji-footer {
    background: #242424 !important;
  }

  .dji-footer .footer-legal {
    display: flex !important;
    gap: 20px !important;
    align-items: center !important;
    justify-content: space-between !important;
  }

  .footer-records {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 20px !important;
    white-space: nowrap !important;
  }

  .footer-records a,
  .footer-records span {
    margin: 0 !important;
    white-space: nowrap !important;
  }

  .footer-records .footer-copyright::before,
  .footer-records .footer-tagline::before {
    content: "|" !important;
    margin-right: 20px !important;
    color: rgba(255,255,255,.20) !important;
  }
}

@media (min-width: 1024px) and (max-width: 1360px) {
  :root {
    --sws-page-x: 38px;
    --sws-title: clamp(32px, 2.6vw, 42px);
    --sws-title-small: clamp(30px, 2.3vw, 38px);
    --sws-card-title: clamp(20px, 1.5vw, 25px);
    --sws-copy-size: 13px;
  }

  #services.ai-origin,
  #scenarios.ai-solutions,
  #capability.core-tech-section,
  #training.ai-delivery,
  #resources.ai-resources,
  #about.ai-about {
    min-height: 700px !important;
  }

  #services .infra-showcase {
    gap: 14px !important;
  }

  #services .infra-module:first-child {
    grid-template-columns: minmax(0, .62fr) 210px !important;
  }

  #services .infra-module:first-child .infra-visual-base {
    width: 220px !important;
    height: 220px !important;
  }

  #services .infra-module:not(:first-child) {
    grid-template-columns: minmax(0, 1fr) 104px !important;
    padding: 20px 22px !important;
  }

  #services .infra-module:not(:first-child) .infra-visual,
  #services .infra-module:not(:first-child) .infra-visual img {
    width: 104px !important;
    height: 104px !important;
    min-width: 104px !important;
  }

  #scenarios.ai-solutions {
    grid-template-columns: minmax(260px, .3fr) minmax(0, .7fr) !important;
    gap: 30px !important;
  }

  #scenarios .solution-board {
    height: min(500px, calc(100svh - 140px)) !important;
    min-height: 430px !important;
    gap: 12px !important;
  }

  #capability .capability-stage {
    grid-template-columns: minmax(400px, .43fr) minmax(0, .57fr) !important;
  }

  #capability .tech-console.core-card-grid {
    height: min(500px, calc(100svh - 150px)) !important;
    min-height: 420px !important;
  }
}

@media (max-width: 1023px) {
  .ai-home > .ai-section {
    min-height: auto !important;
    height: auto !important;
    padding: 64px 24px !important;
    overflow: visible !important;
  }

  #services .infrastructure-section,
  #capability .capability-stage,
  #training .delivery-stage,
  #resources .resource-stage,
  #about .about-stage {
    width: 100% !important;
    height: auto !important;
    padding: 0 !important;
    display: block !important;
  }

  #services .infra-hero h2,
  #scenarios .solution-hero h2,
  #capability .capability-copy h2 {
    font-size: clamp(30px, 9vw, 42px) !important;
    white-space: normal !important;
  }

  #services .infra-showcase,
  #scenarios .solution-board,
  #capability .tech-console.core-card-grid,
  #training .delivery-track,
  #resources .resource-panels {
    display: grid !important;
    grid-template-columns: 1fr !important;
    height: auto !important;
    min-height: 0 !important;
    gap: 14px !important;
    margin-top: 28px !important;
  }

  #services .infra-module,
  #services .infra-module:first-child,
  #services .infra-module:not(:first-child),
  #scenarios .solution-card,
  #scenarios .solution-card:first-child,
  #scenarios .solution-card:nth-child(6) {
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-column: auto !important;
    grid-row: auto !important;
    position: relative !important;
    width: auto !important;
    height: auto !important;
    min-height: 220px !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }
}

/* 2026-05-30 rhythm17: final homepage art-direction layer.
   This deliberately creates section-to-section rhythm instead of repeating one template. */
@media (min-width: 1024px) {
  :root {
    --sws-x: clamp(56px, 6vw, 118px);
    --sws-max: min(1500px, calc(100vw - (var(--sws-x) * 2)));
    --sws-header: 88px;
    --sws-green: #20f3a0;
    --sws-green-2: #5dcaa5;
    --sws-text: #8bbfaa;
    --sws-title: clamp(38px, 2.9vw, 50px);
    --sws-title-tight: clamp(34px, 2.45vw, 44px);
    --sws-card-title: clamp(22px, 1.55vw, 28px);
    --sws-body: clamp(13px, .88vw, 15px);
    --sws-radius: 12px;
  }

  html,
  body {
    overflow-x: hidden !important;
    background: #020605 !important;
  }

  body {
    font-family: "PingFang SC", "SF Pro Display", "Helvetica Neue", Arial, sans-serif !important;
  }

  .hero .about-cinema-mark,
  .hero .about-cinema-mark *,
  .hero .hero-metrics,
  .hero .infra-pills,
  .hero .resource-panels {
    display: none !important;
  }

  .ai-home {
    background:
      linear-gradient(180deg, #020605 0%, #020605 25%, #04111e 47%, #080909 67%, #04110b 100%) !important;
  }

  .ai-home > .ai-section {
    position: relative !important;
    min-height: 100svh !important;
    height: 100svh !important;
    overflow: hidden !important;
    border-top: 1px solid rgba(255, 255, 255, .045) !important;
  }

  .infra-hero h2,
  .solution-hero h2,
  .capability-copy h2,
  .stage-head h2,
  .resource-main h2,
  .about-narrative-center h2 {
    font-size: var(--sws-title) !important;
    line-height: 1.12 !important;
    letter-spacing: 0 !important;
    font-weight: 650 !important;
    color: #fff !important;
  }

  .infra-hero p,
  .solution-subtitle,
  .capability-copy p,
  .stage-head p,
  .resource-main p,
  .about-narrative-center p,
  .infra-copy p,
  .solution-card p,
  .core-tech-card p,
  .core-tech-card em,
  .delivery-track article p,
  .resource-panels article p {
    font-size: var(--sws-body) !important;
    line-height: 1.68 !important;
    color: var(--sws-text) !important;
    letter-spacing: 0 !important;
  }

  .infra-copy h3,
  .solution-card h3,
  .core-tech-card h3,
  .delivery-track article h3,
  .resource-panels article h3 {
    font-size: var(--sws-card-title) !important;
    line-height: 1.16 !important;
    letter-spacing: 0 !important;
    font-weight: 620 !important;
    color: #d4f5e9 !important;
  }

  /* 02 / product platform: centered thesis + asymmetric product matrix. */
  #services.ai-origin {
    padding: var(--sws-header) 0 40px !important;
    background:
      radial-gradient(circle at 18% 72%, rgba(32, 243, 160, .10), transparent 28%),
      radial-gradient(circle at 76% 16%, rgba(32, 243, 160, .13), transparent 32%),
      linear-gradient(180deg, #020605 0%, #06140d 100%) !important;
  }

  #services.ai-origin::before {
    opacity: .28 !important;
  }

  #services .services-depth-field {
    opacity: .48 !important;
    transform: scale(1.06) !important;
  }

  #services .infrastructure-section {
    width: var(--sws-max) !important;
    height: calc(100svh - var(--sws-header) - 40px) !important;
    margin: 0 auto !important;
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
    gap: clamp(20px, 3vh, 32px) !important;
    padding: 0 !important;
  }

  #services .infra-hero {
    max-width: 790px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    text-align: center !important;
  }

  #services .infra-pill {
    margin-bottom: 10px !important;
    height: 36px !important;
    padding: 0 28px !important;
    border-radius: 999px !important;
    color: #9fe1cb !important;
    border-color: rgba(32, 243, 160, .58) !important;
    background: rgba(0, 0, 0, .12) !important;
  }

  #services .infra-hero h2 {
    margin: 0 0 8px !important;
    white-space: nowrap !important;
  }

  #services .infra-hero p {
    max-width: 760px !important;
    margin: 0 auto !important;
    color: var(--sws-green-2) !important;
  }

  #services .infra-metrics,
  #services .infra-pills {
    display: none !important;
  }

  #services .infra-showcase {
    height: 100% !important;
    min-height: 0 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr) !important;
    grid-template-rows: repeat(3, minmax(0, 1fr)) !important;
    gap: 18px !important;
  }

  #services .infra-module {
    position: relative !important;
    min-height: 0 !important;
    border-radius: var(--sws-radius) !important;
    border: 1px solid rgba(157, 225, 203, .18) !important;
    background:
      radial-gradient(circle at 74% 54%, rgba(32, 243, 160, .16), transparent 42%),
      linear-gradient(135deg, rgba(255,255,255,.035), rgba(255,255,255,.012)) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.09), 0 20px 55px rgba(0,0,0,.28) !important;
    overflow: hidden !important;
  }

  #services .infra-module:hover,
  #services .infra-module:focus-visible {
    border-color: rgba(32, 243, 160, .62) !important;
    transform: translateY(-4px) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 32px 82px rgba(0,0,0,.38) !important;
  }

  #services .infra-module:first-child {
    grid-column: 1 !important;
    grid-row: 1 / span 3 !important;
    display: grid !important;
    grid-template-columns: minmax(0, .62fr) minmax(220px, .38fr) !important;
    align-items: center !important;
    padding: clamp(28px, 3vw, 44px) !important;
  }

  #services .infra-module:not(:first-child) {
    grid-column: 2 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) clamp(110px, 8vw, 142px) !important;
    align-items: center !important;
    gap: 20px !important;
    padding: clamp(20px, 2vw, 30px) !important;
  }

  #services .infra-copy {
    min-width: 0 !important;
  }

  #services .infra-copy span {
    margin-bottom: 10px !important;
    color: var(--sws-green-2) !important;
    font-size: 13px !important;
    letter-spacing: .04em !important;
  }

  #services .infra-copy h3 {
    margin: 0 0 14px !important;
  }

  #services .infra-module:first-child .infra-copy h3 {
    color: #fff !important;
    font-size: clamp(32px, 2.7vw, 44px) !important;
  }

  #services .infra-copy p {
    max-width: 560px !important;
    margin: 0 !important;
    display: block !important;
  }

  #services .infra-copy ul {
    margin-top: 24px !important;
    gap: 10px !important;
  }

  #services .infra-copy li {
    color: rgba(255, 255, 255, .92) !important;
    font-size: var(--sws-body) !important;
  }

  #services .infra-module:first-child .infra-visual-base {
    position: relative !important;
    justify-self: end !important;
    align-self: end !important;
    width: clamp(230px, 18vw, 300px) !important;
    height: clamp(230px, 18vw, 300px) !important;
    overflow: visible !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  #services .infra-module:first-child .infra-visual-base::before {
    content: "" !important;
    position: absolute !important;
    left: 18% !important;
    top: 13% !important;
    width: 64% !important;
    height: 64% !important;
    border-radius: 50% !important;
    background:
      repeating-radial-gradient(circle at 50% 50%, transparent 0 15px, rgba(255,255,255,.30) 16px 17px, transparent 18px 30px),
      repeating-linear-gradient(88deg, transparent 0 19px, rgba(255,255,255,.28) 20px 21px, transparent 22px 38px) !important;
    opacity: .28 !important;
    mix-blend-mode: screen !important;
    transform-origin: 50% 50% !important;
    animation: swsGlobeRotateClean 9s linear infinite !important;
    pointer-events: none !important;
    z-index: 4 !important;
  }

  #services .infra-module:first-child .infra-visual-base::after {
    content: "" !important;
    position: absolute !important;
    left: 17% !important;
    top: 12% !important;
    width: 66% !important;
    height: 66% !important;
    border-radius: 50% !important;
    background: linear-gradient(100deg, transparent 0 42%, rgba(255,255,255,.35) 48%, transparent 56% 100%) !important;
    opacity: .24 !important;
    mix-blend-mode: screen !important;
    transform-origin: center !important;
    animation: swsGlobeSweepClean 4.8s ease-in-out infinite !important;
    pointer-events: none !important;
    z-index: 5 !important;
  }

  @keyframes swsGlobeRotateClean {
    from { transform: rotate(0deg) translateX(-5%); }
    to { transform: rotate(360deg) translateX(5%); }
  }

  @keyframes swsGlobeSweepClean {
    0%, 100% { transform: translateX(-13%) rotate(8deg); opacity: .16; }
    50% { transform: translateX(13%) rotate(8deg); opacity: .34; }
  }

  #services .infra-orb-spin {
    display: none !important;
  }

  #services .infra-orb-static,
  #services .infra-module:first-child .infra-visual-base img {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    mix-blend-mode: screen !important;
    z-index: 2 !important;
  }

  #services .infra-module:not(:first-child) .infra-visual,
  #services .infra-module:not(:first-child) .infra-visual img {
    width: clamp(104px, 8vw, 136px) !important;
    height: clamp(104px, 8vw, 136px) !important;
    min-width: clamp(104px, 8vw, 136px) !important;
    object-fit: contain !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
    mix-blend-mode: screen !important;
  }

  /* 03 / scenarios: darker neutral chapter, true Bento hierarchy, six visible icons. */
  #scenarios.ai-solutions {
    padding: var(--sws-header) var(--sws-x) 52px !important;
    display: grid !important;
    grid-template-columns: minmax(310px, .30fr) minmax(0, .70fr) !important;
    align-items: center !important;
    gap: clamp(34px, 4vw, 66px) !important;
    background:
      linear-gradient(118deg, rgba(255,255,255,.045) 0 1px, transparent 1px 42%),
      radial-gradient(circle at 92% 18%, rgba(32, 243, 160, .10), transparent 28%),
      linear-gradient(180deg, #050706 0%, #080909 100%) !important;
  }

  #scenarios .solution-glow,
  #scenarios .solution-divider {
    display: none !important;
  }

  #scenarios .solution-hero {
    max-width: 430px !important;
    margin: 0 !important;
    text-align: left !important;
  }

  #scenarios .solution-badge {
    margin-bottom: 20px !important;
    height: 36px !important;
    padding: 0 18px !important;
  }

  #scenarios .solution-hero h2 {
    max-width: 420px !important;
    margin: 0 0 18px !important;
    font-size: clamp(38px, 3.1vw, 50px) !important;
    line-height: 1.15 !important;
    text-align: left !important;
    color: #fff !important;
  }

  #scenarios .solution-subtitle {
    max-width: 420px !important;
    margin: 0 !important;
    text-align: left !important;
    color: #8bbfaa !important;
  }

  #scenarios .solution-stats {
    margin-top: 28px !important;
    justify-content: flex-start !important;
    gap: 10px !important;
    flex-wrap: wrap !important;
  }

  #scenarios .solution-stats span {
    height: 34px !important;
    min-width: 0 !important;
    padding: 0 16px !important;
    border-radius: 999px !important;
    color: #8bbfaa !important;
  }

  #scenarios .solution-stats strong {
    font-size: 18px !important;
    color: #fff !important;
  }

  #scenarios .solution-board {
    height: min(555px, calc(100svh - 150px)) !important;
    min-height: 450px !important;
    display: grid !important;
    grid-template-columns: minmax(230px, 1.05fr) repeat(3, minmax(140px, .78fr)) !important;
    grid-template-rows: repeat(2, minmax(0, 1fr)) !important;
    gap: 14px !important;
  }

  #scenarios .solution-card,
  #scenarios .solution-card:first-child,
  #scenarios .solution-card:nth-child(2),
  #scenarios .solution-card:nth-child(3),
  #scenarios .solution-card:nth-child(4),
  #scenarios .solution-card:nth-child(5),
  #scenarios .solution-card:nth-child(6) {
    display: grid !important;
    position: relative !important;
    min-height: 0 !important;
    padding: 20px 22px !important;
    border-radius: var(--sws-radius) !important;
    background:
      radial-gradient(circle at 78% 14%, rgba(32, 243, 160, .10), transparent 42%),
      rgba(7, 37, 25, .58) !important;
    border: 1px solid rgba(32, 243, 160, .22) !important;
    overflow: hidden !important;
    opacity: 1 !important;
  }

  #scenarios .solution-card:first-child { grid-column: 1 !important; grid-row: 1 / span 2 !important; }
  #scenarios .solution-card:nth-child(2) { grid-column: 2 !important; grid-row: 1 !important; }
  #scenarios .solution-card:nth-child(3) { grid-column: 3 / span 2 !important; grid-row: 1 !important; }
  #scenarios .solution-card:nth-child(4) { grid-column: 1 / span 2 !important; grid-row: 2 !important; }
  #scenarios .solution-card:nth-child(5) { grid-column: 3 !important; grid-row: 2 !important; }
  #scenarios .solution-card:nth-child(6) { grid-column: 4 !important; grid-row: 2 !important; }

  #scenarios .solution-card:hover {
    transform: translateY(-4px) !important;
    border-color: rgba(32, 243, 160, .58) !important;
  }

  #scenarios .solution-visual {
    position: absolute !important;
    right: 18px !important;
    top: 16px !important;
    width: clamp(62px, 5vw, 92px) !important;
    height: clamp(62px, 5vw, 92px) !important;
    display: grid !important;
    place-items: center !important;
    opacity: .88 !important;
    background: transparent !important;
  }

  #scenarios .solution-card:first-child .solution-visual {
    width: clamp(98px, 8vw, 142px) !important;
    height: clamp(98px, 8vw, 142px) !important;
    right: 24px !important;
    top: 24px !important;
  }

  #scenarios .solution-icon {
    width: 100% !important;
    height: 100% !important;
    stroke: var(--sws-green) !important;
    stroke-width: 2 !important;
    fill: none !important;
    filter: drop-shadow(0 0 18px rgba(32, 243, 160, .22)) !important;
  }

  #scenarios .solution-content {
    position: relative !important;
    z-index: 1 !important;
    min-height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
    padding-right: clamp(64px, 6vw, 110px) !important;
  }

  #scenarios .solution-card:first-child .solution-content {
    padding-right: 20px !important;
  }

  #scenarios .solution-content span {
    margin: 0 0 10px !important;
    color: var(--sws-green-2) !important;
    font-size: 13px !important;
    letter-spacing: .12em !important;
  }

  #scenarios .solution-card h3 {
    margin: 0 0 8px !important;
    font-size: var(--sws-card-title) !important;
    white-space: normal !important;
  }

  #scenarios .solution-card p {
    margin: 0 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }

  /* 04 / core technology: blue-black chapter, compact technical grid. */
  #capability.core-tech-section {
    padding: var(--sws-header) 0 58px !important;
    background:
      radial-gradient(circle at 68% 48%, rgba(34, 98, 159, .22), transparent 38%),
      linear-gradient(180deg, #03111f 0%, #061626 58%, #04111e 100%) !important;
  }

  #capability .capability-stage {
    width: var(--sws-max) !important;
    height: calc(100svh - var(--sws-header) - 58px) !important;
    margin: 0 auto !important;
    display: grid !important;
    grid-template-columns: minmax(460px, .42fr) minmax(0, .58fr) !important;
    gap: clamp(44px, 5.2vw, 84px) !important;
    align-items: center !important;
  }

  #capability .capability-copy {
    max-width: 650px !important;
  }

  #capability .capability-copy h2 {
    max-width: 720px !important;
    margin: 0 0 22px !important;
    font-size: clamp(36px, 2.85vw, 48px) !important;
    line-height: 1.16 !important;
    word-spacing: 0 !important;
    white-space: normal !important;
    text-align: left !important;
  }

  #capability .capability-copy h2 br {
    display: none !important;
  }

  #capability .capability-copy p {
    max-width: 620px !important;
    margin: 0 0 28px !important;
  }

  #capability .core-cta {
    height: 48px !important;
    padding: 0 26px !important;
    border-radius: var(--sws-radius) !important;
  }

  #capability .tech-console.core-card-grid {
    height: min(560px, calc(100svh - 170px)) !important;
    min-height: 460px !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 16px !important;
    padding: 18px !important;
    border-radius: 18px !important;
  }

  #capability .core-tech-card {
    min-height: 0 !important;
    padding: 24px !important;
    border-radius: var(--sws-radius) !important;
    display: flex !important;
    flex-direction: column !important;
  }

  #capability .tech-icon {
    width: 56px !important;
    height: 56px !important;
    margin-bottom: 18px !important;
    stroke-width: 1.8 !important;
    filter: drop-shadow(0 0 18px rgba(32, 243, 160, .25)) !important;
  }

  #capability .core-tech-card h3 {
    margin: 0 0 8px !important;
  }

  #capability .core-tech-card p {
    margin: 0 0 12px !important;
  }

  #capability .core-tech-card em {
    margin-top: auto !important;
    padding-top: 12px !important;
    border-top: 1px solid rgba(32, 243, 160, .16) !important;
    font-size: 12px !important;
    line-height: 1.6 !important;
    color: rgba(139, 191, 170, .72) !important;
    max-height: none !important;
    overflow: visible !important;
  }

  /* 05 / delivery: process timeline, not another equal card grid. */
  #training.ai-delivery {
    padding: var(--sws-header) 0 58px !important;
    background:
      radial-gradient(circle at 18% 24%, rgba(32, 243, 160, .08), transparent 28%),
      linear-gradient(180deg, #090a09 0%, #0d0d0c 100%) !important;
  }

  #training .delivery-stage {
    width: var(--sws-max) !important;
    height: calc(100svh - var(--sws-header) - 58px) !important;
    margin: 0 auto !important;
    display: grid !important;
    grid-template-columns: minmax(360px, .34fr) minmax(0, .66fr) !important;
    gap: clamp(42px, 6vw, 96px) !important;
    align-items: center !important;
  }

  #training .stage-head {
    max-width: 520px !important;
    margin: 0 !important;
    text-align: left !important;
  }

  #training .stage-head h2 {
    margin: 0 0 18px !important;
    font-size: var(--sws-title-tight) !important;
  }

  #training .delivery-track {
    position: relative !important;
    min-height: 450px !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: repeat(4, minmax(0, 1fr)) !important;
    gap: 14px !important;
    padding-left: 54px !important;
  }

  #training .delivery-track::before {
    content: "" !important;
    position: absolute !important;
    left: 20px !important;
    top: 28px !important;
    bottom: 28px !important;
    width: 1px !important;
    background: linear-gradient(180deg, transparent, rgba(32,243,160,.62), transparent) !important;
  }

  #training .delivery-track article {
    min-height: 0 !important;
    display: grid !important;
    grid-template-columns: 62px minmax(0, 1fr) !important;
    grid-template-areas:
      "icon num"
      "icon title"
      "icon text" !important;
    column-gap: 18px !important;
    align-content: center !important;
    padding: 22px 24px !important;
    border-radius: var(--sws-radius) !important;
    background: rgba(255,255,255,.025) !important;
    border: 1px solid rgba(255,255,255,.13) !important;
  }

  #training .delivery-track article::before {
    content: "" !important;
    position: absolute !important;
    left: -42px !important;
    top: 50% !important;
    width: 12px !important;
    height: 12px !important;
    border-radius: 50% !important;
    background: var(--sws-green) !important;
    box-shadow: 0 0 22px rgba(32,243,160,.75) !important;
    transform: translateY(-50%) !important;
  }

  #training .delivery-icon {
    grid-area: icon !important;
    position: static !important;
    width: 54px !important;
    height: 54px !important;
    align-self: center !important;
    stroke: var(--sws-green) !important;
    filter: drop-shadow(0 0 16px rgba(32, 243, 160, .25)) !important;
  }

  #training .delivery-track span {
    grid-area: num !important;
    color: var(--sws-green-2) !important;
    font-size: 13px !important;
  }

  #training .delivery-track h3 {
    grid-area: title !important;
    margin: 0 0 6px !important;
  }

  #training .delivery-track p {
    grid-area: text !important;
    margin: 0 !important;
    display: block !important;
    overflow: visible !important;
  }

  /* 06 / resources: component platform with a left menu and right panels. */
  #resources.ai-resources {
    padding: var(--sws-header) 0 58px !important;
    background:
      radial-gradient(circle at 74% 45%, rgba(32, 243, 160, .12), transparent 34%),
      linear-gradient(180deg, #06140d 0%, #081510 100%) !important;
  }

  #resources .resource-stage {
    width: var(--sws-max) !important;
    height: calc(100svh - var(--sws-header) - 58px) !important;
    margin: 0 auto !important;
    display: grid !important;
    grid-template-columns: minmax(360px, .36fr) minmax(0, .64fr) !important;
    gap: clamp(44px, 6vw, 96px) !important;
    align-items: center !important;
  }

  #resources .resource-main {
    max-width: 560px !important;
  }

  #resources .resource-main h2 {
    margin: 0 0 20px !important;
    font-size: var(--sws-title-tight) !important;
  }

  #resources .resource-tabs {
    margin-top: 30px !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    max-width: 260px !important;
  }

  #resources .resource-tabs button {
    justify-content: flex-start !important;
    height: 44px !important;
    border-radius: var(--sws-radius) !important;
  }

  #resources .resource-panels {
    min-height: 430px !important;
    display: grid !important;
    grid-template-rows: 1.2fr 1fr 1fr !important;
    gap: 16px !important;
  }

  #resources .resource-panels article {
    position: relative !important;
    min-height: 0 !important;
    display: grid !important;
    grid-template-columns: 62px minmax(0, 1fr) !important;
    grid-template-areas:
      "icon label"
      "icon title"
      "icon text" !important;
    column-gap: 18px !important;
    align-content: center !important;
    padding: 24px 30px !important;
    border-radius: var(--sws-radius) !important;
  }

  #resources .resource-icon {
    grid-area: icon !important;
    position: static !important;
    width: 54px !important;
    height: 54px !important;
    align-self: center !important;
  }

  #resources .resource-panels span { grid-area: label !important; }
  #resources .resource-panels h3 { grid-area: title !important; margin: 0 0 8px !important; }
  #resources .resource-panels p { grid-area: text !important; margin: 0 !important; }

  /* 07 / about: Xiaopeng/NIO-like intro above a cinematic visual. */
  #about.ai-about {
    padding: var(--sws-header) 0 58px !important;
    background:
      radial-gradient(circle at 74% 40%, rgba(255,255,255,.055), transparent 34%),
      linear-gradient(180deg, #0c0c0c 0%, #060807 100%) !important;
  }

  #about .about-stage {
    width: var(--sws-max) !important;
    height: calc(100svh - var(--sws-header) - 58px) !important;
    margin: 0 auto !important;
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
    grid-template-columns: 1fr !important;
    gap: clamp(28px, 4vh, 44px) !important;
    align-items: stretch !important;
  }

  #about .about-narrative-center {
    max-width: 930px !important;
    margin: 0 auto !important;
    text-align: center !important;
  }

  #about .about-narrative-center h2 {
    margin: 0 0 16px !important;
    font-size: var(--sws-title-tight) !important;
  }

  #about .about-narrative-center p {
    max-width: 760px !important;
    margin: 0 auto !important;
  }

  #about .about-video-frame {
    width: min(1160px, 100%) !important;
    height: 100% !important;
    min-height: 360px !important;
    margin: 0 auto !important;
    border-radius: var(--sws-radius) !important;
    cursor: pointer !important;
  }

  /* Footer: DJI-like dense, useful, single-line legal row. */
  .dji-footer {
    background: #232323 !important;
    padding: 54px 0 30px !important;
  }

  .dji-footer .footer-download,
  .dji-footer .footer-mega,
  .dji-footer .footer-brandbar,
  .dji-footer .footer-legal {
    width: var(--sws-max) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .dji-footer .footer-download {
    border-bottom: 1px solid rgba(255,255,255,.14) !important;
    padding-bottom: 34px !important;
  }

  .dji-footer .footer-mega {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 34px !important;
    padding: 34px 0 !important;
  }

  .dji-footer .footer-brandbar {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 28px !important;
    padding-top: 24px !important;
    border-top: 1px solid rgba(255,255,255,.12) !important;
  }

  .footer-social {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
  }

  .footer-social a {
    width: 32px !important;
    height: 32px !important;
    padding: 0 !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 50% !important;
    border: 1px solid rgba(255,255,255,.16) !important;
    background: rgba(255,255,255,.05) !important;
    color: transparent !important;
  }

  .footer-social a::before {
    color: #fff !important;
    font-size: 13px !important;
  }

  .dji-footer .footer-legal {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 20px !important;
    padding-top: 20px !important;
  }

  .footer-records {
    display: flex !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    gap: 0 !important;
    min-width: 0 !important;
    overflow-x: auto !important;
    white-space: nowrap !important;
    scrollbar-width: none !important;
  }

  .footer-records::-webkit-scrollbar {
    display: none !important;
  }

  .footer-records a,
  .footer-records span {
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    white-space: nowrap !important;
    color: rgba(255,255,255,.50) !important;
  }

  .footer-records a:not(:last-child)::after,
  .footer-records span:not(:last-child)::after {
    content: "|" !important;
    margin: 0 20px !important;
    color: rgba(255,255,255,.18) !important;
  }

  .footer-records .footer-copyright::before,
  .footer-records .footer-tagline::before {
    content: none !important;
  }
}

@media (min-width: 1024px) and (max-width: 1360px) {
  :root {
    --sws-x: 34px;
    --sws-max: min(1180px, calc(100vw - 68px));
    --sws-title: clamp(32px, 2.8vw, 40px);
    --sws-title-tight: clamp(30px, 2.5vw, 38px);
    --sws-card-title: clamp(20px, 1.55vw, 24px);
    --sws-body: 13px;
  }

  #services.ai-origin,
  #scenarios.ai-solutions,
  #capability.core-tech-section,
  #training.ai-delivery,
  #resources.ai-resources,
  #about.ai-about {
    padding-top: 82px !important;
    padding-bottom: 36px !important;
  }

  #services .infrastructure-section,
  #capability .capability-stage,
  #training .delivery-stage,
  #resources .resource-stage,
  #about .about-stage {
    height: calc(100svh - 118px) !important;
  }

  #services .infra-showcase {
    gap: 14px !important;
  }

  #services .infra-module:first-child {
    padding: 26px !important;
    grid-template-columns: minmax(0, .62fr) 210px !important;
  }

  #services .infra-module:first-child .infra-visual-base {
    width: 220px !important;
    height: 220px !important;
  }

  #services .infra-module:not(:first-child) {
    grid-template-columns: minmax(0, 1fr) 96px !important;
    padding: 18px 22px !important;
  }

  #services .infra-module:not(:first-child) .infra-visual,
  #services .infra-module:not(:first-child) .infra-visual img {
    width: 96px !important;
    height: 96px !important;
    min-width: 96px !important;
  }

  #scenarios.ai-solutions {
    grid-template-columns: minmax(255px, .30fr) minmax(0, .70fr) !important;
    gap: 28px !important;
  }

  #scenarios .solution-board {
    height: min(490px, calc(100svh - 132px)) !important;
    min-height: 400px !important;
    gap: 12px !important;
  }

  #scenarios .solution-card {
    padding: 18px !important;
  }

  #scenarios .solution-visual {
    width: 64px !important;
    height: 64px !important;
    right: 14px !important;
    top: 14px !important;
  }

  #capability .capability-stage {
    grid-template-columns: minmax(380px, .40fr) minmax(0, .60fr) !important;
    gap: 36px !important;
  }

  #capability .tech-console.core-card-grid {
    height: min(500px, calc(100svh - 140px)) !important;
    min-height: 420px !important;
  }

  #capability .core-tech-card {
    padding: 20px !important;
  }

  #training .delivery-track,
  #resources .resource-panels {
    min-height: 380px !important;
  }
}

@media (max-width: 1023px) {
  .ai-home > .ai-section {
    height: auto !important;
    min-height: auto !important;
    padding: 72px 22px !important;
    overflow: visible !important;
  }

  #services .infrastructure-section,
  #capability .capability-stage,
  #training .delivery-stage,
  #resources .resource-stage,
  #about .about-stage {
    width: 100% !important;
    height: auto !important;
    display: block !important;
    padding: 0 !important;
  }

  #services .infra-showcase,
  #scenarios .solution-board,
  #capability .tech-console.core-card-grid,
  #training .delivery-track,
  #resources .resource-panels {
    height: auto !important;
    min-height: 0 !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 14px !important;
    margin-top: 28px !important;
  }
}

/* 2026-05-30 rhythm18: whole-homepage visual rhythm rebuild.
   Goal: keep the approved carousel intact, then give every following screen
   its own structure, color temperature, density, and motion. */
@media (min-width: 1024px) {
  :root {
    --sws-max: min(1320px, calc(100vw - 120px));
    --sws-x: max(48px, calc((100vw - 1320px) / 2 + 60px));
    --sws-radius: 14px;
    --sws-title: clamp(34px, 2.45vw, 46px);
    --sws-title-tight: clamp(32px, 2.2vw, 42px);
    --sws-card-title: clamp(23px, 1.65vw, 30px);
    --sws-body: 15px;
    --sws-muted: #8bbfaa;
    --sws-green: #22e0a2;
    --sws-green-soft: #5dcaa5;
  }

  .ai-home {
    background: #020605 !important;
  }

  .ai-home > .ai-section {
    position: relative !important;
    isolation: isolate !important;
    overflow: hidden !important;
    min-height: 100svh !important;
    padding: 0 var(--sws-x) !important;
    border-top: 1px solid rgba(93, 202, 165, .08) !important;
  }

  .ai-home > .ai-section::after {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: -1 !important;
    pointer-events: none !important;
    background-image:
      linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px) !important;
    background-size: 72px 72px !important;
    mask-image: radial-gradient(circle at 50% 48%, #000 0 42%, transparent 76%) !important;
    opacity: .55 !important;
  }

  .ai-home .section-mark,
  .ai-home .core-badge,
  .ai-home .infra-pill,
  .ai-home .solution-badge {
    border-radius: 999px !important;
    border: 1px solid rgba(34, 224, 162, .72) !important;
    background: rgba(34, 224, 162, .045) !important;
    color: #9fe1cb !important;
    letter-spacing: 3px !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    line-height: 1 !important;
  }

  .ai-home h2 {
    letter-spacing: 0 !important;
  }

  .ai-home p {
    color: var(--sws-muted) !important;
  }

  /* Screen 2: product platform becomes a dense, cinematic infrastructure panel. */
  #services.ai-origin {
    background:
      radial-gradient(circle at 76% 30%, rgba(34,224,162,.18), transparent 33%),
      radial-gradient(circle at 18% 74%, rgba(34,224,162,.08), transparent 28%),
      linear-gradient(180deg, #020705 0%, #03110b 52%, #020705 100%) !important;
    min-height: 100svh !important;
  }

  #services .services-depth-field {
    opacity: .42 !important;
    filter: saturate(1.2) contrast(1.05) !important;
  }

  #services .infrastructure-section {
    width: var(--sws-max) !important;
    height: 100svh !important;
    min-height: 760px !important;
    max-height: 920px !important;
    margin: 0 auto !important;
    padding: 92px 0 48px !important;
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
    gap: 34px !important;
  }

  #services .infra-hero {
    width: min(780px, 100%) !important;
    margin: 0 auto !important;
    text-align: center !important;
  }

  #services .infra-pill {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    padding: 9px 22px !important;
    margin: 0 0 16px !important;
  }

  #services .infra-pill span {
    color: var(--sws-green) !important;
  }

  #services .infra-hero h2 {
    margin: 0 !important;
    color: #fff !important;
    font-size: var(--sws-title) !important;
    font-weight: 650 !important;
    line-height: 1.12 !important;
  }

  #services .infra-hero p {
    max-width: 720px !important;
    margin: 14px auto 0 !important;
    color: #5dcaa5 !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    line-height: 1.7 !important;
  }

  #services .infra-metrics {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    width: min(560px, 100%) !important;
    margin: 22px auto 0 !important;
    padding-top: 18px !important;
    border-top: 1px solid rgba(34,224,162,.2) !important;
    background: none !important;
  }

  #services .infra-metrics span {
    display: grid !important;
    justify-items: center !important;
    gap: 4px !important;
    color: rgba(159,225,203,.72) !important;
    font-size: 12px !important;
    border-right: 1px solid rgba(255,255,255,.12) !important;
  }

  #services .infra-metrics span:last-child {
    border-right: 0 !important;
  }

  #services .infra-metrics strong {
    color: #dffbf2 !important;
    font-size: 24px !important;
    line-height: 1 !important;
  }

  #services .infra-pills {
    display: none !important;
  }

  #services .infra-showcase {
    position: relative !important;
    height: 100% !important;
    min-height: 0 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1.08fr) minmax(420px, .92fr) !important;
    grid-template-rows: repeat(3, minmax(0, 1fr)) !important;
    gap: 18px 22px !important;
  }

  #services .infra-module {
    position: relative !important;
    min-height: 0 !important;
    border-radius: var(--sws-radius) !important;
    border: 1px solid rgba(255,255,255,.13) !important;
    background:
      linear-gradient(135deg, rgba(255,255,255,.05), rgba(255,255,255,.008) 48%, rgba(34,224,162,.06)),
      rgba(255,255,255,.02) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.09), 0 28px 84px rgba(0,0,0,.26) !important;
    backdrop-filter: blur(20px) saturate(1.15) !important;
    overflow: hidden !important;
    transition: transform .35s ease, border-color .35s ease, box-shadow .35s ease !important;
  }

  #services .infra-module:hover {
    transform: translateY(-4px) !important;
    border-color: rgba(34,224,162,.55) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.13), 0 34px 100px rgba(34,224,162,.1) !important;
  }

  #services .infra-module:first-child {
    grid-row: 1 / 4 !important;
    display: grid !important;
    grid-template-columns: minmax(0, .58fr) minmax(290px, .42fr) !important;
    align-items: stretch !important;
    padding: 34px 34px 30px !important;
  }

  #services .infra-module:not(:first-child) {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 136px !important;
    align-items: center !important;
    gap: 24px !important;
    padding: 28px 30px !important;
  }

  #services .infra-module:first-child::after {
    content: "" !important;
    position: absolute !important;
    width: 260px !important;
    height: 260px !important;
    right: -70px !important;
    bottom: -90px !important;
    border-radius: 50% !important;
    background: radial-gradient(circle, rgba(34,224,162,.22), transparent 66%) !important;
    filter: blur(18px) !important;
  }

  #services .infra-copy {
    position: relative !important;
    z-index: 2 !important;
    min-width: 0 !important;
  }

  #services .infra-copy > span {
    display: inline-flex !important;
    align-items: center !important;
    gap: 14px !important;
    color: var(--sws-green-soft) !important;
    font-size: 12px !important;
    font-weight: 650 !important;
    letter-spacing: 1.4px !important;
    margin-bottom: 16px !important;
  }

  #services .infra-copy > span::after {
    content: "" !important;
    width: 48px !important;
    height: 1px !important;
    background: rgba(34,224,162,.45) !important;
  }

  #services .infra-copy h3 {
    margin: 0 0 22px !important;
    color: #f4fff9 !important;
    font-size: var(--sws-card-title) !important;
    font-weight: 650 !important;
    line-height: 1.16 !important;
  }

  #services .infra-copy h3::after {
    content: "" !important;
    display: block !important;
    width: 48px !important;
    height: 3px !important;
    margin-top: 18px !important;
    background: var(--sws-green) !important;
  }

  #services .infra-copy p {
    max-width: 520px !important;
    color: #8bbfaa !important;
    font-size: var(--sws-body) !important;
    line-height: 1.9 !important;
    margin: 0 !important;
  }

  #services .infra-copy ul {
    margin-top: 30px !important;
    display: grid !important;
    gap: 12px !important;
  }

  #services .infra-copy li {
    color: rgba(255,255,255,.88) !important;
    font-size: 14px !important;
  }

  #services .infra-copy li::before {
    border-color: var(--sws-green) !important;
    box-shadow: 0 0 14px rgba(34,224,162,.35) !important;
  }

  #services .infra-module:not(:first-child) .infra-copy h3 {
    margin-bottom: 12px !important;
  }

  #services .infra-module:not(:first-child) .infra-copy h3::after {
    display: none !important;
  }

  #services .infra-visual {
    position: relative !important;
    z-index: 2 !important;
    justify-self: end !important;
    align-self: center !important;
    display: grid !important;
    place-items: center !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
  }

  #services .infra-visual img {
    display: block !important;
    object-fit: contain !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    filter: saturate(1.04) brightness(1.08) drop-shadow(0 0 24px rgba(34,224,162,.34)) !important;
    mix-blend-mode: screen !important;
  }

  #services .infra-module:not(:first-child) .infra-visual,
  #services .infra-module:not(:first-child) .infra-visual img {
    width: 136px !important;
    height: 136px !important;
    min-width: 136px !important;
  }

  #services .infra-visual-base {
    position: absolute !important;
    right: 36px !important;
    bottom: 28px !important;
    width: 270px !important;
    height: 270px !important;
  }

  #services .infra-visual-base .infra-orb-static {
    display: block !important;
    position: absolute !important;
    left: 50% !important;
    bottom: 3px !important;
    width: 210px !important;
    height: 52px !important;
    transform: translateX(-50%) scaleX(1.08) !important;
    opacity: .38 !important;
    filter: blur(13px) saturate(.8) !important;
    mix-blend-mode: screen !important;
    object-position: center bottom !important;
    clip-path: ellipse(46% 14% at 50% 86%) !important;
    animation: none !important;
  }

  #services .infra-visual-base .infra-orb-spin {
    display: block !important;
    position: absolute !important;
    left: 50% !important;
    top: 48% !important;
    width: 220px !important;
    height: 220px !important;
    transform-origin: 50% 50% !important;
    transform-style: preserve-3d !important;
    animation: swsOrbSpin18 12s linear infinite !important;
    clip-path: circle(46% at 50% 48%) !important;
  }

  #services .infra-visual-base img.infra-orb-spin {
    display: block !important;
  }

  #services .infra-visual-base::before {
    content: "" !important;
    position: absolute !important;
    left: 50% !important;
    top: 48% !important;
    z-index: 1 !important;
    width: 218px !important;
    height: 218px !important;
    transform: translate(-50%, -50%) !important;
    border-radius: 50% !important;
    pointer-events: none !important;
    background:
      radial-gradient(circle at 30% 22%, rgba(255,255,255,.42), transparent 12%),
      radial-gradient(circle at 62% 66%, rgba(255,255,255,.18), transparent 15%),
      linear-gradient(90deg, transparent 46%, rgba(255,255,255,.22) 49%, transparent 52%) !important;
    mix-blend-mode: screen !important;
    opacity: .55 !important;
  }

  #services .infra-visual-base::after {
    content: "" !important;
    position: absolute !important;
    left: 50% !important;
    bottom: 18px !important;
    width: 190px !important;
    height: 38px !important;
    transform: translateX(-50%) !important;
    border-radius: 50% !important;
    background: radial-gradient(ellipse, rgba(34,224,162,.33), rgba(34,224,162,.08) 52%, transparent 74%) !important;
    filter: blur(5px) !important;
    pointer-events: none !important;
  }

  @keyframes swsOrbSpin18 {
    0% { transform: translate(-50%, -50%) rotateY(0deg) rotateZ(-1deg) scale(1); }
    50% { transform: translate(-50%, -50%) rotateY(180deg) rotateZ(1deg) scale(1.015); }
    100% { transform: translate(-50%, -50%) rotateY(360deg) rotateZ(-1deg) scale(1); }
  }

  /* Screen 3: solution matrix, true bento and clearer content density. */
  #scenarios.ai-solutions {
    background:
      radial-gradient(circle at 86% 12%, rgba(34,224,162,.08), transparent 32%),
      linear-gradient(135deg, rgba(255,255,255,.035) 0 1px, transparent 1px 100%),
      linear-gradient(180deg, #050605 0%, #080907 100%) !important;
    background-size: auto, 140px 140px, auto !important;
    display: grid !important;
    grid-template-columns: minmax(310px, .31fr) minmax(0, .69fr) !important;
    align-items: center !important;
    gap: 38px !important;
    min-height: 100svh !important;
    padding-top: 92px !important;
    padding-bottom: 56px !important;
  }

  #scenarios .solution-glow {
    opacity: .32 !important;
    filter: blur(24px) !important;
  }

  #scenarios .solution-hero {
    position: relative !important;
    z-index: 2 !important;
    min-width: 0 !important;
  }

  #scenarios .solution-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 9px 18px !important;
    margin: 0 0 26px !important;
  }

  #scenarios .solution-badge span {
    color: var(--sws-green) !important;
  }

  #scenarios .solution-hero h2 {
    max-width: 420px !important;
    margin: 0 !important;
    color: #f7fff9 !important;
    font-size: clamp(38px, 3vw, 54px) !important;
    font-weight: 650 !important;
    line-height: 1.18 !important;
    letter-spacing: 0 !important;
  }

  #scenarios .solution-subtitle {
    max-width: 410px !important;
    margin: 24px 0 0 !important;
    color: rgba(159,225,203,.82) !important;
    font-size: 15px !important;
    line-height: 1.85 !important;
  }

  #scenarios .solution-stats {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 10px !important;
    margin-top: 28px !important;
    max-width: 390px !important;
  }

  #scenarios .solution-stats span {
    height: 42px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    border: 1px solid rgba(34,224,162,.3) !important;
    border-radius: 999px !important;
    background: rgba(34,224,162,.035) !important;
    color: rgba(159,225,203,.74) !important;
    font-size: 12px !important;
  }

  #scenarios .solution-stats strong {
    color: #eafff8 !important;
    font-size: 17px !important;
  }

  #scenarios .solution-divider {
    display: none !important;
  }

  #scenarios .solution-board {
    position: relative !important;
    z-index: 2 !important;
    height: min(620px, calc(100svh - 150px)) !important;
    min-height: 500px !important;
    display: grid !important;
    grid-template-columns: 1.25fr .86fr .86fr !important;
    grid-template-rows: 1fr .55fr !important;
    gap: 16px !important;
  }

  #scenarios .solution-card {
    position: relative !important;
    min-height: 0 !important;
    padding: 24px !important;
    border-radius: var(--sws-radius) !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
    overflow: hidden !important;
    background:
      linear-gradient(145deg, rgba(34,224,162,.1), rgba(255,255,255,.018) 44%, rgba(0,0,0,.18)),
      rgba(6, 24, 15, .82) !important;
    border: 1px solid rgba(34,224,162,.22) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.06) !important;
    transition: transform .35s ease, border-color .35s ease, background .35s ease !important;
  }

  #scenarios .solution-card:first-child {
    grid-row: span 2 !important;
    padding: 34px !important;
  }

  #scenarios .solution-card:nth-child(3) {
    background:
      linear-gradient(145deg, rgba(34,224,162,.06), rgba(255,255,255,.012)),
      rgba(5, 18, 13, .9) !important;
  }

  #scenarios .solution-card:nth-child(n+4) {
    justify-content: center !important;
  }

  #scenarios .solution-card:hover {
    transform: translateY(-4px) !important;
    border-color: rgba(34,224,162,.62) !important;
    background:
      linear-gradient(145deg, rgba(34,224,162,.15), rgba(255,255,255,.025) 46%, rgba(0,0,0,.1)),
      rgba(8, 32, 20, .9) !important;
  }

  #scenarios .solution-visual {
    position: absolute !important;
    top: 24px !important;
    left: 24px !important;
    width: 74px !important;
    height: 74px !important;
    opacity: .95 !important;
    transform: none !important;
  }

  #scenarios .solution-card:first-child .solution-visual {
    width: 122px !important;
    height: 122px !important;
  }

  #scenarios .solution-icon {
    width: 100% !important;
    height: 100% !important;
    stroke: var(--sws-green) !important;
    stroke-width: 3 !important;
    filter: drop-shadow(0 0 22px rgba(34,224,162,.38)) !important;
  }

  #scenarios .solution-content {
    position: relative !important;
    z-index: 2 !important;
    padding-top: 120px !important;
  }

  #scenarios .solution-card:not(:first-child) .solution-content {
    padding-top: 76px !important;
  }

  #scenarios .solution-content span {
    color: var(--sws-green) !important;
    font-size: 13px !important;
    letter-spacing: 4px !important;
    margin-bottom: 18px !important;
  }

  #scenarios .solution-content h3 {
    min-height: 0 !important;
    margin: 0 0 12px !important;
    color: #f4fff9 !important;
    font-size: clamp(21px, 1.45vw, 26px) !important;
    line-height: 1.26 !important;
    font-weight: 650 !important;
  }

  #scenarios .solution-content p {
    margin: 0 !important;
    color: rgba(159,225,203,.78) !important;
    font-size: 14px !important;
    line-height: 1.75 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 3 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }

  #scenarios .solution-card:nth-child(n+4) .solution-content p {
    -webkit-line-clamp: 2 !important;
  }

  /* Screen 4: blue-black technology zone, less empty and more system-like. */
  #capability.core-tech-section {
    background:
      radial-gradient(circle at 72% 42%, rgba(29,158,117,.1), transparent 34%),
      radial-gradient(circle at 20% 24%, rgba(55,126,255,.08), transparent 28%),
      linear-gradient(180deg, #04111e 0%, #061a24 100%) !important;
    min-height: 100svh !important;
    padding-top: 96px !important;
    padding-bottom: 58px !important;
  }

  #capability .capability-stage {
    width: var(--sws-max) !important;
    height: calc(100svh - 154px) !important;
    min-height: 600px !important;
    max-height: 780px !important;
    margin: 0 auto !important;
    display: grid !important;
    grid-template-columns: minmax(470px, .44fr) minmax(0, .56fr) !important;
    align-items: center !important;
    gap: 56px !important;
  }

  #capability .capability-copy {
    max-width: 620px !important;
  }

  #capability .core-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 9px 18px !important;
    margin-bottom: 28px !important;
  }

  #capability .capability-copy h2 {
    max-width: 720px !important;
    margin: 0 0 24px !important;
    color: #fff !important;
    font-size: clamp(38px, 3vw, 56px) !important;
    line-height: 1.18 !important;
    font-weight: 650 !important;
    word-break: keep-all !important;
    overflow-wrap: normal !important;
  }

  #capability .capability-copy h2 br {
    display: none !important;
  }

  #capability .capability-copy p {
    max-width: 590px !important;
    color: rgba(159,225,203,.78) !important;
    font-size: 15px !important;
    line-height: 1.9 !important;
  }

  #capability .core-cta {
    margin-top: 28px !important;
    border-radius: 10px !important;
    height: 48px !important;
    padding: 0 26px !important;
    display: inline-flex !important;
    align-items: center !important;
  }

  #capability .tech-console.core-card-grid {
    height: min(620px, 100%) !important;
    min-height: 520px !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 18px !important;
    padding: 18px !important;
    border-radius: var(--sws-radius) !important;
    background: linear-gradient(145deg, rgba(255,255,255,.055), rgba(255,255,255,.015)) !important;
    border: 1px solid rgba(255,255,255,.07) !important;
    box-shadow: 0 32px 90px rgba(0,0,0,.24) !important;
  }

  #capability .core-tech-card {
    min-height: 0 !important;
    border-radius: 12px !important;
    padding: 26px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    background: rgba(0, 40, 24, .72) !important;
    border-color: rgba(34,224,162,.18) !important;
  }

  #capability .tech-icon {
    width: 46px !important;
    height: 46px !important;
    margin-bottom: 22px !important;
    stroke-width: 1.7 !important;
    filter: drop-shadow(0 0 22px rgba(34,224,162,.34)) !important;
  }

  #capability .core-tech-card h3 {
    font-size: 22px !important;
    line-height: 1.25 !important;
  }

  #capability .core-tech-card p {
    font-size: 14px !important;
    color: var(--sws-green-soft) !important;
  }

  #capability .core-tech-card em {
    max-height: none !important;
    color: rgba(139,191,170,.64) !important;
    font-size: 12px !important;
    line-height: 1.7 !important;
  }

  /* Screen 5: delivery as a timeline, not another card deck. */
  #training.ai-delivery {
    background:
      radial-gradient(circle at 72% 28%, rgba(34,224,162,.1), transparent 30%),
      linear-gradient(180deg, #0c0c0c 0%, #101312 100%) !important;
    padding-top: 98px !important;
    padding-bottom: 68px !important;
  }

  #training .delivery-stage {
    width: var(--sws-max) !important;
    min-height: calc(100svh - 166px) !important;
    margin: 0 auto !important;
    display: grid !important;
    grid-template-columns: .36fr .64fr !important;
    gap: 60px !important;
    align-items: center !important;
  }

  #training .stage-head {
    text-align: left !important;
    margin: 0 !important;
    max-width: 430px !important;
  }

  #training .stage-head h2 {
    margin: 22px 0 18px !important;
    font-size: var(--sws-title-tight) !important;
    line-height: 1.2 !important;
  }

  #training .stage-head p {
    font-size: 15px !important;
    line-height: 1.9 !important;
  }

  #training .delivery-track {
    position: relative !important;
    min-height: 560px !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 0 !important;
    padding-left: 52px !important;
  }

  #training .delivery-track::before {
    content: "" !important;
    position: absolute !important;
    left: 18px !important;
    top: 24px !important;
    bottom: 24px !important;
    width: 1px !important;
    background: linear-gradient(180deg, transparent, var(--sws-green), transparent) !important;
  }

  #training .delivery-track article {
    position: relative !important;
    min-height: 0 !important;
    padding: 24px 28px !important;
    border-radius: 12px !important;
    background: rgba(255,255,255,.025) !important;
    border: 1px solid rgba(255,255,255,.09) !important;
    display: grid !important;
    grid-template-columns: 52px minmax(0, 1fr) !important;
    align-items: center !important;
    column-gap: 20px !important;
  }

  #training .delivery-track article::before {
    content: "" !important;
    position: absolute !important;
    left: -42px !important;
    top: 50% !important;
    width: 13px !important;
    height: 13px !important;
    border-radius: 50% !important;
    transform: translateY(-50%) !important;
    background: var(--sws-green) !important;
    box-shadow: 0 0 22px rgba(34,224,162,.55) !important;
  }

  #training .delivery-icon {
    width: 42px !important;
    height: 42px !important;
    grid-row: span 3 !important;
  }

  #training .delivery-track article h3 {
    font-size: 23px !important;
    margin: 0 !important;
  }

  #training .delivery-track article p {
    margin: 8px 0 0 !important;
    font-size: 14px !important;
    line-height: 1.75 !important;
  }

  /* Screen 6: resources become a platform console with menu + live panel. */
  #resources.ai-resources {
    background:
      radial-gradient(circle at 16% 18%, rgba(34,224,162,.09), transparent 34%),
      linear-gradient(180deg, #06110d 0%, #08150f 100%) !important;
    padding-top: 98px !important;
    padding-bottom: 70px !important;
  }

  #resources .resource-stage {
    width: var(--sws-max) !important;
    min-height: calc(100svh - 168px) !important;
    margin: 0 auto !important;
    display: grid !important;
    grid-template-columns: .38fr .62fr !important;
    gap: 70px !important;
    align-items: center !important;
  }

  #resources .resource-main {
    max-width: 480px !important;
  }

  #resources .resource-main h2 {
    margin: 22px 0 18px !important;
    font-size: var(--sws-title-tight) !important;
    line-height: 1.18 !important;
  }

  #resources .resource-tabs {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    margin-top: 32px !important;
    max-width: 280px !important;
  }

  #resources .resource-tabs button {
    width: 100% !important;
    justify-content: flex-start !important;
    height: 48px !important;
    border-radius: 10px !important;
  }

  #resources .resource-panels {
    display: grid !important;
    gap: 18px !important;
    min-height: 520px !important;
  }

  #resources .resource-panels article {
    border-radius: 14px !important;
    padding: 30px !important;
    min-height: 0 !important;
  }

  #resources .resource-panels article.is-active {
    min-height: 230px !important;
    grid-row: span 2 !important;
  }

  #resources .resource-icon {
    width: 46px !important;
    height: 46px !important;
    margin-bottom: 22px !important;
  }

  /* Screen 7: about is a brand film frame. */
  #about.ai-about {
    background:
      radial-gradient(circle at 75% 45%, rgba(34,224,162,.09), transparent 34%),
      linear-gradient(180deg, #060806 0%, #020302 100%) !important;
    padding-top: 92px !important;
    padding-bottom: 78px !important;
  }

  #about .about-stage {
    width: var(--sws-max) !important;
    min-height: calc(100svh - 170px) !important;
    margin: 0 auto !important;
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
    gap: 44px !important;
  }

  #about .about-narrative-center {
    text-align: center !important;
  }

  #about .about-narrative-center h2 {
    font-size: var(--sws-title-tight) !important;
    line-height: 1.2 !important;
  }

  #about .about-video-frame {
    min-height: 420px !important;
    height: 100% !important;
    border-radius: 14px !important;
  }

  /* Footer remains practical and dense, but visually tied back to the brand. */
  .dji-footer {
    background:
      linear-gradient(180deg, #07140d 0%, #202020 18%, #222 100%) !important;
  }

  .footer-records {
    flex: 1 1 auto !important;
  }
}

.footer-records {
  display: flex !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  white-space: nowrap !important;
  overflow-x: auto !important;
  scrollbar-width: none !important;
}

.footer-records::-webkit-scrollbar {
  display: none !important;
}

.footer-records a,
.footer-records span {
  display: inline-flex !important;
  align-items: center !important;
  flex: 0 0 auto !important;
}

.footer-records .footer-copyright::before,
.footer-records .footer-tagline::before {
  content: none !important;
}

@media (min-width: 1024px) and (max-width: 1360px) {
  :root {
    --sws-max: min(1180px, calc(100vw - 68px));
    --sws-x: 34px;
    --sws-title: clamp(31px, 2.55vw, 39px);
    --sws-title-tight: clamp(30px, 2.35vw, 38px);
    --sws-card-title: clamp(20px, 1.55vw, 25px);
    --sws-body: 13px;
  }

  #services .infrastructure-section {
    min-height: 690px !important;
    padding-top: 78px !important;
    gap: 22px !important;
  }

  #services .infra-showcase {
    grid-template-columns: minmax(0, 1.02fr) minmax(360px, .98fr) !important;
    gap: 14px 16px !important;
  }

  #services .infra-module:first-child {
    grid-template-columns: minmax(0, .62fr) 230px !important;
    padding: 26px !important;
  }

  #services .infra-visual-base {
    right: 12px !important;
    bottom: 18px !important;
    width: 236px !important;
    height: 236px !important;
  }

  #services .infra-visual-base .infra-orb-spin {
    width: 194px !important;
    height: 194px !important;
  }

  #services .infra-module:not(:first-child) {
    grid-template-columns: minmax(0, 1fr) 104px !important;
    gap: 14px !important;
    padding: 18px 20px !important;
  }

  #services .infra-module:not(:first-child) .infra-visual,
  #services .infra-module:not(:first-child) .infra-visual img {
    width: 104px !important;
    height: 104px !important;
    min-width: 104px !important;
  }

  #scenarios.ai-solutions {
    grid-template-columns: minmax(270px, .30fr) minmax(0, .70fr) !important;
    gap: 26px !important;
    padding-top: 78px !important;
    padding-bottom: 42px !important;
  }

  #scenarios .solution-board {
    height: min(520px, calc(100svh - 120px)) !important;
    min-height: 450px !important;
    gap: 12px !important;
  }

  #scenarios .solution-card {
    padding: 18px !important;
  }

  #scenarios .solution-card:first-child {
    padding: 24px !important;
  }

  #scenarios .solution-visual {
    width: 58px !important;
    height: 58px !important;
    top: 18px !important;
    left: 18px !important;
  }

  #scenarios .solution-card:first-child .solution-visual {
    width: 90px !important;
    height: 90px !important;
  }

  #scenarios .solution-content {
    padding-top: 82px !important;
  }

  #scenarios .solution-card:not(:first-child) .solution-content {
    padding-top: 58px !important;
  }

  #capability .capability-stage,
  #training .delivery-stage,
  #resources .resource-stage {
    min-height: 560px !important;
  }
}

@media (max-width: 1023px) {
  #services .infra-visual-base {
    position: relative !important;
    width: 220px !important;
    height: 220px !important;
    margin: 24px auto 0 !important;
  }

  #services .infra-visual-base .infra-orb-static {
    display: none !important;
  }

  #services .infra-visual-base .infra-orb-spin {
    display: block !important;
    animation: swsOrbSpin18 12s linear infinite !important;
    clip-path: circle(46% at 50% 48%) !important;
    mix-blend-mode: screen !important;
  }

  #services .infra-visual-base img.infra-orb-static {
    display: none !important;
  }

  #services .infra-visual-base img.infra-orb-spin {
    display: block !important;
  }

  #services .infra-metrics {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    margin-top: 20px !important;
  }

  #scenarios .solution-hero h2,
  #capability .capability-copy h2,
  #training .stage-head h2,
  #resources .resource-main h2,
  #about .about-narrative-center h2 {
    font-size: clamp(30px, 8vw, 42px) !important;
    line-height: 1.22 !important;
  }
}

/* 2026-05-30 rhythm21: terminal override, must stay at EOF. */
body {
  background:
    radial-gradient(circle at 12% 8%, rgba(29, 158, 117, .10), transparent 28%),
    radial-gradient(circle at 86% 18%, rgba(33, 94, 154, .09), transparent 34%),
    #020706 !important;
}

.ai-home {
  background: #020706 !important;
}

.ai-section {
  position: relative !important;
  isolation: isolate !important;
  overflow: hidden !important;
}

.ai-section::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: -2 !important;
  pointer-events: none !important;
  background-image: radial-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px) !important;
  background-size: 12px 12px !important;
  opacity: .18 !important;
}

.ai-section::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: -1 !important;
  pointer-events: none !important;
  background:
    radial-gradient(circle at 75% 32%, rgba(32, 229, 163, .12), transparent 34%),
    linear-gradient(180deg, rgba(255,255,255,.025), transparent 20%, transparent 82%, rgba(255,255,255,.018)) !important;
}

#services.ai-origin {
  background:
    radial-gradient(circle at 76% 30%, rgba(29, 158, 117, .18), transparent 30%),
    linear-gradient(180deg, #06160f 0%, #020706 100%) !important;
}

#scenarios.ai-solutions {
  background:
    linear-gradient(125deg, rgba(0, 0, 0, .98) 0%, rgba(4, 13, 10, .98) 47%, rgba(9, 27, 17, .98) 100%) !important;
}

#capability.core-tech-section {
  background:
    radial-gradient(circle at 66% 48%, rgba(31, 95, 154, .16), transparent 38%),
    linear-gradient(180deg, #04111e 0%, #07121b 54%, #04090e 100%) !important;
}

#training.premium-delivery {
  background: linear-gradient(180deg, #090909 0%, #10100f 52%, #050706 100%) !important;
}

#resources.premium-resources,
#about.premium-about {
  background:
    radial-gradient(circle at 72% 38%, rgba(29, 158, 117, .16), transparent 35%),
    linear-gradient(180deg, #06150d 0%, #07100d 100%) !important;
}

#services .infrastructure-section,
#capability .capability-stage,
#training .delivery-stage,
#resources .resource-stage,
#about .about-stage {
  width: min(1440px, calc(100vw - 112px)) !important;
  margin-inline: auto !important;
}

#services .infrastructure-section {
  min-height: calc(100svh - 84px) !important;
  padding: clamp(58px, 6vh, 76px) 0 clamp(38px, 5vh, 56px) !important;
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
  gap: clamp(22px, 3vh, 32px) !important;
}

#services .infra-hero {
  width: min(780px, 100%) !important;
  margin-inline: auto !important;
  padding: 0 !important;
  text-align: center !important;
}

#services .infra-pill,
#scenarios .solution-badge,
#capability .core-badge,
#training .section-mark,
#resources .section-mark,
#about .section-mark {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  min-height: 34px !important;
  padding: 0 22px !important;
  border: 1px solid rgba(32, 229, 163, .58) !important;
  border-radius: 999px !important;
  background: rgba(32, 229, 163, .035) !important;
  color: #9fe1cb !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  letter-spacing: .5px !important;
}

#services .infra-hero h2,
#scenarios .solution-hero h2,
#capability .capability-copy h2,
#training .stage-head h2,
#resources .resource-main h2,
#about .about-narrative-center h2 {
  color: #f5fff9 !important;
  font-size: clamp(36px, 3.45vw, 54px) !important;
  font-weight: 650 !important;
  line-height: 1.12 !important;
  letter-spacing: 0 !important;
}

#services .infra-hero h2 {
  margin: 16px 0 10px !important;
}

#services .infra-hero p,
#scenarios .solution-subtitle,
#capability .capability-copy > p,
#training .stage-head p,
#resources .resource-main > p,
#about .about-narrative-center p {
  color: #98c7b2 !important;
  font-size: 16px !important;
  line-height: 1.8 !important;
}

#services .infra-metrics {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  width: min(520px, 100%) !important;
  margin: 18px auto 0 !important;
  border-top: 1px solid rgba(32, 229, 163, .14) !important;
}

#services .infra-metrics span {
  display: grid !important;
  gap: 4px !important;
  padding: 18px 18px 0 !important;
  color: rgba(152, 199, 178, .72) !important;
  font-size: 12px !important;
  text-align: center !important;
  border-right: 1px solid rgba(255, 255, 255, .10) !important;
}

#services .infra-metrics span:last-child {
  border-right: 0 !important;
}

#services .infra-metrics strong {
  color: #20e5a3 !important;
  font-size: 30px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
}

#services .infra-showcase {
  align-self: end !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1.06fr) minmax(430px, .94fr) !important;
  grid-template-rows: repeat(3, minmax(126px, 1fr)) !important;
  gap: 18px 22px !important;
  min-height: 432px !important;
  max-height: min(520px, calc(100svh - 360px)) !important;
}

#services .infra-module {
  position: relative !important;
  overflow: hidden !important;
  border: 1px solid rgba(157, 242, 207, .18) !important;
  border-radius: 16px !important;
  background:
    linear-gradient(115deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .014) 36%, rgba(32, 229, 163, .07)),
    rgba(255, 255, 255, .018) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 26px 80px rgba(0, 0, 0, .36) !important;
  backdrop-filter: blur(22px) saturate(1.12) !important;
  transition: transform .36s ease, border-color .36s ease !important;
}

#services .infra-module:hover,
#services .infra-module:focus-visible {
  transform: translateY(-4px) !important;
  border-color: rgba(32, 229, 163, .62) !important;
}

#services .infra-module:first-child {
  grid-row: 1 / 4 !important;
  display: grid !important;
  grid-template-columns: minmax(0, .60fr) minmax(250px, .40fr) !important;
  align-items: start !important;
  gap: 22px !important;
  padding: clamp(28px, 2.4vw, 38px) !important;
}

#services .infra-module:not(:first-child) {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 130px !important;
  align-items: center !important;
  gap: 20px !important;
  padding: 24px 30px !important;
}

#services .infra-copy {
  position: relative !important;
  z-index: 2 !important;
}

#services .infra-copy span,
#scenarios .solution-card span {
  color: #5dcaa5 !important;
  font-size: 13px !important;
  font-weight: 650 !important;
  letter-spacing: 1px !important;
}

#services .infra-copy h3,
#scenarios .solution-card h3,
#training .delivery-track h3,
#resources .resource-panels h3 {
  color: #f5fff9 !important;
  font-size: clamp(23px, 1.9vw, 34px) !important;
  font-weight: 650 !important;
  line-height: 1.18 !important;
  letter-spacing: 0 !important;
  margin: 14px 0 14px !important;
  white-space: normal !important;
  word-break: keep-all !important;
  overflow: visible !important;
}

#services .infra-module:first-child .infra-copy h3 {
  font-size: clamp(32px, 3vw, 48px) !important;
}

#services .infra-copy p,
#scenarios .solution-card p,
#training .delivery-track p,
#resources .resource-panels p {
  color: #98c7b2 !important;
  font-size: 15px !important;
  line-height: 1.72 !important;
  margin: 0 !important;
}

#services .infra-module:not(:first-child) .infra-copy p {
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

#services .infra-copy ul {
  display: grid !important;
  gap: 10px !important;
  padding: 0 !important;
  margin: 28px 0 0 !important;
  list-style: none !important;
}

#services .infra-copy li {
  position: relative !important;
  padding-left: 24px !important;
  color: rgba(255, 255, 255, .92) !important;
  font-size: 14px !important;
}

#services .infra-copy li::before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  top: .45em !important;
  width: 9px !important;
  height: 9px !important;
  border-radius: 50% !important;
  border: 2px solid #20e5a3 !important;
  box-shadow: 0 0 12px rgba(32, 229, 163, .55) !important;
}

#services .infra-visual {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

#services .infra-module:not(:first-child) .infra-visual,
#services .infra-module:not(:first-child) .infra-visual img {
  width: 128px !important;
  height: 128px !important;
  min-width: 128px !important;
  object-fit: contain !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  mix-blend-mode: screen !important;
  filter: brightness(1.12) saturate(1.08) drop-shadow(0 0 18px rgba(32, 229, 163, .26)) !important;
}

#services .infra-visual-base {
  position: absolute !important;
  right: clamp(22px, 3vw, 48px) !important;
  bottom: clamp(20px, 3vw, 44px) !important;
  width: clamp(220px, 21vw, 315px) !important;
  height: clamp(220px, 21vw, 315px) !important;
  overflow: visible !important;
  pointer-events: none !important;
}

#services .infra-visual-base::after {
  content: "" !important;
  position: absolute !important;
  left: 50% !important;
  bottom: 9% !important;
  width: 74% !important;
  height: 18% !important;
  border-radius: 50% !important;
  transform: translateX(-50%) !important;
  background: radial-gradient(ellipse at center, rgba(32, 229, 163, .34), rgba(32, 229, 163, .08) 50%, transparent 72%) !important;
  filter: blur(1px) !important;
  opacity: .72 !important;
  z-index: 1 !important;
}

#services .infra-visual-base::before {
  content: "" !important;
  position: absolute !important;
  left: 50% !important;
  top: 47% !important;
  width: 68% !important;
  height: 68% !important;
  border-radius: 50% !important;
  background: linear-gradient(100deg, transparent 0 38%, rgba(255,255,255,.28) 45%, transparent 56%) !important;
  mix-blend-mode: screen !important;
  animation: swsOrbLightSweep21 5.8s ease-in-out infinite !important;
  z-index: 4 !important;
}

#services .infra-visual-base img.infra-orb-static {
  display: block !important;
  position: absolute !important;
  left: 50% !important;
  top: 47% !important;
  width: 78% !important;
  height: 78% !important;
  max-width: none !important;
  object-fit: cover !important;
  object-position: 50% 42% !important;
  transform: translate(-50%, -50%) rotate(0deg) !important;
  transform-origin: 50% 50% !important;
  clip-path: circle(45% at 50% 46%) !important;
  mix-blend-mode: screen !important;
  filter: brightness(1.12) saturate(1.12) drop-shadow(0 0 28px rgba(32, 229, 163, .42)) !important;
  opacity: .96 !important;
  z-index: 3 !important;
  animation: swsOrbSurfaceTurn21 17s linear infinite !important;
}

#services .infra-visual-base img.infra-orb-spin {
  display: none !important;
}

@keyframes swsOrbSurfaceTurn21 {
  0% { transform: translate(-50%, -50%) rotate(0deg) scale(1); }
  50% { transform: translate(-50%, -50%) rotate(180deg) scale(1.015); }
  100% { transform: translate(-50%, -50%) rotate(360deg) scale(1); }
}

@keyframes swsOrbLightSweep21 {
  0%, 100% { transform: translate(-84%, -50%) rotate(8deg); opacity: .18; }
  44% { transform: translate(-48%, -50%) rotate(8deg); opacity: .64; }
  72% { transform: translate(-14%, -50%) rotate(8deg); opacity: .22; }
}

#scenarios.ai-solutions {
  width: 100% !important;
  min-height: calc(100svh - 84px) !important;
  padding: clamp(64px, 7vh, 86px) max(44px, calc((100vw - 1440px) / 2 + 56px)) clamp(44px, 5vh, 62px) !important;
  display: grid !important;
  grid-template-columns: minmax(300px, .32fr) minmax(0, .68fr) !important;
  align-items: center !important;
  gap: clamp(36px, 5vw, 72px) !important;
}

#scenarios .solution-hero {
  max-width: 430px !important;
  align-self: center !important;
  padding: 0 !important;
}

#scenarios .solution-hero h2 {
  margin: 28px 0 22px !important;
  max-width: 430px !important;
  font-size: clamp(38px, 4.4vw, 68px) !important;
  line-height: 1.08 !important;
}

#scenarios .solution-subtitle {
  max-width: 400px !important;
  margin: 0 0 28px !important;
}

#scenarios .solution-stats {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px 14px !important;
  margin: 0 !important;
}

#scenarios .solution-stats span {
  display: inline-flex !important;
  align-items: baseline !important;
  gap: 8px !important;
  height: 38px !important;
  padding: 0 16px !important;
  border: 1px solid rgba(32, 229, 163, .28) !important;
  border-radius: 999px !important;
  color: rgba(152, 199, 178, .78) !important;
  background: rgba(255, 255, 255, .018) !important;
}

#scenarios .solution-board {
  display: grid !important;
  grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr)) !important;
  grid-template-rows: repeat(2, minmax(0, 1fr)) !important;
  gap: 16px !important;
  height: min(560px, calc(100svh - 150px)) !important;
  min-height: 500px !important;
}

#scenarios .solution-card {
  position: relative !important;
  min-height: 0 !important;
  padding: 24px !important;
  border-radius: 16px !important;
  border: 1px solid rgba(32, 229, 163, .20) !important;
  background: linear-gradient(145deg, rgba(32, 229, 163, .095), rgba(255,255,255,.015) 42%, rgba(255,255,255,.025)), rgba(2,22,12,.82) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 18px 50px rgba(0,0,0,.30) !important;
  display: flex !important;
  align-items: flex-end !important;
  overflow: hidden !important;
}

#scenarios .solution-card:first-child {
  grid-row: 1 / 3 !important;
  padding: 32px !important;
}

#scenarios .solution-visual {
  display: block !important;
  visibility: visible !important;
  position: absolute !important;
  top: 24px !important;
  left: 24px !important;
  width: 74px !important;
  height: 74px !important;
  opacity: .95 !important;
}

#scenarios .solution-card:first-child .solution-visual {
  width: 120px !important;
  height: 120px !important;
}

#scenarios .solution-icon {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  fill: none !important;
  stroke: #20e5a3 !important;
  stroke-width: 4 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  filter: drop-shadow(0 0 16px rgba(32,229,163,.36)) !important;
}

#scenarios .solution-content {
  position: relative !important;
  z-index: 1 !important;
  width: 100% !important;
  padding-top: 98px !important;
}

#scenarios .solution-card:not(:first-child) .solution-content {
  padding-top: 64px !important;
}

#scenarios .solution-content h3 {
  margin: 14px 0 12px !important;
  font-size: clamp(20px, 1.55vw, 26px) !important;
}

#scenarios .solution-content p {
  display: -webkit-box !important;
  -webkit-line-clamp: 3 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

#capability .capability-stage,
#training .delivery-stage,
#resources .resource-stage,
#about .about-stage {
  min-height: calc(100svh - 84px) !important;
  padding: clamp(74px, 8vh, 104px) 0 !important;
  display: grid !important;
  align-items: center !important;
  gap: clamp(44px, 6vw, 96px) !important;
}

#capability .capability-stage {
  grid-template-columns: minmax(420px, .44fr) minmax(0, .56fr) !important;
}

#capability .capability-copy h2 {
  max-width: 650px !important;
  margin: 30px 0 26px !important;
  font-size: clamp(38px, 3.4vw, 58px) !important;
  line-height: 1.13 !important;
}

#capability .tech-console {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 16px !important;
  padding: 22px !important;
  border-radius: 18px !important;
  background: radial-gradient(circle at 20% 10%, rgba(32,229,163,.12), transparent 28%), rgba(3,18,28,.72) !important;
}

#capability .core-tech-card {
  min-height: 210px !important;
  padding: 28px !important;
  border-radius: 14px !important;
  border: 1px solid rgba(32,229,163,.18) !important;
  background: rgba(3,35,20,.82) !important;
  overflow: hidden !important;
}

#capability .tech-icon {
  display: block !important;
  width: 42px !important;
  height: 42px !important;
  color: #20e5a3 !important;
  stroke: currentColor !important;
  stroke-width: 1.7 !important;
  fill: none !important;
  filter: drop-shadow(0 0 18px rgba(32,229,163,.45)) !important;
  margin-bottom: 20px !important;
}

#capability .core-tech-card h3 {
  color: #f5fff9 !important;
  font-size: 22px !important;
  line-height: 1.25 !important;
  margin: 12px 0 10px !important;
}

#capability .core-tech-card p {
  color: #5dcaa5 !important;
  font-size: 14px !important;
  line-height: 1.65 !important;
}

#capability .core-tech-card em {
  display: block !important;
  margin-top: 14px !important;
  padding-top: 14px !important;
  border-top: 1px solid rgba(32,229,163,.14) !important;
  color: rgba(139,191,170,.60) !important;
  font-size: 13px !important;
  font-style: normal !important;
  line-height: 1.7 !important;
}

#training .delivery-stage,
#resources .resource-stage,
#about .about-stage {
  grid-template-columns: minmax(340px, .40fr) minmax(0, .60fr) !important;
}

#training .stage-head,
#resources .resource-main,
#about .about-narrative-center {
  text-align: left !important;
  max-width: 560px !important;
}

#training .delivery-track {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 18px !important;
  position: relative !important;
}

#training .delivery-track article {
  display: grid !important;
  grid-template-columns: 48px minmax(0, 1fr) !important;
  grid-template-areas: "icon no" "icon title" "icon text" !important;
  column-gap: 22px !important;
  min-height: 112px !important;
  padding: 22px 24px !important;
  border-radius: 14px !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  background: linear-gradient(135deg, rgba(255,255,255,.045), rgba(255,255,255,.012)) !important;
}

#training .delivery-icon {
  display: block !important;
  grid-area: icon !important;
  width: 42px !important;
  height: 42px !important;
  color: #20e5a3 !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 1.8 !important;
}

#resources .resource-tabs {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 10px !important;
  margin-top: 34px !important;
}

#resources .resource-panels {
  display: grid !important;
  gap: 16px !important;
  padding: 22px !important;
  border-radius: 18px !important;
  background: rgba(255,255,255,.025) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
}

#resources .resource-panels article {
  display: grid !important;
  grid-template-columns: 54px minmax(0, 1fr) !important;
  column-gap: 18px !important;
  align-items: center !important;
  min-height: 114px !important;
  padding: 24px !important;
  border-radius: 14px !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  background: rgba(3,27,17,.62) !important;
}

#resources .resource-icon {
  display: block !important;
  grid-row: 1 / 4 !important;
  width: 44px !important;
  height: 44px !important;
  color: #20e5a3 !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 1.8 !important;
}

#about .about-stage {
  grid-template-columns: minmax(360px, .38fr) minmax(0, .62fr) !important;
}

#about .about-narrative-center h2 {
  font-size: clamp(42px, 4.8vw, 76px) !important;
}

#about .about-cinema {
  min-height: min(520px, 50vw) !important;
  border-radius: 18px !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  background: radial-gradient(circle at 44% 48%, rgba(32,229,163,.16), transparent 18%), linear-gradient(135deg, rgba(255,255,255,.07), rgba(255,255,255,.015)), #040806 !important;
  cursor: pointer !important;
}

.site-footer.dji-footer {
  background: #242424 !important;
  color: rgba(255,255,255,.72) !important;
}

.site-footer .footer-mega,
.site-footer .footer-brandbar,
.site-footer .footer-legal {
  width: min(1440px, calc(100vw - 112px)) !important;
  margin-inline: auto !important;
}

.site-footer .footer-mega {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 48px !important;
  padding: 48px 0 54px !important;
}

.site-footer .footer-brandbar {
  display: flex !important;
  align-items: center !important;
  gap: 34px !important;
  padding: 26px 0 !important;
  border-top: 1px solid rgba(255,255,255,.14) !important;
}

.site-footer .footer-brandbar nav {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 20px !important;
}

.site-footer .footer-social {
  margin-left: auto !important;
  display: flex !important;
  gap: 12px !important;
}

.site-footer .footer-social a {
  width: 36px !important;
  height: 36px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 50% !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  color: rgba(255,255,255,.86) !important;
  font-size: 12px !important;
  text-decoration: none !important;
}

.site-footer .footer-legal {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 24px !important;
  padding: 0 0 30px !important;
}

.site-footer .footer-records {
  display: flex !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  gap: 0 !important;
  white-space: nowrap !important;
  overflow-x: auto !important;
}

.site-footer .footer-records > * {
  flex: 0 0 auto !important;
  color: rgba(255,255,255,.52) !important;
  font-size: 13px !important;
  text-decoration: none !important;
}

.site-footer .footer-records > * + *::before {
  content: "|" !important;
  margin: 0 16px !important;
  color: rgba(255,255,255,.22) !important;
}

@media (min-width: 1180px) and (max-height: 820px) {
  #services .infrastructure-section {
    min-height: auto !important;
    padding-top: 54px !important;
    padding-bottom: 42px !important;
  }

  #services .infra-showcase {
    height: 440px !important;
    max-height: 440px !important;
  }

  #scenarios.ai-solutions,
  #capability .capability-stage,
  #training .delivery-stage,
  #resources .resource-stage,
  #about .about-stage {
    min-height: auto !important;
    padding-top: 64px !important;
    padding-bottom: 64px !important;
  }

  #scenarios .solution-board {
    height: 480px !important;
    min-height: 480px !important;
  }
}

@media (max-width: 1180px) {
  #services .infrastructure-section,
  #capability .capability-stage,
  #training .delivery-stage,
  #resources .resource-stage,
  #about .about-stage {
    width: min(100% - 44px, 980px) !important;
  }

  #services .infra-showcase,
  #capability .capability-stage,
  #training .delivery-stage,
  #resources .resource-stage,
  #about .about-stage,
  #scenarios.ai-solutions {
    grid-template-columns: 1fr !important;
    max-height: none !important;
  }

  #services .infra-showcase {
    grid-template-rows: auto !important;
  }

  #services .infra-module:first-child {
    min-height: 420px !important;
  }

  #scenarios.ai-solutions {
    padding-inline: 24px !important;
  }

  #scenarios .solution-board {
    height: auto !important;
    min-height: 0 !important;
  }
}

@media (max-width: 760px) {
  #services .infrastructure-section,
  #capability .capability-stage,
  #training .delivery-stage,
  #resources .resource-stage,
  #about .about-stage {
    width: min(100% - 28px, 620px) !important;
    padding-top: 52px !important;
    padding-bottom: 48px !important;
  }

  #services .infra-metrics,
  #resources .resource-tabs,
  #scenarios .solution-board,
  #capability .tech-console,
  .site-footer .footer-mega {
    grid-template-columns: 1fr !important;
  }

  #services .infra-module:first-child,
  #services .infra-module:not(:first-child) {
    grid-template-columns: 1fr !important;
  }

  #services .infra-visual-base {
    position: relative !important;
    right: auto !important;
    bottom: auto !important;
    margin: 20px auto 0 !important;
    width: 220px !important;
    height: 220px !important;
  }

  #services .infra-module:not(:first-child) .infra-visual {
    justify-self: start !important;
  }

  #scenarios .solution-card:first-child {
    grid-row: auto !important;
  }

  .site-footer .footer-brandbar,
  .site-footer .footer-legal {
    flex-direction: column !important;
    align-items: flex-start !important;
  }
}

/* 2026-05-30 rhythm25-final-eof: final override must remain at the true end. */
.site-nav .nav-item.is-open > .nav-link {
  color: #20f3a0 !important;
}

.site-nav .nav-item.is-open > .nav-link::after {
  width: 18px !important;
  background: #20f3a0 !important;
}

.nav-panel {
  z-index: 220 !important;
}

.nav-panel a {
  cursor: pointer !important;
}

#service-native,
#service-workflow,
#service-opc,
#service-growth,
#scenario-enterprise,
#scenario-product,
#scenario-operation,
#scenario-chain,
#scenario-education,
#scenario-public,
#tech-agent,
#tech-workflow,
#tech-knowledge,
#tech-data,
#training-cert,
#training-scene,
#training-practice,
#training-case,
#resource-console,
#resource-templates,
#resource-cases,
#about,
#certification,
#footer-contact {
  scroll-margin-top: 104px !important;
}

.is-anchor-focus {
  outline: 1px solid rgba(32, 243, 160, .55) !important;
  box-shadow: 0 0 0 5px rgba(32, 243, 160, .08), 0 0 42px rgba(32, 243, 160, .18) !important;
}

#services .infra-module:first-child .infra-visual-base {
  overflow: visible !important;
}

#services .infra-module:first-child .infra-visual-base img.infra-orb-static {
  display: none !important;
}

#services .infra-module:first-child .infra-visual-base img.infra-orb-spin {
  display: block !important;
  position: absolute !important;
  left: 50% !important;
  top: 45% !important;
  width: 88% !important;
  height: 88% !important;
  max-width: none !important;
  object-fit: contain !important;
  object-position: center !important;
  transform-origin: 50% 50% !important;
  transform: translate(-50%, -50%) rotate(0deg) !important;
  mix-blend-mode: normal !important;
  clip-path: none !important;
  filter: brightness(1.08) saturate(1.1) drop-shadow(0 0 36px rgba(32, 229, 163, .44)) !important;
  opacity: .98 !important;
  z-index: 3 !important;
  animation: swsOrbRotate25FinalEof 24s linear infinite !important;
}

#services .infra-visual-base::after {
  left: 50% !important;
  bottom: 7% !important;
  width: 64% !important;
  height: 14% !important;
  opacity: .55 !important;
  animation: none !important;
}

#services .infra-visual-base::before {
  display: none !important;
}

@keyframes swsOrbRotate25FinalEof {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

/* 2026-05-31 rhythm26: repair section rhythm for scenarios, delivery and resources. */
:root {
  --sws-section-title: clamp(40px, 3.15vw, 56px);
  --sws-section-lead: clamp(15px, 1.02vw, 17px);
  --sws-card-title: clamp(22px, 1.55vw, 28px);
  --sws-card-text: clamp(13px, .9vw, 15px);
  --sws-card-label: 13px;
}

#scenarios.ai-solutions,
#training.premium-delivery,
#resources.premium-resources {
  min-height: calc(100svh - 84px) !important;
  height: auto !important;
  overflow: hidden !important;
}

#scenarios.ai-solutions {
  display: grid !important;
  grid-template-columns: minmax(300px, .34fr) minmax(0, .66fr) !important;
  align-items: center !important;
  gap: clamp(34px, 4.2vw, 68px) !important;
  padding: clamp(62px, 7vh, 82px) max(44px, calc((100vw - 1480px) / 2 + 56px)) clamp(52px, 6vh, 72px) !important;
  background:
    radial-gradient(circle at 88% 20%, rgba(29, 158, 117, .12), transparent 28%),
    linear-gradient(118deg, #050807 0%, #030706 44%, #07110d 100%) !important;
}

#scenarios .solution-hero {
  max-width: 440px !important;
  align-self: center !important;
  text-align: left !important;
}

#scenarios .solution-badge {
  margin: 0 0 22px !important;
}

#scenarios .solution-hero h2 {
  margin: 0 0 18px !important;
  max-width: 440px !important;
  color: #f7fff9 !important;
  font-size: var(--sws-section-title) !important;
  line-height: 1.08 !important;
  letter-spacing: 0 !important;
  word-break: keep-all !important;
}

#scenarios .solution-subtitle {
  max-width: 420px !important;
  margin: 0 0 24px !important;
  color: #8bbfaa !important;
  font-size: var(--sws-section-lead) !important;
  line-height: 1.72 !important;
}

#scenarios .solution-stats {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
}

#scenarios .solution-stats span {
  height: 36px !important;
  padding: 0 14px !important;
  font-size: 13px !important;
}

#scenarios .solution-stats strong {
  font-size: 20px !important;
}

#scenarios .solution-divider {
  display: none !important;
}

#scenarios .solution-board {
  display: grid !important;
  grid-template-columns: minmax(210px, 1.34fr) repeat(3, minmax(0, 1fr)) !important;
  grid-template-rows: repeat(2, minmax(210px, 1fr)) !important;
  gap: 16px !important;
  width: 100% !important;
  height: min(476px, calc(100svh - 190px)) !important;
  min-height: 440px !important;
  align-self: center !important;
}

#scenarios .solution-card,
#scenarios .solution-card:first-child,
#scenarios .solution-card:nth-child(2),
#scenarios .solution-card:nth-child(3),
#scenarios .solution-card:nth-child(4),
#scenarios .solution-card:nth-child(5),
#scenarios .solution-card:nth-child(6) {
  transform: none !important;
  min-height: 0 !important;
  border-radius: 14px !important;
  padding: 22px !important;
  display: flex !important;
  align-items: flex-end !important;
  overflow: hidden !important;
}

#scenarios .solution-card:first-child {
  grid-column: 1 !important;
  grid-row: 1 / span 2 !important;
  padding: 28px !important;
}

#scenarios .solution-card:nth-child(2) { grid-column: 2 !important; grid-row: 1 !important; }
#scenarios .solution-card:nth-child(3) { grid-column: 3 / span 2 !important; grid-row: 1 !important; }
#scenarios .solution-card:nth-child(4) { grid-column: 2 !important; grid-row: 2 !important; }
#scenarios .solution-card:nth-child(5) { grid-column: 3 !important; grid-row: 2 !important; }
#scenarios .solution-card:nth-child(6) { grid-column: 4 !important; grid-row: 2 !important; }

#scenarios .solution-visual,
#scenarios .solution-card:first-child .solution-visual {
  display: block !important;
  visibility: visible !important;
  position: absolute !important;
  top: 22px !important;
  left: 22px !important;
  width: 68px !important;
  height: 68px !important;
  opacity: .95 !important;
}

#scenarios .solution-card:first-child .solution-visual {
  width: 112px !important;
  height: 112px !important;
}

#scenarios .solution-content,
#scenarios .solution-card:first-child .solution-content,
#scenarios .solution-card:not(:first-child) .solution-content {
  position: relative !important;
  z-index: 1 !important;
  width: 100% !important;
  padding-top: 76px !important;
}

#scenarios .solution-card:first-child .solution-content {
  padding-top: 118px !important;
}

#scenarios .solution-content span {
  color: #5dcaa5 !important;
  font-size: var(--sws-card-label) !important;
  letter-spacing: 2px !important;
}

#scenarios .solution-card h3,
#scenarios .solution-content h3 {
  margin: 10px 0 10px !important;
  color: #f7fff9 !important;
  font-size: var(--sws-card-title) !important;
  line-height: 1.18 !important;
  word-break: keep-all !important;
  white-space: normal !important;
}

#scenarios .solution-card p,
#scenarios .solution-content p {
  display: block !important;
  overflow: visible !important;
  color: #8bbfaa !important;
  font-size: var(--sws-card-text) !important;
  line-height: 1.64 !important;
  margin: 0 !important;
}

#training.premium-delivery {
  background:
    radial-gradient(circle at 18% 24%, rgba(29, 158, 117, .11), transparent 28%),
    linear-gradient(180deg, #090909 0%, #0d0f0e 58%, #060806 100%) !important;
}

#training .delivery-stage {
  width: min(1440px, calc(100vw - 112px)) !important;
  min-height: calc(100svh - 84px) !important;
  padding: clamp(58px, 7vh, 78px) 0 !important;
  display: grid !important;
  grid-template-columns: minmax(340px, .40fr) minmax(0, .60fr) !important;
  align-items: center !important;
  gap: clamp(42px, 5vw, 84px) !important;
  overflow: visible !important;
}

#training .stage-head {
  max-width: 520px !important;
  text-align: left !important;
}

#training .stage-head h2 {
  margin: 24px 0 18px !important;
  color: #f7fff9 !important;
  font-size: var(--sws-section-title) !important;
  line-height: 1.12 !important;
  letter-spacing: 0 !important;
  word-break: keep-all !important;
}

#training .stage-head p {
  max-width: 470px !important;
  color: #8bbfaa !important;
  font-size: var(--sws-section-lead) !important;
  line-height: 1.72 !important;
}

#training .delivery-track {
  display: grid !important;
  grid-template-columns: 1fr !important;
  grid-auto-rows: minmax(118px, 1fr) !important;
  gap: 16px !important;
  height: min(520px, calc(100svh - 188px)) !important;
  min-height: 492px !important;
  padding: 0 !important;
  overflow: visible !important;
}

#training .delivery-track::before {
  display: none !important;
}

#training .delivery-track article {
  display: grid !important;
  grid-template-columns: 54px minmax(0, 1fr) !important;
  grid-template-areas: "icon no" "icon title" "icon text" !important;
  align-content: center !important;
  column-gap: 22px !important;
  min-height: 0 !important;
  height: auto !important;
  padding: 20px 24px !important;
  border-radius: 14px !important;
  overflow: hidden !important;
}

#training .delivery-track span {
  grid-area: no !important;
  color: #5dcaa5 !important;
  font-size: var(--sws-card-label) !important;
  letter-spacing: 2px !important;
}

#training .delivery-track h3 {
  grid-area: title !important;
  margin: 8px 0 8px !important;
  color: #f7fff9 !important;
  font-size: var(--sws-card-title) !important;
  line-height: 1.18 !important;
  word-break: keep-all !important;
}

#training .delivery-track p {
  grid-area: text !important;
  display: block !important;
  overflow: visible !important;
  color: #8bbfaa !important;
  font-size: var(--sws-card-text) !important;
  line-height: 1.62 !important;
}

#training .delivery-icon {
  grid-area: icon !important;
  align-self: center !important;
  width: 46px !important;
  height: 46px !important;
  color: #20e5a3 !important;
  filter: drop-shadow(0 0 18px rgba(32, 229, 163, .36)) !important;
}

#resources.premium-resources {
  background:
    radial-gradient(circle at 78% 28%, rgba(29, 158, 117, .13), transparent 30%),
    linear-gradient(180deg, #06150d 0%, #07100d 100%) !important;
}

#resources .resource-stage {
  width: min(1440px, calc(100vw - 112px)) !important;
  min-height: calc(100svh - 84px) !important;
  padding: clamp(58px, 7vh, 78px) 0 !important;
  display: grid !important;
  grid-template-columns: minmax(360px, .42fr) minmax(0, .58fr) !important;
  align-items: center !important;
  gap: clamp(42px, 5vw, 84px) !important;
  overflow: visible !important;
}

#resources .resource-main {
  max-width: 560px !important;
  text-align: left !important;
}

#resources .resource-main h2 {
  margin: 24px 0 18px !important;
  color: #f7fff9 !important;
  font-size: var(--sws-section-title) !important;
  line-height: 1.12 !important;
  letter-spacing: 0 !important;
  word-break: keep-all !important;
}

#resources .resource-main > p {
  max-width: 500px !important;
  color: #8bbfaa !important;
  font-size: var(--sws-section-lead) !important;
  line-height: 1.72 !important;
}

#resources .resource-tabs {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  margin-top: 28px !important;
}

#resources .resource-tabs button {
  min-height: 38px !important;
  padding: 0 18px !important;
  border-radius: 999px !important;
  font-size: 14px !important;
}

#resources .resource-panels {
  display: grid !important;
  grid-template-columns: 1fr !important;
  grid-auto-rows: minmax(136px, 1fr) !important;
  gap: 16px !important;
  height: min(500px, calc(100svh - 205px)) !important;
  min-height: 440px !important;
  padding: 18px !important;
  border-radius: 18px !important;
  overflow: visible !important;
}

#resources .resource-panels article,
#resources .resource-panels article.is-active {
  display: grid !important;
  grid-template-columns: 58px minmax(0, 1fr) !important;
  grid-template-areas: "icon label" "icon title" "icon text" !important;
  column-gap: 20px !important;
  align-content: center !important;
  min-height: 0 !important;
  height: auto !important;
  padding: 22px 24px !important;
  border-radius: 14px !important;
  opacity: 1 !important;
  transform: none !important;
  visibility: visible !important;
  position: relative !important;
  overflow: hidden !important;
}

#resources .resource-icon {
  grid-area: icon !important;
  align-self: center !important;
  width: 48px !important;
  height: 48px !important;
  color: #20e5a3 !important;
  filter: drop-shadow(0 0 18px rgba(32, 229, 163, .36)) !important;
}

#resources .resource-panels span {
  grid-area: label !important;
  color: #5dcaa5 !important;
  font-size: var(--sws-card-label) !important;
  letter-spacing: 2px !important;
}

#resources .resource-panels h3 {
  grid-area: title !important;
  margin: 8px 0 8px !important;
  color: #f7fff9 !important;
  font-size: var(--sws-card-title) !important;
  line-height: 1.18 !important;
  word-break: keep-all !important;
}

#resources .resource-panels p {
  grid-area: text !important;
  display: block !important;
  overflow: visible !important;
  color: #8bbfaa !important;
  font-size: var(--sws-card-text) !important;
  line-height: 1.62 !important;
}

@media (min-width: 1181px) and (max-height: 820px) {
  :root {
    --sws-section-title: clamp(34px, 2.65vw, 48px);
    --sws-card-title: clamp(20px, 1.35vw, 24px);
    --sws-card-text: 13px;
  }

  #scenarios.ai-solutions {
    padding-top: 50px !important;
    padding-bottom: 48px !important;
  }

  #scenarios .solution-board {
    height: 428px !important;
    min-height: 428px !important;
  }

  #training .delivery-stage,
  #resources .resource-stage {
    padding-top: 52px !important;
    padding-bottom: 52px !important;
  }

  #training .delivery-track {
    height: 444px !important;
    min-height: 444px !important;
  }

  #resources .resource-panels {
    height: 430px !important;
    min-height: 430px !important;
  }
}

@media (max-width: 1180px) {
  #scenarios.ai-solutions,
  #training .delivery-stage,
  #resources .resource-stage {
    grid-template-columns: 1fr !important;
    min-height: auto !important;
  }

  #scenarios .solution-board {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-template-rows: auto !important;
    height: auto !important;
    min-height: 0 !important;
  }

  #scenarios .solution-card:first-child,
  #scenarios .solution-card:nth-child(n) {
    grid-column: auto !important;
    grid-row: auto !important;
    min-height: 220px !important;
  }
}

@media (max-width: 760px) {
  #scenarios.ai-solutions {
    padding: 52px 22px !important;
  }

  #training .delivery-stage,
  #resources .resource-stage {
    width: min(100% - 28px, 620px) !important;
    padding: 52px 0 !important;
  }

  #scenarios .solution-board,
  #resources .resource-panels {
    grid-template-columns: 1fr !important;
  }
}

/* 2026-05-31 rhythm27: hard reset cramped lower screens after all older overrides. */
#scenarios.ai-solutions {
  grid-template-columns: minmax(300px, .33fr) minmax(0, .67fr) !important;
}

#scenarios .solution-board {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  grid-template-rows: repeat(2, minmax(0, 1fr)) !important;
  gap: 18px !important;
  height: min(476px, calc(100svh - 190px)) !important;
  min-height: 440px !important;
}

#scenarios .solution-card,
#scenarios .solution-card:first-child,
#scenarios .solution-card:nth-child(2),
#scenarios .solution-card:nth-child(3),
#scenarios .solution-card:nth-child(4),
#scenarios .solution-card:nth-child(5),
#scenarios .solution-card:nth-child(6) {
  grid-column: auto !important;
  grid-row: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  height: auto !important;
  padding: 22px !important;
  align-items: flex-end !important;
}

#scenarios .solution-card:first-child {
  padding: 22px !important;
}

#scenarios .solution-visual,
#scenarios .solution-card:first-child .solution-visual {
  width: 60px !important;
  height: 60px !important;
  top: 22px !important;
  left: 22px !important;
}

#scenarios .solution-content,
#scenarios .solution-card:first-child .solution-content,
#scenarios .solution-card:not(:first-child) .solution-content {
  padding-top: 76px !important;
}

#scenarios .solution-card h3,
#scenarios .solution-content h3 {
  font-size: clamp(20px, 1.28vw, 24px) !important;
  word-break: normal !important;
  overflow-wrap: anywhere !important;
}

#scenarios .solution-card p,
#scenarios .solution-content p {
  font-size: 13px !important;
  line-height: 1.58 !important;
}

#training.premium-delivery,
#resources.premium-resources {
  display: block !important;
  padding: 0 !important;
}

#training .delivery-stage,
#resources .resource-stage {
  box-sizing: border-box !important;
  min-height: calc(100svh - 84px) !important;
  height: auto !important;
  padding-top: clamp(50px, 6vh, 66px) !important;
  padding-bottom: clamp(50px, 6vh, 66px) !important;
}

#training .delivery-track {
  height: min(500px, calc(100svh - 178px)) !important;
  min-height: 460px !important;
  gap: 18px !important;
}

#training .delivery-track article {
  width: 100% !important;
  max-width: none !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

#resources .resource-panels {
  height: min(490px, calc(100svh - 190px)) !important;
  min-height: 430px !important;
  gap: 18px !important;
}

#resources .resource-panels > article,
#resources .resource-panels > article.is-active {
  width: 100% !important;
  max-width: none !important;
  min-height: 0 !important;
  height: auto !important;
  max-height: none !important;
  box-sizing: border-box !important;
  clip-path: none !important;
  overflow: hidden !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
}

#resources .resource-panels h3 {
  font-size: clamp(20px, 1.35vw, 24px) !important;
  word-break: normal !important;
  overflow-wrap: anywhere !important;
}

#resources .resource-panels p {
  font-size: 13px !important;
  line-height: 1.58 !important;
}

@media (min-width: 1181px) and (max-height: 820px) {
  #scenarios .solution-board {
    height: 420px !important;
    min-height: 420px !important;
  }

  #training .delivery-track,
  #resources .resource-panels {
    height: 420px !important;
    min-height: 420px !important;
  }
}

/* 2026-05-31 rhythm28: one-screen discipline for scenarios, delivery and resources. */
:root {
  --sws-screen-title: clamp(36px, 3.05vw, 52px);
  --sws-screen-lead: clamp(14px, .9vw, 16px);
  --sws-panel-title: clamp(21px, 1.42vw, 25px);
  --sws-panel-text: clamp(13px, .78vw, 14px);
  --sws-panel-label: 12px;
}

#scenarios.ai-solutions,
#training.premium-delivery,
#resources.premium-resources {
  box-sizing: border-box !important;
  min-height: 100svh !important;
  height: auto !important;
  scroll-margin-top: 84px !important;
  overflow: hidden !important;
}

#scenarios.ai-solutions *,
#training.premium-delivery *,
#resources.premium-resources * {
  box-sizing: border-box !important;
}

/* Screen 3: scenario units, left story + 3x2 image cards. */
#scenarios.ai-solutions {
  display: grid !important;
  grid-template-columns: minmax(300px, .32fr) minmax(0, .68fr) !important;
  align-items: center !important;
  gap: clamp(34px, 4vw, 72px) !important;
  padding: clamp(76px, 8vh, 96px) clamp(46px, 6vw, 112px) clamp(46px, 5vh, 64px) !important;
  background:
    radial-gradient(circle at 78% 12%, rgba(29, 158, 117, .16), transparent 34%),
    linear-gradient(110deg, #050706 0%, #06130d 42%, #020403 100%) !important;
}

#scenarios .solution-glow {
  opacity: .28 !important;
  pointer-events: none !important;
}

#scenarios .solution-hero {
  display: block !important;
  max-width: 520px !important;
  min-width: 0 !important;
  text-align: left !important;
  align-self: center !important;
  padding: 0 !important;
}

#scenarios .solution-badge,
#training .section-mark,
#resources .section-mark {
  width: max-content !important;
  max-width: 100% !important;
  min-height: 34px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 0 16px !important;
  border: 1px solid rgba(29, 158, 117, .78) !important;
  border-radius: 999px !important;
  color: #9fe1cb !important;
  background: rgba(29, 158, 117, .035) !important;
  font-size: 12px !important;
  letter-spacing: .08em !important;
  white-space: nowrap !important;
}

#scenarios .solution-hero h2 {
  margin: 24px 0 18px !important;
  color: #fff !important;
  font-size: var(--sws-screen-title) !important;
  font-weight: 650 !important;
  line-height: 1.14 !important;
  letter-spacing: 0 !important;
  text-align: left !important;
  word-break: keep-all !important;
  overflow-wrap: normal !important;
}

#scenarios .solution-subtitle {
  max-width: 500px !important;
  margin: 0 !important;
  color: #8bbfaa !important;
  font-size: var(--sws-screen-lead) !important;
  line-height: 1.72 !important;
}

#scenarios .solution-stats {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px 12px !important;
  margin: 28px 0 0 !important;
}

#scenarios .solution-stats span {
  min-height: 36px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 0 14px !important;
  border: 1px solid rgba(157, 225, 203, .22) !important;
  border-radius: 999px !important;
  color: #8bbfaa !important;
  background: rgba(255,255,255,.022) !important;
  font-size: 13px !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

#scenarios .solution-stats strong {
  color: #dffbf1 !important;
  font-size: 18px !important;
}

#scenarios .solution-divider {
  display: none !important;
}

#scenarios .solution-board {
  width: 100% !important;
  height: min(520px, calc(100svh - 176px)) !important;
  min-height: 450px !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  grid-template-rows: repeat(2, minmax(0, 1fr)) !important;
  gap: 18px !important;
  align-self: center !important;
  padding: 0 !important;
  margin: 0 !important;
}

#scenarios .solution-card,
#scenarios .solution-card:first-child,
#scenarios .solution-card:nth-child(2),
#scenarios .solution-card:nth-child(3),
#scenarios .solution-card:nth-child(4),
#scenarios .solution-card:nth-child(5),
#scenarios .solution-card:nth-child(6) {
  grid-column: auto !important;
  grid-row: auto !important;
  position: relative !important;
  min-width: 0 !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  display: flex !important;
  align-items: flex-end !important;
  padding: 22px !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  border: 1px solid rgba(29, 158, 117, .28) !important;
  background:
    radial-gradient(circle at 78% 16%, rgba(32, 243, 160, .14), transparent 44%),
    linear-gradient(145deg, rgba(13, 42, 28, .72), rgba(4, 12, 9, .88)) !important;
}

#scenarios .solution-card::before {
  opacity: .45 !important;
}

#scenarios .solution-visual,
#scenarios .solution-card:first-child .solution-visual {
  position: absolute !important;
  top: 20px !important;
  right: 20px !important;
  left: auto !important;
  width: clamp(58px, 4.2vw, 82px) !important;
  height: clamp(58px, 4.2vw, 82px) !important;
  opacity: .94 !important;
  display: grid !important;
  place-items: center !important;
}

#scenarios .solution-icon {
  width: 100% !important;
  height: 100% !important;
  stroke: #20e5a3 !important;
  stroke-width: 2 !important;
  fill: none !important;
}

#scenarios .solution-content,
#scenarios .solution-card:first-child .solution-content,
#scenarios .solution-card:not(:first-child) .solution-content {
  position: relative !important;
  z-index: 2 !important;
  width: 100% !important;
  min-height: auto !important;
  display: block !important;
  padding: 74px 0 0 !important;
  color: inherit !important;
}

#scenarios .solution-content > span {
  display: block !important;
  color: #5dcaa5 !important;
  font-size: var(--sws-panel-label) !important;
  letter-spacing: .26em !important;
  line-height: 1 !important;
}

#scenarios .solution-card h3,
#scenarios .solution-content h3 {
  margin: 12px 0 9px !important;
  color: #f7fff9 !important;
  font-size: var(--sws-panel-title) !important;
  font-weight: 600 !important;
  line-height: 1.22 !important;
  letter-spacing: 0 !important;
  word-break: keep-all !important;
  overflow-wrap: anywhere !important;
}

#scenarios .solution-card p,
#scenarios .solution-content p {
  display: block !important;
  margin: 0 !important;
  color: #8bbfaa !important;
  font-size: var(--sws-panel-text) !important;
  line-height: 1.58 !important;
  overflow: visible !important;
  -webkit-line-clamp: unset !important;
  -webkit-box-orient: initial !important;
}

/* Screen 5: incubation and delivery as a single, readable timeline. */
#training.premium-delivery {
  display: block !important;
  padding: 0 !important;
  background:
    radial-gradient(circle at 24% 22%, rgba(32, 243, 160, .09), transparent 30%),
    linear-gradient(180deg, #090b0a 0%, #0c0c0c 100%) !important;
}

#training .delivery-stage {
  width: min(1440px, calc(100vw - 112px)) !important;
  min-height: 100svh !important;
  height: auto !important;
  margin: 0 auto !important;
  padding: clamp(76px, 8vh, 96px) 0 clamp(46px, 5vh, 64px) !important;
  display: grid !important;
  grid-template-columns: minmax(320px, .36fr) minmax(0, .64fr) !important;
  align-items: center !important;
  gap: clamp(42px, 5vw, 84px) !important;
  overflow: visible !important;
}

#training .stage-head {
  max-width: 520px !important;
  text-align: left !important;
}

#training .stage-head h2 {
  margin: 24px 0 18px !important;
  color: #fff !important;
  font-size: var(--sws-screen-title) !important;
  font-weight: 650 !important;
  line-height: 1.14 !important;
  letter-spacing: 0 !important;
  word-break: keep-all !important;
  overflow-wrap: normal !important;
}

#training .stage-head p {
  max-width: 500px !important;
  margin: 0 !important;
  color: #8bbfaa !important;
  font-size: var(--sws-screen-lead) !important;
  line-height: 1.72 !important;
}

#training .delivery-track {
  position: relative !important;
  width: 100% !important;
  height: min(560px, calc(100svh - 176px)) !important;
  min-height: 460px !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  grid-template-rows: repeat(4, minmax(0, 1fr)) !important;
  gap: 18px !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: visible !important;
}

#training .delivery-track::before {
  content: "" !important;
  position: absolute !important;
  left: 33px !important;
  top: 28px !important;
  bottom: 28px !important;
  width: 1px !important;
  height: auto !important;
  background: linear-gradient(180deg, transparent, rgba(32, 243, 160, .64), transparent) !important;
}

#training .delivery-track article,
#training .delivery-track article:nth-child(1),
#training .delivery-track article:nth-child(2),
#training .delivery-track article:nth-child(3),
#training .delivery-track article:nth-child(4) {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  min-height: 0 !important;
  height: auto !important;
  display: grid !important;
  grid-template-columns: 66px minmax(0, 1fr) !important;
  grid-template-areas:
    "icon label"
    "icon title"
    "icon text" !important;
  column-gap: 20px !important;
  align-content: center !important;
  padding: 18px 28px !important;
  border-radius: 12px !important;
  border: 1px solid rgba(255, 255, 255, .14) !important;
  background:
    radial-gradient(circle at 86% 28%, rgba(32, 243, 160, .12), transparent 46%),
    rgba(255, 255, 255, .028) !important;
  overflow: hidden !important;
}

#training .delivery-icon {
  grid-area: icon !important;
  position: relative !important;
  left: auto !important;
  top: auto !important;
  align-self: center !important;
  width: 50px !important;
  height: 50px !important;
  stroke: #20e5a3 !important;
  color: #20e5a3 !important;
  filter: drop-shadow(0 0 18px rgba(32, 243, 160, .28)) !important;
}

#training .delivery-track span {
  grid-area: label !important;
  display: block !important;
  color: #5dcaa5 !important;
  font-size: var(--sws-panel-label) !important;
  letter-spacing: .24em !important;
  line-height: 1 !important;
  margin: 0 0 7px !important;
}

#training .delivery-track h3 {
  grid-area: title !important;
  margin: 0 0 7px !important;
  color: #f7fff9 !important;
  font-size: var(--sws-panel-title) !important;
  font-weight: 600 !important;
  line-height: 1.18 !important;
  word-break: keep-all !important;
  overflow-wrap: anywhere !important;
}

#training .delivery-track p {
  grid-area: text !important;
  display: block !important;
  margin: 0 !important;
  color: #8bbfaa !important;
  font-size: var(--sws-panel-text) !important;
  line-height: 1.54 !important;
  overflow: visible !important;
}

/* Screen 6: developer resources as a one-screen product surface. */
#resources.premium-resources {
  display: block !important;
  padding: 0 !important;
  background:
    radial-gradient(circle at 82% 28%, rgba(66, 132, 186, .15), transparent 34%),
    linear-gradient(180deg, #03111f 0%, #06101a 100%) !important;
}

#resources .resource-stage {
  width: min(1440px, calc(100vw - 112px)) !important;
  min-height: 100svh !important;
  height: auto !important;
  margin: 0 auto !important;
  padding: clamp(76px, 8vh, 96px) 0 clamp(46px, 5vh, 64px) !important;
  display: grid !important;
  grid-template-columns: minmax(330px, .36fr) minmax(0, .64fr) !important;
  align-items: center !important;
  gap: clamp(42px, 5vw, 84px) !important;
  overflow: visible !important;
}

#resources .resource-main {
  max-width: 540px !important;
  text-align: left !important;
}

#resources .resource-main h2 {
  margin: 24px 0 18px !important;
  color: #fff !important;
  font-size: var(--sws-screen-title) !important;
  font-weight: 650 !important;
  line-height: 1.14 !important;
  letter-spacing: 0 !important;
  word-break: keep-all !important;
  overflow-wrap: normal !important;
}

#resources .resource-main > p {
  max-width: 500px !important;
  margin: 0 !important;
  color: #8bbfaa !important;
  font-size: var(--sws-screen-lead) !important;
  line-height: 1.72 !important;
}

#resources .resource-tabs {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  margin: 28px 0 0 !important;
  padding: 0 !important;
}

#resources .resource-tabs button {
  min-height: 36px !important;
  padding: 0 16px !important;
  border-radius: 999px !important;
  font-size: 13px !important;
  color: #8bbfaa !important;
  border: 1px solid rgba(157, 225, 203, .22) !important;
  background: rgba(255,255,255,.02) !important;
}

#resources .resource-tabs button.is-active {
  color: #07110c !important;
  border-color: #20e5a3 !important;
  background: #20e5a3 !important;
}

#resources .resource-panels {
  width: 100% !important;
  height: min(520px, calc(100svh - 176px)) !important;
  min-height: 450px !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  grid-template-rows: repeat(3, minmax(0, 1fr)) !important;
  gap: 18px !important;
  margin: 0 !important;
  padding: 18px !important;
  border-radius: 16px !important;
  border: 1px solid rgba(29, 158, 117, .16) !important;
  background:
    radial-gradient(circle at 78% 20%, rgba(32, 243, 160, .10), transparent 44%),
    rgba(255,255,255,.024) !important;
  overflow: visible !important;
}

#resources .resource-panels article,
#resources .resource-panels article.is-active {
  position: relative !important;
  width: 100% !important;
  max-width: none !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  display: grid !important;
  grid-template-columns: 62px minmax(0, 1fr) !important;
  grid-template-areas:
    "icon label"
    "icon title"
    "icon text" !important;
  column-gap: 20px !important;
  align-content: center !important;
  padding: 20px 26px !important;
  border-radius: 12px !important;
  border: 1px solid rgba(29, 158, 117, .22) !important;
  background:
    radial-gradient(circle at 84% 20%, rgba(32, 243, 160, .10), transparent 45%),
    rgba(5, 22, 15, .72) !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  clip-path: none !important;
  overflow: hidden !important;
}

#resources .resource-icon {
  grid-area: icon !important;
  position: relative !important;
  left: auto !important;
  top: auto !important;
  align-self: center !important;
  width: 48px !important;
  height: 48px !important;
  stroke: #20e5a3 !important;
  color: #20e5a3 !important;
  filter: drop-shadow(0 0 18px rgba(32, 243, 160, .28)) !important;
}

#resources .resource-panels span {
  grid-area: label !important;
  display: block !important;
  color: #5dcaa5 !important;
  font-size: var(--sws-panel-label) !important;
  letter-spacing: .20em !important;
  line-height: 1 !important;
  margin: 0 0 7px !important;
}

#resources .resource-panels h3 {
  grid-area: title !important;
  margin: 0 0 7px !important;
  color: #f7fff9 !important;
  font-size: var(--sws-panel-title) !important;
  font-weight: 600 !important;
  line-height: 1.18 !important;
  word-break: keep-all !important;
  overflow-wrap: anywhere !important;
}

#resources .resource-panels p {
  grid-area: text !important;
  display: block !important;
  margin: 0 !important;
  color: #8bbfaa !important;
  font-size: var(--sws-panel-text) !important;
  line-height: 1.54 !important;
  overflow: visible !important;
}

@media (min-width: 1024px) and (max-height: 820px) {
  :root {
    --sws-screen-title: clamp(32px, 2.7vw, 44px);
    --sws-panel-title: clamp(19px, 1.22vw, 22px);
    --sws-panel-text: 12.5px;
  }

  #scenarios.ai-solutions,
  #training .delivery-stage,
  #resources .resource-stage {
    padding-top: 64px !important;
    padding-bottom: 40px !important;
  }

  #scenarios .solution-board,
  #resources .resource-panels {
    height: 430px !important;
    min-height: 430px !important;
  }

  #training .delivery-track {
    height: 450px !important;
    min-height: 450px !important;
  }
}

@media (max-width: 1180px) {
  #scenarios.ai-solutions,
  #training .delivery-stage,
  #resources .resource-stage {
    display: grid !important;
    grid-template-columns: 1fr !important;
    width: min(100% - 44px, 760px) !important;
    min-height: auto !important;
    padding: 64px 0 !important;
    gap: 30px !important;
    overflow: visible !important;
  }

  #scenarios.ai-solutions {
    width: auto !important;
    padding-left: 22px !important;
    padding-right: 22px !important;
  }

  #scenarios .solution-board {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-template-rows: auto !important;
    height: auto !important;
    min-height: 0 !important;
  }

  #scenarios .solution-card {
    min-height: 210px !important;
  }

  #training .delivery-track,
  #resources .resource-panels {
    height: auto !important;
    min-height: 0 !important;
  }
}

@media (max-width: 720px) {
  :root {
    --sws-screen-title: clamp(30px, 10vw, 42px);
    --sws-panel-title: 21px;
  }

  #scenarios .solution-board {
    grid-template-columns: 1fr !important;
  }

  #training .delivery-track article,
  #resources .resource-panels article,
  #resources .resource-panels article.is-active {
    grid-template-columns: 54px minmax(0, 1fr) !important;
    padding: 20px !important;
  }
}

/* 2026-06-08: restore the approved first carousel road/light-flow background. */
.hero.hero--agent {
  background:
    linear-gradient(90deg, rgba(0, 3, 5, .72) 0%, rgba(0, 8, 11, .22) 45%, rgba(0, 3, 5, .10) 72%),
    radial-gradient(circle at 77% 58%, rgba(255, 255, 255, .16), transparent 32%),
    url("./assets/hero-ai-road.webp") center center / cover no-repeat,
    #020605 !important;
}

.hero.hero--agent {
  background:
    linear-gradient(90deg, rgba(0, 3, 5, .46) 0%, rgba(0, 8, 11, .10) 50%, rgba(0, 3, 5, .06) 100%),
    url("./assets/hero-ai-road.webp") center center / cover no-repeat !important;
}

.hero.hero--agent .agent-slide {
  background: transparent !important;
}

.hero.hero--agent .hero-overlay {
  background:
    linear-gradient(90deg, rgba(0, 0, 0, .44) 0%, rgba(0, 0, 0, .10) 52%, rgba(0, 0, 0, .04) 100%),
    linear-gradient(180deg, rgba(0, 0, 0, .18) 0%, rgba(0, 0, 0, .08) 48%, rgba(0, 0, 0, .34) 100%) !important;
}

.hero.hero--agent .agent-canvas {
  opacity: .66 !important;
  mix-blend-mode: screen !important;
  filter: saturate(1.12) contrast(1.08) !important;
}

/* 2026-06-08: first hero electric current layer.
   The road image already carries the line structure; this layer adds visible current
   pulses only on the first carousel frame without adding extra symbols or text. */
.hero .hero-electric-flow {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  mix-blend-mode: screen;
  background:
    linear-gradient(104deg,
      transparent 0%,
      transparent 42%,
      rgba(176, 224, 255, .10) 46%,
      rgba(255, 255, 255, .86) 50%,
      rgba(174, 223, 255, .13) 54%,
      transparent 59%,
      transparent 100%) -46% 58% / 48% 3px no-repeat,
    linear-gradient(94deg,
      transparent 0%,
      transparent 38%,
      rgba(255, 210, 142, .10) 45%,
      rgba(255, 243, 218, .72) 50%,
      rgba(255, 198, 112, .12) 56%,
      transparent 62%,
      transparent 100%) -38% 79% / 54% 3px no-repeat,
    linear-gradient(116deg,
      transparent 0%,
      transparent 42%,
      rgba(193, 238, 255, .08) 46%,
      rgba(248, 253, 255, .68) 50%,
      rgba(151, 212, 255, .10) 55%,
      transparent 61%,
      transparent 100%) 146% 48% / 42% 2px no-repeat,
    linear-gradient(82deg,
      transparent 0%,
      transparent 40%,
      rgba(255, 217, 162, .10) 45%,
      rgba(255, 246, 226, .80) 50%,
      rgba(255, 200, 116, .12) 56%,
      transparent 62%,
      transparent 100%) 132% 75% / 48% 3px no-repeat,
    radial-gradient(circle at 67% 56%, rgba(255, 255, 250, .20), transparent 18%),
    radial-gradient(circle at 44% 78%, rgba(255, 206, 124, .18), transparent 16%);
  filter: drop-shadow(0 0 16px rgba(203, 239, 255, .38))
    drop-shadow(0 0 28px rgba(255, 205, 127, .22));
  animation: heroElectricFlow 3.6s linear infinite;
}

.hero.hero--agent .hero-electric-flow {
  opacity: .95;
}

.hero:not(.hero--agent) .hero-electric-flow {
  opacity: 0 !important;
}

.hero.hero--agent .agent-canvas {
  opacity: .92 !important;
  filter: saturate(1.4) contrast(1.24) brightness(1.14) !important;
}

.hero .agent-canvas {
  z-index: 1 !important;
}

.hero .hero-electric-flow {
  z-index: 2 !important;
}

.hero .hero-overlay {
  z-index: 3 !important;
}

.hero .hero-slides {
  z-index: 4 !important;
}

@keyframes heroElectricFlow {
  0% {
    background-position:
      -46% 58%,
      -38% 79%,
      146% 48%,
      132% 75%,
      67% 56%,
      44% 78%;
    opacity: .44;
  }
  14% {
    opacity: .92;
  }
  50% {
    opacity: .82;
  }
  100% {
    background-position:
      120% 58%,
      118% 79%,
      -34% 48%,
      -42% 75%,
      67% 56%,
      44% 78%;
    opacity: .46;
  }
}

/* 2026-06-08: bring carousel arrows back inside the viewport. */
.hero .hero-arrows {
  z-index: 30 !important;
  pointer-events: none !important;
}

.hero .hero-arrow {
  top: 50% !important;
  width: 44px !important;
  height: 76px !important;
  display: block !important;
  visibility: visible !important;
  opacity: .92 !important;
  background: transparent !important;
  border: 0 !important;
  pointer-events: auto !important;
  transform: translateY(-50%) !important;
}

.hero .hero-arrow-prev {
  left: -34px !important;
}

.hero .hero-arrow-next {
  right: -34px !important;
}

.hero .hero-arrow::before {
  width: 18px !important;
  height: 18px !important;
  border-color: rgba(255, 255, 255, .94) !important;
  border-style: solid !important;
  border-width: 0 0 3px 3px !important;
  filter: drop-shadow(0 0 8px rgba(0, 0, 0, .30)) !important;
}

.hero .hero-arrow-prev::before {
  left: 24px !important;
  transform: translateY(-50%) rotate(45deg) !important;
}

.hero .hero-arrow-next::before {
  right: 24px !important;
  transform: translateY(-50%) rotate(-135deg) !important;
}

.hero .hero-arrow:hover {
  opacity: 1 !important;
}

/* 2026-06-08: keep the workflow carousel visual fully inside the hero frame. */
.workflow-slide .workflow-visual {
  max-width: min(760px, 48vw) !important;
  transform: translateX(-42px) scale(.96) !important;
  transform-origin: center right !important;
  overflow: visible !important;
}

.workflow-slide .precision-grid {
  inset: -8% 1% -6% -2% !important;
  transform: rotateX(58deg) rotateZ(-19deg) translate3d(0, 4%, 0) !important;
}

.workflow-slide .module-d {
  left: 56% !important;
  top: 48% !important;
}

@media (max-width: 1180px) {
  .workflow-slide .workflow-visual {
    max-width: 100% !important;
    transform: none !important;
  }

  .workflow-slide .precision-grid {
    inset: -4% 4% -8% 2% !important;
  }
}

/* 2026-06-08: clean carousel slides 2 and 3.
   Remove the lower decorative light streaks from the certification and workflow
   frames while keeping the first road/current hero untouched. */
.hero.hero--cert::after,
.hero.hero--workflow::after,
.cert-slide .badge-orbit::before,
.workflow-slide .flow-line {
  display: none !important;
}

.hero.hero--cert .hero-overlay,
.hero.hero--workflow .hero-overlay {
  background:
    linear-gradient(90deg, rgba(0, 0, 0, .60) 0%, rgba(0, 0, 0, .08) 54%, rgba(0, 0, 0, .20) 100%),
    linear-gradient(180deg, rgba(0, 0, 0, .04) 0%, rgba(0, 0, 0, .54) 100%) !important;
}

.workflow-slide .precision-grid::before {
  background:
    radial-gradient(circle at 70% 46%, rgba(75, 235, 172, .12), transparent 28%) !important;
  opacity: .42 !important;
  animation: none !important;
}

/* 2026-06-09: keep carousel frames 2/3 clean.
   The first frame owns the electric-current layer; certification/workflow frames
   should not inherit any bottom light streaks or scanning beams. */
.hero.hero--cert .hero-electric-flow,
.hero.hero--workflow .hero-electric-flow,
.hero.hero--cert .agent-canvas,
.hero.hero--workflow .agent-canvas {
  display: none !important;
  opacity: 0 !important;
  background: none !important;
  animation: none !important;
}

.hero.hero--cert::after,
.hero.hero--workflow::after,
.cert-slide .badge-orbit::before,
.workflow-slide .flow-line,
.workflow-slide .precision-grid::before {
  content: none !important;
  display: none !important;
  opacity: 0 !important;
  background: none !important;
  animation: none !important;
  box-shadow: none !important;
}

.workflow-slide .precision-grid {
  background:
    linear-gradient(90deg, rgba(255, 255, 255, .046) 1px, transparent 1px),
    linear-gradient(180deg, rgba(255, 255, 255, .040) 1px, transparent 1px),
    radial-gradient(circle at 72% 48%, rgba(73, 210, 170, .095), transparent 30%),
    linear-gradient(135deg, rgba(255,255,255,.024), rgba(255,255,255,.004)) !important;
  background-size: 58px 58px, 58px 58px, auto, auto !important;
}

/* Keep arrows visible at the viewport edge. */
.hero .hero-arrow {
  width: 48px !important;
  height: 80px !important;
  opacity: .94 !important;
}

.hero .hero-arrow-prev {
  left: 18px !important;
}

.hero .hero-arrow-next {
  right: 18px !important;
}

.hero .hero-arrow::before {
  width: 20px !important;
  height: 20px !important;
  border-width: 0 0 3px 3px !important;
}

.hero .hero-arrow-prev::before {
  left: 13px !important;
}

.hero .hero-arrow-next::before {
  right: 13px !important;
}

/* 2026-06-09: remove the residual lower light streaks on carousel 2/3.
   Keep the AI road/current layer only on the first hero frame. */
.hero.hero--cert .hero-electric-flow,
.hero.hero--workflow .hero-electric-flow,
.hero.hero--cert .agent-canvas,
.hero.hero--workflow .agent-canvas,
.hero.hero--cert::after,
.hero.hero--workflow::after,
.cert-slide .badge-orbit::before,
.workflow-slide .flow-line,
.workflow-slide .precision-grid::before {
  content: none !important;
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  background: none !important;
  animation: none !important;
  filter: none !important;
  box-shadow: none !important;
}

.hero.hero--cert,
.hero.hero--workflow {
  background:
    radial-gradient(circle at 74% 46%, rgba(73, 210, 170, .085), transparent 30%),
    linear-gradient(145deg, #050606 0%, #030404 54%, #020202 100%) !important;
}

.hero.hero--cert .hero-overlay,
.hero.hero--workflow .hero-overlay {
  background:
    linear-gradient(90deg, rgba(0, 0, 0, .70) 0%, rgba(0, 0, 0, .18) 52%, rgba(0, 0, 0, .24) 100%),
    linear-gradient(180deg, rgba(0, 0, 0, .06) 0%, rgba(0, 0, 0, .50) 100%) !important;
}

.workflow-slide .precision-grid {
  background:
    linear-gradient(90deg, rgba(255, 255, 255, .034) 1px, transparent 1px),
    linear-gradient(180deg, rgba(255, 255, 255, .030) 1px, transparent 1px),
    radial-gradient(circle at 72% 48%, rgba(73, 210, 170, .075), transparent 32%),
    rgba(0, 0, 0, .10) !important;
  background-size: 58px 58px, 58px 58px, auto, auto !important;
}

/* Carousel arrows: thin, DJI-like, visible, and close to the viewport edge. */
.hero .hero-arrow {
  width: 38px !important;
  height: 74px !important;
  opacity: .96 !important;
  z-index: 8 !important;
}

.hero .hero-arrow-prev {
  left: 16px !important;
}

.hero .hero-arrow-next {
  right: 16px !important;
}

.hero .hero-arrow::before {
  width: 18px !important;
  height: 18px !important;
  border-color: rgba(255, 255, 255, .96) !important;
  border-width: 0 0 2.3px 2.3px !important;
  filter: drop-shadow(0 0 10px rgba(0, 0, 0, .55)) !important;
}

.hero .hero-arrow-prev::before {
  left: 10px !important;
}

.hero .hero-arrow-next::before {
  right: 10px !important;
}

@media (max-width: 768px) {
  .hero .hero-arrow-prev {
    left: 8px !important;
  }

  .hero .hero-arrow-next {
    right: 8px !important;
  }
}

/* 2026-06-09 verified carousel guard.
   This block intentionally stays last: older homepage passes had conflicting
   carousel rules, which caused inactive slides and decorative lines to bleed. */
.hero .hero-slide {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  z-index: 0 !important;
  transform: translate3d(22px, 0, 0) !important;
}

.hero .hero-slide:not(.is-active),
.hero .hero-slide:not(.is-active) *,
.hero .hero-slide:not(.is-active)::before,
.hero .hero-slide:not(.is-active)::after {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.hero .hero-slide.is-active {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  z-index: 2 !important;
  transform: translate3d(0, 0, 0) !important;
}

.hero .hero-slide.is-active *,
.hero .hero-slide.is-active::before {
  visibility: visible !important;
}

.hero .hero-electric-flow {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

.hero.hero--agent .hero-electric-flow {
  display: block !important;
  opacity: .9 !important;
  visibility: visible !important;
}

.hero.hero--cert .agent-canvas,
.hero.hero--workflow .agent-canvas,
.hero.hero--cert .hero-electric-flow,
.hero.hero--workflow .hero-electric-flow,
.hero.hero--cert::after,
.hero.hero--workflow::after,
.cert-slide .badge-orbit::before,
.cert-slide .cert-visual::before,
.cert-slide .cert-visual::after,
.workflow-slide .flow-line,
.workflow-slide .precision-grid::before,
.workflow-slide .precision-grid::after,
.workflow-slide .workflow-visual::before,
.workflow-slide .workflow-visual::after {
  content: none !important;
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  background: none !important;
  box-shadow: none !important;
  filter: none !important;
  animation: none !important;
}

.hero.hero--cert,
.hero.hero--workflow {
  background:
    radial-gradient(circle at 74% 46%, rgba(73, 210, 170, .065), transparent 30%),
    linear-gradient(145deg, #050606 0%, #030404 54%, #010202 100%) !important;
}

.workflow-slide .precision-grid {
  box-shadow: none !important;
}

.hero .hero-arrows {
  z-index: 120 !important;
  pointer-events: none !important;
}

.hero .hero-arrow,
.hero-arrows .hero-arrow {
  top: 50% !important;
  width: 52px !important;
  height: 76px !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  z-index: 121 !important;
  color: #fff !important;
  background: transparent !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  pointer-events: auto !important;
  transform: translateY(-50%) !important;
  -webkit-tap-highlight-color: transparent !important;
}

.hero .hero-arrow-prev,
.hero-arrow-prev {
  left: 0 !important;
}

.hero .hero-arrow-next,
.hero-arrow-next {
  right: 0 !important;
}

.hero .hero-arrow::before,
.hero-arrows .hero-arrow::before {
  width: 17px !important;
  height: 17px !important;
  opacity: 1 !important;
  border-color: #fff !important;
  border-style: solid !important;
  border-width: 0 0 2px 2px !important;
  filter: drop-shadow(0 0 12px rgba(0, 0, 0, .9)) !important;
}

.hero .hero-arrow-prev::before {
  left: 9px !important;
  transform: translateY(-50%) rotate(45deg) !important;
}

.hero .hero-arrow-next::before {
  right: 9px !important;
  transform: translateY(-50%) rotate(-135deg) !important;
}

@media (max-width: 640px) {
  .hero .hero-slide:not(.is-active),
  .hero .hero-slide:not(.is-active) * {
    display: none !important;
  }

  .hero .hero-content h1,
  .hero-slide h2 {
    font-size: clamp(40px, 11vw, 52px) !important;
    line-height: 1.12 !important;
  }

  .hero .hero-copy,
  .cert-content p,
  .workflow-content p {
    font-size: 15px !important;
  }

  .hero .hero-arrow-prev,
  .hero-arrow-prev {
    left: -2px !important;
  }

  .hero .hero-arrow-next,
  .hero-arrow-next {
    right: -2px !important;
  }
}

/* FINAL 2026-06-09 carousel verification override.
   This block intentionally stays last so carousel visuals are not overwritten. */
.hero.hero--agent .agent-canvas {
  display: block !important;
  visibility: visible !important;
  opacity: .96 !important;
  mix-blend-mode: screen !important;
  filter: saturate(1.45) contrast(1.28) brightness(1.18) !important;
}

.hero.hero--agent .hero-electric-flow {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  animation: heroElectricFlow 3.1s linear infinite !important;
}

.hero.hero--agent .hero-electric-flow::before,
.hero.hero--agent .hero-electric-flow::after {
  content: "" !important;
  position: absolute !important;
  inset: -12% !important;
  display: block !important;
  pointer-events: none !important;
  mix-blend-mode: screen !important;
  background:
    linear-gradient(101deg, transparent 0 44%, rgba(255, 255, 255, .70) 49%, transparent 54% 100%) -28% 65% / 38% 2px no-repeat,
    linear-gradient(112deg, transparent 0 43%, rgba(255, 219, 153, .46) 49%, transparent 55% 100%) 126% 82% / 34% 2px no-repeat !important;
  filter: blur(.2px) drop-shadow(0 0 16px rgba(255, 255, 255, .36)) !important;
  animation: heroCurrentSweep 4.4s ease-in-out infinite !important;
}

.hero.hero--agent .hero-electric-flow::after {
  opacity: .48 !important;
  animation-delay: -2.2s !important;
}

.hero.hero--cert .agent-canvas,
.hero.hero--workflow .agent-canvas,
.hero.hero--cert .hero-electric-flow,
.hero.hero--workflow .hero-electric-flow,
.hero.hero--cert .hero-electric-flow::before,
.hero.hero--cert .hero-electric-flow::after,
.hero.hero--workflow .hero-electric-flow::before,
.hero.hero--workflow .hero-electric-flow::after,
.hero.hero--cert::before,
.hero.hero--cert::after,
.hero.hero--workflow::before,
.hero.hero--workflow::after,
.cert-slide::before,
.cert-slide::after,
.workflow-slide::before,
.workflow-slide::after,
.cert-slide .badge-orbit::before,
.cert-slide .badge-orbit::after,
.cert-slide .cert-visual::before,
.cert-slide .cert-visual::after,
.workflow-slide .flow-line,
.workflow-slide .precision-grid::before,
.workflow-slide .precision-grid::after,
.workflow-slide .workflow-visual::before,
.workflow-slide .workflow-visual::after {
  content: none !important;
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  background: none !important;
  box-shadow: none !important;
  filter: none !important;
  animation: none !important;
}

.hero.hero--cert,
.hero.hero--workflow {
  background:
    radial-gradient(circle at 74% 46%, rgba(73, 210, 170, .045), transparent 28%),
    linear-gradient(145deg, #040505 0%, #020303 58%, #000 100%) !important;
}

.hero .hero-arrows {
  z-index: 180 !important;
  pointer-events: none !important;
}

.hero .hero-arrow,
.hero-arrows .hero-arrow {
  top: 50% !important;
  width: 44px !important;
  height: 84px !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  z-index: 181 !important;
  color: #fff !important;
  background: transparent !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  pointer-events: auto !important;
  transform: translateY(-50%) !important;
}

.hero .hero-arrow-prev,
.hero-arrow-prev {
  left: clamp(14px, 1.5vw, 26px) !important;
}

.hero .hero-arrow-next,
.hero-arrow-next {
  right: clamp(14px, 1.5vw, 26px) !important;
}

.hero .hero-arrow::before,
.hero-arrows .hero-arrow::before {
  width: 16px !important;
  height: 16px !important;
  opacity: 1 !important;
  border-color: #fff !important;
  border-style: solid !important;
  border-width: 0 0 2px 2px !important;
  filter: drop-shadow(0 0 12px rgba(0, 0, 0, .92)) !important;
}

/* FINAL 2026-06-09: services balanced 2x2 grid */
#services.ai-origin {
  min-height: 100vh !important;
  height: auto !important;
  padding: clamp(84px, 8vh, 104px) clamp(40px, 6vw, 96px) clamp(56px, 6vh, 76px) !important;
  background:
    radial-gradient(circle at 78% 20%, rgba(29, 158, 117, .12), transparent 28%),
    linear-gradient(145deg, #03110b 0%, #06170f 45%, #020706 100%) !important;
  overflow: hidden !important;
}

#services .infrastructure-section {
  width: min(1180px, calc(100vw - 80px)) !important;
  max-width: 1180px !important;
  margin: 0 auto !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  gap: clamp(28px, 4vh, 44px) !important;
}

#services .infra-hero {
  max-width: 820px !important;
  margin: 0 auto !important;
  text-align: center !important;
  padding: 0 !important;
  transform: none !important;
}

#services .infra-pill {
  margin: 0 auto 14px !important;
  width: fit-content !important;
  height: auto !important;
  padding: 7px 22px !important;
  border-radius: 999px !important;
  font-size: 14px !important;
  line-height: 1.2 !important;
  color: #9FE1CB !important;
  border: 1px solid rgba(29, 158, 117, .72) !important;
  background: rgba(3, 24, 16, .48) !important;
}

#services .infra-hero h2 {
  font-size: clamp(34px, 3.4vw, 52px) !important;
  line-height: 1.12 !important;
  margin: 0 0 12px !important;
  color: #fff !important;
  font-weight: 650 !important;
  letter-spacing: .02em !important;
}

#services .infra-hero p {
  max-width: 760px !important;
  margin: 0 auto !important;
  font-size: clamp(15px, 1.3vw, 18px) !important;
  line-height: 1.55 !important;
  color: #8BBFAA !important;
}

#services .infra-metrics {
  display: none !important;
}

#services .infra-showcase {
  width: 100% !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  grid-template-rows: repeat(2, minmax(220px, 1fr)) !important;
  gap: clamp(24px, 2.4vw, 32px) !important;
  align-items: stretch !important;
  justify-content: center !important;
  min-height: 0 !important;
  height: min(52vh, 520px) !important;
}

#services .infra-module,
#services .infra-module.reverse {
  position: relative !important;
  min-height: 220px !important;
  height: 100% !important;
  width: 100% !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 112px !important;
  align-items: start !important;
  gap: 22px !important;
  padding: clamp(24px, 2.1vw, 32px) !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  background:
    radial-gradient(circle at 84% 24%, rgba(31, 230, 170, .16), transparent 34%),
    linear-gradient(135deg, rgba(255,255,255,.035), rgba(255,255,255,.012) 45%, rgba(13,42,28,.62)) !important;
  border: 1px solid rgba(93, 202, 165, .26) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 22px 54px rgba(0,0,0,.28) !important;
  cursor: pointer !important;
}

#services .infra-module:hover {
  transform: translateY(-4px) !important;
  border-color: rgba(31, 230, 170, .68) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.09), 0 26px 70px rgba(0,0,0,.38), 0 0 34px rgba(31,230,170,.09) !important;
}

#services .infra-copy {
  position: relative !important;
  z-index: 2 !important;
  min-width: 0 !important;
  max-width: none !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  align-items: flex-start !important;
  text-align: left !important;
}

#services .infra-copy > span {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin: 0 0 14px !important;
  color: #5DCAA5 !important;
  font-size: 13px !important;
  line-height: 1.2 !important;
  letter-spacing: .08em !important;
  font-weight: 650 !important;
  white-space: nowrap !important;
}

#services .infra-copy h3 {
  color: #fff !important;
  font-size: clamp(25px, 2.1vw, 32px) !important;
  line-height: 1.18 !important;
  letter-spacing: 0 !important;
  margin: 0 0 14px !important;
  font-weight: 650 !important;
  white-space: normal !important;
}

#services .infra-copy p {
  color: #8BBFAA !important;
  font-size: clamp(14px, 1.1vw, 16px) !important;
  line-height: 1.6 !important;
  margin: 0 !important;
  max-width: 42em !important;
  overflow: visible !important;
}

#services .infra-copy ul {
  margin: 18px 0 0 !important;
  padding: 0 !important;
  display: grid !important;
  gap: 8px !important;
  list-style: none !important;
}

#services .infra-copy li {
  color: rgba(255,255,255,.88) !important;
  font-size: 13px !important;
  line-height: 1.45 !important;
  display: flex !important;
  align-items: center !important;
  gap: 9px !important;
  white-space: nowrap !important;
}

#services .infra-copy li::before {
  content: "" !important;
  width: 7px !important;
  height: 7px !important;
  border-radius: 999px !important;
  background: #22e6a4 !important;
  box-shadow: 0 0 12px rgba(34,230,164,.62) !important;
  flex: 0 0 auto !important;
}

#services .infra-visual,
#services .infra-module.reverse .infra-visual,
#services .infra-module .infra-visual {
  position: relative !important;
  z-index: 2 !important;
  align-self: start !important;
  justify-self: end !important;
  width: 104px !important;
  height: 104px !important;
  min-width: 104px !important;
  margin: 0 !important;
  inset: auto !important;
  transform: none !important;
  display: grid !important;
  place-items: center !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  overflow: visible !important;
}

#services .infra-visual img,
#services .infra-visual-base img,
#services .infra-orb-static,
#services .infra-orb-spin {
  width: 104px !important;
  height: 104px !important;
  max-width: 104px !important;
  max-height: 104px !important;
  object-fit: contain !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  filter: drop-shadow(0 0 24px rgba(31,230,170,.34)) !important;
}

#services .infra-visual-base .infra-orb-static {
  display: none !important;
}

#services .infra-visual-base .infra-orb-spin {
  display: block !important;
  animation: serviceOrbTurn 8s linear infinite !important;
  transform-origin: 50% 50% !important;
}

@keyframes serviceOrbTurn {
  from { transform: rotateY(0deg) rotateZ(0deg); }
  to { transform: rotateY(360deg) rotateZ(0deg); }
}

@media (max-width: 980px) {
  #services.ai-origin {
    padding: 80px 24px 56px !important;
  }
  #services .infrastructure-section {
    width: 100% !important;
  }
  #services .infra-showcase {
    height: auto !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: none !important;
  }
  #services .infra-module,
  #services .infra-module.reverse {
    min-height: 210px !important;
  }
}

@media (max-width: 640px) {
  #services .infra-module,
  #services .infra-module.reverse {
    grid-template-columns: 1fr 80px !important;
    padding: 22px !important;
  }
  #services .infra-visual,
  #services .infra-visual img,
  #services .infra-orb-spin {
    width: 78px !important;
    height: 78px !important;
    min-width: 78px !important;
  }
  #services .infra-copy li {
    white-space: normal !important;
  }
}

/* FINAL 2026-06-09: hard reset stale service grid spans */
#services .infra-showcase > .infra-module,
#services .infra-showcase > .infra-module.reverse,
#services .infra-showcase > #service-native,
#services .infra-showcase > #service-workflow,
#services .infra-showcase > #service-opc,
#services .infra-showcase > #service-growth {
  grid-row: auto !important;
  grid-column: auto !important;
  grid-area: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  height: 100% !important;
}

#services .infra-showcase {
  grid-auto-flow: row !important;
  grid-auto-rows: 1fr !important;
}

#services .infra-showcase > #service-native { order: 1 !important; }
#services .infra-showcase > #service-workflow { order: 2 !important; }
#services .infra-showcase > #service-opc { order: 3 !important; }
#services .infra-showcase > #service-growth { order: 4 !important; }

#services .infra-showcase > #service-native .infra-visual-base .infra-orb-spin,
#services .infra-showcase > #service-native .infra-visual-base img.infra-orb-spin {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: 104px !important;
  height: 104px !important;
}

#services .infra-showcase > #service-native .infra-visual-base .infra-orb-static {
  display: none !important;
}

/* FINAL 2026-06-09: compact one-screen services rhythm */
#services.ai-origin {
  min-height: calc(100vh - 74px) !important;
  padding: clamp(58px, 6vh, 70px) clamp(40px, 6vw, 88px) clamp(38px, 5vh, 48px) !important;
}

#services .infrastructure-section {
  width: min(1120px, calc(100vw - 80px)) !important;
  max-width: 1120px !important;
  gap: clamp(22px, 3vh, 28px) !important;
}

#services .infra-hero {
  max-width: 760px !important;
}

#services .infra-pill {
  padding: 6px 18px !important;
  margin-bottom: 12px !important;
  font-size: 13px !important;
}

#services .infra-hero h2 {
  font-size: clamp(32px, 3vw, 44px) !important;
  margin-bottom: 10px !important;
}

#services .infra-hero p {
  font-size: clamp(14px, 1.15vw, 16px) !important;
  line-height: 1.5 !important;
}

#services .infra-showcase {
  height: min(48vh, 420px) !important;
  grid-template-rows: repeat(2, minmax(188px, 1fr)) !important;
  gap: clamp(24px, 2.3vw, 30px) !important;
}

#services .infra-module,
#services .infra-module.reverse {
  min-height: 188px !important;
  grid-template-columns: minmax(0, 1fr) 96px !important;
  gap: 18px !important;
  padding: clamp(22px, 1.8vw, 28px) !important;
}

#services .infra-copy > span {
  margin-bottom: 11px !important;
  font-size: 12px !important;
}

#services .infra-copy h3 {
  font-size: clamp(24px, 1.9vw, 29px) !important;
  margin-bottom: 12px !important;
}

#services .infra-copy p {
  font-size: clamp(13px, 1vw, 15px) !important;
  line-height: 1.58 !important;
}

#services .infra-copy ul {
  display: none !important;
}

#services .infra-visual,
#services .infra-module.reverse .infra-visual,
#services .infra-module .infra-visual {
  width: 92px !important;
  height: 92px !important;
  min-width: 92px !important;
}

#services .infra-visual img,
#services .infra-visual-base img,
#services .infra-orb-static,
#services .infra-orb-spin,
#services .infra-module .infra-visual img {
  width: 92px !important;
  height: 92px !important;
  max-width: 92px !important;
  max-height: 92px !important;
  object-fit: contain !important;
}

/* FINAL 2026-06-09: balanced services grid, no overflow */
#services.ai-origin {
  min-height: calc(100vh - 78px) !important;
  height: auto !important;
  padding: 52px clamp(34px, 5vw, 72px) 40px !important;
  overflow: hidden !important;
}

#services .infrastructure-section {
  width: min(1120px, calc(100vw - 72px)) !important;
  max-width: 1120px !important;
  gap: 22px !important;
}

#services .infra-hero {
  max-width: 780px !important;
  margin-inline: auto !important;
}

#services .infra-pill {
  margin-bottom: 10px !important;
  padding: 6px 18px !important;
  font-size: 13px !important;
}

#services .infra-hero h2 {
  font-size: clamp(32px, 3vw, 44px) !important;
  line-height: 1.15 !important;
  margin-bottom: 8px !important;
}

#services .infra-hero p {
  font-size: clamp(14px, 1.1vw, 16px) !important;
  line-height: 1.45 !important;
  margin: 0 auto !important;
  max-width: 760px !important;
}

#services .infra-showcase {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  grid-template-rows: repeat(2, minmax(174px, 1fr)) !important;
  grid-auto-flow: row !important;
  grid-auto-rows: 1fr !important;
  gap: clamp(24px, 2vw, 30px) !important;
  width: 100% !important;
  height: min(46vh, 396px) !important;
  min-height: 360px !important;
  max-height: 420px !important;
}

#services .infra-showcase > .infra-module,
#services .infra-showcase > .infra-module.reverse,
#services .infra-showcase > #service-native,
#services .infra-showcase > #service-workflow,
#services .infra-showcase > #service-opc,
#services .infra-showcase > #service-growth {
  grid-row: auto !important;
  grid-column: auto !important;
  grid-area: auto !important;
  order: initial !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
  padding: clamp(20px, 1.7vw, 26px) !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 90px !important;
  align-items: center !important;
  gap: 18px !important;
  overflow: hidden !important;
}

#services .infra-showcase > #service-native { order: 1 !important; }
#services .infra-showcase > #service-workflow { order: 2 !important; }
#services .infra-showcase > #service-opc { order: 3 !important; }
#services .infra-showcase > #service-growth { order: 4 !important; }

#services .infra-copy {
  min-width: 0 !important;
  align-self: center !important;
}

#services .infra-copy > span {
  margin-bottom: 9px !important;
  font-size: 12px !important;
  line-height: 1.2 !important;
}

#services .infra-copy h3 {
  font-size: clamp(23px, 1.75vw, 29px) !important;
  line-height: 1.18 !important;
  margin-bottom: 9px !important;
  white-space: normal !important;
}

#services .infra-copy p {
  font-size: clamp(13px, 1vw, 15px) !important;
  line-height: 1.55 !important;
  margin: 0 !important;
  max-width: 38em !important;
}

#services .infra-copy ul,
#services .infra-card-actions,
#services .infra-tabs,
#services .infra-stats {
  display: none !important;
}

#services .infra-visual,
#services .infra-module.reverse .infra-visual,
#services .infra-module .infra-visual,
#services .infra-visual-base {
  justify-self: end !important;
  align-self: center !important;
  width: 88px !important;
  height: 88px !important;
  min-width: 88px !important;
  max-width: 88px !important;
  max-height: 88px !important;
  overflow: visible !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

#services .infra-visual img,
#services .infra-visual-base img,
#services .infra-orb-static,
#services .infra-orb-spin,
#services .infra-module .infra-visual img {
  display: block !important;
  width: 88px !important;
  height: 88px !important;
  max-width: 88px !important;
  max-height: 88px !important;
  object-fit: contain !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

#services #service-native .infra-visual-base .infra-orb-static {
  display: none !important;
}

#services #service-native .infra-visual-base .infra-orb-spin {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  animation: serviceOrbTurn 8s linear infinite !important;
  transform-origin: 50% 50% !important;
}

@media (max-height: 780px) and (min-width: 900px) {
  #services.ai-origin {
    padding-top: 42px !important;
    padding-bottom: 32px !important;
  }

  #services .infrastructure-section {
    gap: 18px !important;
  }

  #services .infra-showcase {
    height: 368px !important;
    min-height: 348px !important;
    gap: 22px !important;
  }
}

/* FINAL 2026-06-09: strict balanced 2x2 services screen */
#services.ai-origin {
  min-height: calc(100vh - 78px) !important;
  height: auto !important;
  padding: 40px clamp(32px, 5vw, 64px) 34px !important;
  overflow: hidden !important;
}

#services.ai-origin,
#services.ai-origin * {
  box-sizing: border-box !important;
}

#services .infrastructure-section {
  width: min(1080px, calc(100vw - 64px)) !important;
  max-width: 1080px !important;
  gap: 18px !important;
  margin-inline: auto !important;
}

#services .infra-hero {
  max-width: 720px !important;
  margin-inline: auto !important;
}

#services .infra-pill {
  margin-bottom: 8px !important;
  padding: 5px 16px !important;
  font-size: 12px !important;
  line-height: 1.2 !important;
}

#services .infra-hero h2 {
  font-size: clamp(30px, 2.7vw, 40px) !important;
  line-height: 1.12 !important;
  margin: 0 0 7px !important;
  white-space: normal !important;
}

#services .infra-hero p {
  max-width: 660px !important;
  margin: 0 auto !important;
  font-size: 14px !important;
  line-height: 1.42 !important;
}

#services .infra-showcase {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  grid-template-rows: repeat(2, minmax(0, 1fr)) !important;
  width: 100% !important;
  max-width: 100% !important;
  height: 382px !important;
  min-height: 382px !important;
  max-height: 382px !important;
  gap: 24px !important;
  overflow: visible !important;
}

#services .infra-showcase > .infra-module,
#services .infra-showcase > .infra-module.reverse,
#services .infra-showcase > #service-native,
#services .infra-showcase > #service-workflow,
#services .infra-showcase > #service-opc,
#services .infra-showcase > #service-growth {
  grid-area: auto !important;
  grid-row: auto !important;
  grid-column: auto !important;
  order: initial !important;
  width: auto !important;
  min-width: 0 !important;
  height: 179px !important;
  min-height: 0 !important;
  max-height: 179px !important;
  padding: 22px !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 96px !important;
  align-items: center !important;
  gap: 18px !important;
  overflow: hidden !important;
  border-radius: 12px !important;
}

#services .infra-showcase > #service-native { order: 1 !important; }
#services .infra-showcase > #service-workflow { order: 2 !important; }
#services .infra-showcase > #service-opc { order: 3 !important; }
#services .infra-showcase > #service-growth { order: 4 !important; }

#services .infra-copy {
  min-width: 0 !important;
  align-self: center !important;
  overflow: hidden !important;
}

#services .infra-copy > span {
  margin: 0 0 8px !important;
  font-size: 12px !important;
  line-height: 1.2 !important;
  letter-spacing: 0.06em !important;
}

#services .infra-copy h3 {
  margin: 0 0 8px !important;
  font-size: clamp(23px, 1.8vw, 28px) !important;
  line-height: 1.16 !important;
  white-space: normal !important;
  color: #d4f5e9 !important;
}

#services #service-native .infra-copy h3 {
  color: #ffffff !important;
}

#services .infra-copy p {
  margin: 0 !important;
  max-width: 31em !important;
  font-size: 13px !important;
  line-height: 1.52 !important;
  color: #8bbfaa !important;
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
  overflow: hidden !important;
}

#services .infra-copy ul,
#services .infra-card-actions,
#services .infra-tabs,
#services .infra-stats {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

#services .infra-showcase .infra-module .infra-visual,
#services .infra-showcase .infra-module .infra-visual-base {
  position: relative !important;
  inset: auto !important;
  justify-self: end !important;
  align-self: center !important;
  flex: 0 0 96px !important;
  width: 96px !important;
  height: 96px !important;
  min-width: 0 !important;
  max-width: 96px !important;
  max-height: 96px !important;
  aspect-ratio: auto !important;
  transform: none !important;
  overflow: visible !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

#services .infra-showcase .infra-module .infra-visual img,
#services .infra-showcase .infra-module .infra-visual-base img {
  display: block !important;
  width: 96px !important;
  height: 96px !important;
  min-width: 0 !important;
  max-width: 96px !important;
  min-height: 0 !important;
  max-height: 96px !important;
  aspect-ratio: auto !important;
  object-fit: contain !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

#services #service-native .infra-visual-base .infra-orb-static {
  display: none !important;
}

#services #service-native .infra-visual-base .infra-orb-spin {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  animation: serviceOrbTurn 8s linear infinite !important;
  transform-origin: 50% 50% !important;
}

@media (max-height: 760px) and (min-width: 900px) {
  #services.ai-origin {
    padding-top: 34px !important;
    padding-bottom: 28px !important;
  }

  #services .infrastructure-section {
    gap: 16px !important;
  }

  #services .infra-showcase {
    height: 360px !important;
    min-height: 360px !important;
    max-height: 360px !important;
    gap: 20px !important;
  }

  #services .infra-showcase > .infra-module,
  #services .infra-showcase > .infra-module.reverse {
    height: 170px !important;
    max-height: 170px !important;
    padding: 20px !important;
  }
}

/* FINAL 2026-06-09: keep the native orb animated without layout expansion */
@keyframes serviceOrbTurn {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

#services #service-native .infra-visual-base {
  width: 92px !important;
  height: 92px !important;
  max-width: 92px !important;
  max-height: 92px !important;
  overflow: visible !important;
}

#services #service-native .infra-visual-base img.infra-orb-spin {
  width: 92px !important;
  height: 92px !important;
  max-width: 92px !important;
  max-height: 92px !important;
  animation: serviceOrbTurn 10s linear infinite !important;
  transform-origin: 50% 50% !important;
  will-change: transform !important;
}

/* FINAL 2026-06-09: lock text-left / icon-right in every balanced card */
#services .infra-showcase > .infra-module .infra-copy {
  grid-column: 1 !important;
  grid-row: 1 !important;
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
  justify-self: stretch !important;
}

#services .infra-showcase > .infra-module .infra-visual,
#services .infra-showcase > .infra-module .infra-visual-base {
  grid-column: 2 !important;
  grid-row: 1 !important;
}

#services .infra-showcase > .infra-module .infra-copy ul,
#services .infra-showcase > .infra-module .infra-copy li {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  max-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

#services #service-native .infra-visual-base::before,
#services #service-native .infra-visual-base::after {
  display: none !important;
  content: none !important;
}

#services #service-native .infra-visual-base {
  display: grid !important;
  place-items: center !important;
  height: 92px !important;
  min-height: 0 !important;
  max-height: 92px !important;
}

#services .infra-showcase > .infra-module::before,
#services .infra-showcase > .infra-module::after {
  display: none !important;
  content: none !important;
}

#services .infra-showcase > .infra-module {
  contain: layout paint !important;
}

/* FINAL 2026-06-09: balanced 2x2 infrastructure screen */
#services.ai-origin {
  min-height: 100vh !important;
  height: auto !important;
  padding: clamp(104px, 12vh, 132px) clamp(42px, 5.8vw, 96px) clamp(48px, 6vh, 72px) !important;
  display: flex !important;
  align-items: center !important;
  background:
    radial-gradient(circle at 78% 18%, rgba(29, 158, 117, 0.16), transparent 34%),
    radial-gradient(circle at 18% 84%, rgba(29, 158, 117, 0.10), transparent 32%),
    linear-gradient(180deg, #020504 0%, #06130d 100%) !important;
  overflow: hidden !important;
}

#services.ai-origin::before,
#services.ai-origin::after,
#services .services-depth-field,
#services .infra-tabs,
#services .infra-metrics,
#services .infra-card-actions {
  display: none !important;
  content: none !important;
}

#services .infrastructure-section {
  width: min(1180px, 100%) !important;
  margin: 0 auto !important;
  padding: 0 !important;
  display: grid !important;
  grid-template-rows: auto 1fr !important;
  gap: clamp(22px, 3vh, 34px) !important;
  align-items: stretch !important;
}

#services .infra-hero {
  position: relative !important;
  z-index: 2 !important;
  width: 100% !important;
  max-width: 760px !important;
  margin: 0 auto !important;
  padding: 0 !important;
  text-align: center !important;
  display: block !important;
  min-height: 0 !important;
}

#services .infra-pill {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 0 12px !important;
  padding: 6px 18px !important;
  border: 1px solid rgba(29, 158, 117, 0.72) !important;
  border-radius: 999px !important;
  color: #9fe1cb !important;
  font-size: 12px !important;
  line-height: 1 !important;
  letter-spacing: 0.08em !important;
  background: rgba(2, 12, 8, 0.38) !important;
}

#services .infra-pill span {
  color: #21e4a1 !important;
  margin-right: 8px !important;
}

#services .infra-hero h2 {
  display: block !important;
  margin: 0 0 10px !important;
  color: #fff !important;
  font-size: clamp(34px, 3.15vw, 46px) !important;
  line-height: 1.12 !important;
  font-weight: 650 !important;
  letter-spacing: 0 !important;
  white-space: normal !important;
  text-wrap: balance !important;
}

#services .infra-hero p {
  display: block !important;
  margin: 0 auto !important;
  max-width: 720px !important;
  color: #68d7b1 !important;
  font-size: clamp(14px, 1vw, 16px) !important;
  line-height: 1.55 !important;
  font-weight: 400 !important;
}

#services .infra-showcase {
  position: relative !important;
  z-index: 2 !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  grid-template-rows: repeat(2, minmax(0, 1fr)) !important;
  gap: clamp(24px, 2vw, 32px) !important;
  width: 100% !important;
  max-width: 100% !important;
  height: min(50vh, 430px) !important;
  min-height: 380px !important;
  max-height: 430px !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
}

#services .infra-showcase::before,
#services .infra-showcase::after {
  display: none !important;
  content: none !important;
}

#services .infra-showcase > .infra-module,
#services .infra-showcase > .infra-module.reverse,
#services .infra-showcase > #service-native,
#services .infra-showcase > #service-workflow,
#services .infra-showcase > #service-opc,
#services .infra-showcase > #service-growth {
  grid-area: auto !important;
  grid-column: auto !important;
  grid-row: auto !important;
  order: initial !important;
  width: auto !important;
  max-width: none !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  padding: clamp(22px, 2vw, 28px) !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 118px !important;
  align-items: center !important;
  gap: clamp(18px, 2vw, 28px) !important;
  overflow: hidden !important;
  contain: layout paint !important;
  border-radius: 12px !important;
  border: 1px solid rgba(29, 158, 117, 0.34) !important;
  background:
    radial-gradient(circle at 82% 42%, rgba(29, 158, 117, 0.24), transparent 40%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.012)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 18px 44px rgba(0,0,0,0.28) !important;
}

#services .infra-showcase > .infra-module::before,
#services .infra-showcase > .infra-module::after,
#services .infra-showcase > .infra-module .infra-copy::before,
#services .infra-showcase > .infra-module .infra-copy::after {
  display: none !important;
  content: none !important;
}

#services .infra-showcase > #service-native { order: 1 !important; }
#services .infra-showcase > #service-workflow { order: 2 !important; }
#services .infra-showcase > #service-opc { order: 3 !important; }
#services .infra-showcase > #service-growth { order: 4 !important; }

#services .infra-showcase > .infra-module .infra-copy {
  grid-column: 1 !important;
  grid-row: 1 !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: 100% !important;
  justify-self: stretch !important;
  align-self: center !important;
  overflow: hidden !important;
}

#services .infra-showcase > .infra-module .infra-copy > span {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  margin: 0 0 12px !important;
  color: #5dcaa5 !important;
  font-size: 13px !important;
  line-height: 1.2 !important;
  letter-spacing: 0.04em !important;
  font-weight: 650 !important;
}

#services .infra-showcase > .infra-module .infra-copy h3 {
  margin: 0 0 12px !important;
  color: #d4f5e9 !important;
  font-size: clamp(26px, 2.2vw, 34px) !important;
  line-height: 1.16 !important;
  font-weight: 650 !important;
  letter-spacing: 0 !important;
  white-space: normal !important;
  overflow: visible !important;
}

#services .infra-showcase > #service-native .infra-copy h3 {
  color: #fff !important;
}

#services .infra-showcase > .infra-module .infra-copy p {
  margin: 0 !important;
  width: 100% !important;
  max-width: 32em !important;
  color: #8bbfaa !important;
  font-size: clamp(13px, 1.05vw, 15px) !important;
  line-height: 1.6 !important;
  font-weight: 400 !important;
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
  overflow: hidden !important;
}

#services .infra-showcase > .infra-module .infra-copy ul,
#services .infra-showcase > .infra-module .infra-copy li {
  display: none !important;
}

#services .infra-showcase > .infra-module .infra-visual,
#services .infra-showcase > .infra-module .infra-visual-base {
  grid-column: 2 !important;
  grid-row: 1 !important;
  position: relative !important;
  inset: auto !important;
  justify-self: end !important;
  align-self: center !important;
  width: 118px !important;
  height: 118px !important;
  min-width: 118px !important;
  max-width: 118px !important;
  max-height: 118px !important;
  display: grid !important;
  place-items: center !important;
  overflow: visible !important;
  transform: none !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

#services .infra-showcase > .infra-module .infra-visual img,
#services .infra-showcase > .infra-module .infra-visual-base img {
  display: block !important;
  width: 118px !important;
  height: 118px !important;
  max-width: 118px !important;
  max-height: 118px !important;
  object-fit: contain !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

#services #service-native .infra-visual-base .infra-orb-static {
  display: none !important;
}

#services #service-native .infra-visual-base .infra-orb-spin {
  display: block !important;
  animation: serviceOrbTurn 10s linear infinite !important;
  transform-origin: 50% 50% !important;
  will-change: transform !important;
}

@media (max-width: 920px) {
  #services.ai-origin {
    padding: 96px 22px 42px !important;
  }

  #services .infra-showcase {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    grid-template-columns: 1fr !important;
  }

  #services .infra-showcase > .infra-module,
  #services .infra-showcase > .infra-module.reverse {
    min-height: 170px !important;
  }
}

/* FINAL FIX: lock scenario card icon anchors after legacy overrides */
#scenarios .solution-card .solution-visual,
#scenarios .solution-card:first-child .solution-visual,
#scenarios .solution-card:not(:first-child) .solution-visual {
  position: absolute !important;
  top: 24px !important;
  right: 24px !important;
  bottom: auto !important;
  left: auto !important;
  width: 62px !important;
  height: 62px !important;
  min-width: 62px !important;
  min-height: 62px !important;
  max-width: 62px !important;
  max-height: 62px !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: visible !important;
  aspect-ratio: 1 / 1 !important;
}

#scenarios .solution-card .solution-visual::before,
#scenarios .solution-card .solution-visual::after {
  display: none !important;
  content: none !important;
}

#scenarios .solution-card .solution-icon,
#scenarios .solution-card:first-child .solution-icon,
#scenarios .solution-card:not(:first-child) .solution-icon {
  position: static !important;
  inset: auto !important;
  width: 62px !important;
  height: 62px !important;
  min-width: 62px !important;
  min-height: 62px !important;
  max-width: 62px !important;
  max-height: 62px !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* FINAL 2026-06-09: remove stale vertical gaps and lock second screen into one balanced viewport */
#services.ai-origin {
  min-height: 100vh !important;
  height: auto !important;
  padding: 88px clamp(28px, 4vw, 52px) 44px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

#services .infrastructure-section {
  width: min(1160px, 100%) !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 auto !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: center !important;
  gap: 28px !important;
}

#services .infra-hero {
  flex: 0 0 auto !important;
  margin: 0 auto !important;
}

#services .infra-hero h2 {
  font-size: clamp(32px, 3vw, 42px) !important;
  line-height: 1.12 !important;
}

#services .infra-hero p {
  max-width: 680px !important;
  font-size: clamp(13px, 0.95vw, 15px) !important;
  line-height: 1.55 !important;
}

#services .infra-showcase {
  flex: 0 0 auto !important;
  height: clamp(330px, 47vh, 370px) !important;
  min-height: 330px !important;
  max-height: 370px !important;
  gap: clamp(24px, 2vw, 30px) !important;
}

#services .infra-showcase > .infra-module,
#services .infra-showcase > .infra-module.reverse,
#services .infra-showcase > #service-native,
#services .infra-showcase > #service-workflow,
#services .infra-showcase > #service-opc,
#services .infra-showcase > #service-growth {
  padding: clamp(18px, 1.6vw, 24px) !important;
  grid-template-columns: minmax(0, 1fr) 108px !important;
  gap: clamp(16px, 1.7vw, 24px) !important;
}

#services .infra-showcase > .infra-module .infra-copy > span {
  margin-bottom: 9px !important;
  font-size: 12px !important;
}

#services .infra-showcase > .infra-module .infra-copy h3 {
  margin-bottom: 9px !important;
  font-size: clamp(23px, 2vw, 30px) !important;
  line-height: 1.16 !important;
}

#services .infra-showcase > .infra-module .infra-copy p {
  font-size: clamp(12px, 0.95vw, 14px) !important;
  line-height: 1.55 !important;
}

#services .infra-showcase > .infra-module .infra-visual,
#services .infra-showcase > .infra-module .infra-visual-base {
  width: 108px !important;
  height: 108px !important;
  min-width: 108px !important;
  max-width: 108px !important;
  max-height: 108px !important;
}

#services .infra-showcase > .infra-module .infra-visual img,
#services .infra-showcase > .infra-module .infra-visual-base img {
  width: 108px !important;
  height: 108px !important;
  max-width: 108px !important;
  max-height: 108px !important;
}

/* FINAL 2026-06-09: functional premium cards for second screen */
#services.ai-origin {
  padding: 86px clamp(30px, 4vw, 56px) 46px !important;
}

#services .infrastructure-section {
  width: min(1180px, 100%) !important;
  gap: 30px !important;
}

#services .infra-showcase {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  grid-template-rows: repeat(2, minmax(0, 1fr)) !important;
  gap: 32px !important;
  height: clamp(390px, 50vh, 430px) !important;
  min-height: 390px !important;
  max-height: 430px !important;
  align-items: stretch !important;
}

#services .infra-showcase > .infra-module,
#services .infra-showcase > .infra-module.reverse,
#services .infra-showcase > #service-native,
#services .infra-showcase > #service-workflow,
#services .infra-showcase > #service-opc,
#services .infra-showcase > #service-growth {
  height: 100% !important;
  min-height: 0 !important;
  padding: 24px !important;
  grid-template-columns: minmax(0, 1fr) 104px !important;
  gap: 22px !important;
  align-items: center !important;
  cursor: pointer !important;
  overflow: hidden !important;
  border: 1px solid rgba(29, 158, 117, 0.28) !important;
  transition:
    transform 0.34s ease,
    border-color 0.34s ease,
    box-shadow 0.34s ease,
    background 0.34s ease !important;
}

#services .infra-showcase > .infra-module:hover,
#services .infra-showcase > .infra-module:focus-visible {
  transform: translateY(-5px) !important;
  border-color: rgba(159, 225, 203, 0.72) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 18px 42px rgba(0, 0, 0, 0.36),
    0 0 26px rgba(29, 158, 117, 0.18) !important;
}

#services .infra-showcase > .infra-module .infra-copy {
  align-self: stretch !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  min-height: 0 !important;
  padding: 0 0 34px !important;
  position: relative !important;
  overflow: visible !important;
}

#services .infra-showcase > .infra-module .infra-copy > span {
  margin-bottom: 8px !important;
  font-size: 12px !important;
  line-height: 1.25 !important;
}

#services .infra-showcase > .infra-module .infra-copy h3 {
  margin-bottom: 8px !important;
  font-size: clamp(23px, 1.8vw, 28px) !important;
  line-height: 1.18 !important;
}

#services .infra-showcase > .infra-module .infra-copy p {
  max-width: 30em !important;
  font-size: clamp(12px, 0.92vw, 13px) !important;
  line-height: 1.58 !important;
  -webkit-line-clamp: 2 !important;
}

#services .infra-card-link {
  position: absolute !important;
  right: 0 !important;
  bottom: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 92px !important;
  height: 28px !important;
  padding: 0 !important;
  color: #9fe1cb !important;
  font-size: 12px !important;
  line-height: 1 !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em !important;
  text-decoration: none !important;
  opacity: 0.84 !important;
  transition: color 0.24s ease, opacity 0.24s ease, transform 0.24s ease !important;
  z-index: 3 !important;
}

#services .infra-card-link:hover,
#services .infra-module:hover .infra-card-link {
  color: #24f0af !important;
  opacity: 1 !important;
  transform: translateX(3px) !important;
}

#services .infra-showcase > .infra-module .infra-copy p {
  display: block !important;
  max-height: none !important;
  overflow: visible !important;
  -webkit-line-clamp: unset !important;
  -webkit-box-orient: initial !important;
}

#services .infra-showcase > .infra-module .infra-visual,
#services .infra-showcase > .infra-module .infra-visual-base {
  width: 104px !important;
  height: 104px !important;
  min-width: 104px !important;
  max-width: 104px !important;
  max-height: 104px !important;
}

#services .infra-showcase > .infra-module .infra-visual img,
#services .infra-showcase > .infra-module .infra-visual-base img {
  width: 104px !important;
  height: 104px !important;
  max-width: 104px !important;
  max-height: 104px !important;
}

@media (max-width: 920px) {
  #services .infra-showcase {
    grid-template-columns: 1fr !important;
    grid-template-rows: none !important;
    gap: 18px !important;
    height: auto !important;
    max-height: none !important;
  }

  #services .infra-showcase > .infra-module,
  #services .infra-showcase > .infra-module.reverse {
    min-height: 178px !important;
  }
}

/* FINAL 2026-06-10: keep the scenario screen readable and inside one viewport */
#scenarios.ai-solutions {
  box-sizing: border-box !important;
  display: grid !important;
  grid-template-columns: minmax(300px, 0.34fr) minmax(0, 0.66fr) !important;
  align-items: center !important;
  gap: clamp(36px, 4vw, 64px) !important;
  width: 100% !important;
  min-height: 100svh !important;
  height: auto !important;
  padding: clamp(86px, 10vh, 112px) clamp(42px, 5.8vw, 96px) clamp(52px, 6vh, 70px) !important;
  overflow: hidden !important;
}

#scenarios .solution-hero {
  position: relative !important;
  z-index: 2 !important;
  width: 100% !important;
  max-width: 420px !important;
  min-width: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  align-self: center !important;
}

#scenarios .solution-badge {
  margin: 0 0 clamp(22px, 3vh, 34px) !important;
}

#scenarios .solution-hero h2 {
  max-width: 420px !important;
  margin: 0 0 22px !important;
  color: #fff !important;
  font-size: clamp(36px, 4.05vw, 54px) !important;
  font-weight: 650 !important;
  line-height: 1.14 !important;
  letter-spacing: 0 !important;
  white-space: normal !important;
  word-break: keep-all !important;
  overflow-wrap: normal !important;
  text-wrap: balance;
}

#scenarios .solution-subtitle {
  max-width: 390px !important;
  margin: 0 !important;
  font-size: clamp(14px, 0.95vw, 16px) !important;
  line-height: 1.7 !important;
  white-space: normal !important;
}

#scenarios .solution-stats {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
  max-width: 400px !important;
  margin-top: 28px !important;
}

#scenarios .solution-divider {
  display: none !important;
}

#scenarios .solution-board {
  justify-self: end !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  grid-template-rows: repeat(2, minmax(0, 1fr)) !important;
  gap: 32px 24px !important;
  width: 100% !important;
  max-width: 820px !important;
  min-width: 0 !important;
  min-height: 420px !important;
  height: min(456px, calc(100svh - 214px)) !important;
  max-height: none !important;
  align-items: stretch !important;
  overflow: visible !important;
}

#scenarios .solution-card,
#scenarios .solution-card:first-child,
#scenarios .solution-card:nth-child(2),
#scenarios .solution-card:nth-child(3),
#scenarios .solution-card:nth-child(4),
#scenarios .solution-card:nth-child(5),
#scenarios .solution-card:nth-child(6) {
  position: relative !important;
  grid-column: auto !important;
  grid-row: auto !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-end !important;
  min-width: 0 !important;
  min-height: 0 !important;
  height: auto !important;
  max-height: none !important;
  padding: 22px !important;
  overflow: hidden !important;
  border-radius: 12px !important;
  transform: none !important;
}

#scenarios .solution-card:hover {
  transform: translateY(-4px) !important;
}

#scenarios .solution-visual,
#scenarios .solution-card:first-child .solution-visual,
#scenarios .solution-card:not(:first-child) .solution-visual {
  position: absolute !important;
  top: 20px !important;
  right: 20px !important;
  bottom: auto !important;
  left: auto !important;
  width: 58px !important;
  height: 58px !important;
  opacity: 0.9 !important;
  pointer-events: none !important;
  transform: none !important;
}

#scenarios .solution-icon,
#scenarios .solution-card:first-child .solution-icon,
#scenarios .solution-card:not(:first-child) .solution-icon {
  width: 58px !important;
  height: 58px !important;
}

#scenarios .solution-content,
#scenarios .solution-card:first-child .solution-content,
#scenarios .solution-card:not(:first-child) .solution-content {
  position: relative !important;
  z-index: 2 !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  transform: none !important;
  overflow: visible !important;
}

#scenarios .solution-card span {
  display: block !important;
  margin: 0 0 12px !important;
  font-size: 13px !important;
  line-height: 1 !important;
}

#scenarios .solution-card h3,
#scenarios .solution-card:first-child h3,
#scenarios .solution-card:nth-child(6) h3 {
  display: block !important;
  max-width: 100% !important;
  max-height: none !important;
  margin: 0 0 11px !important;
  overflow: visible !important;
  color: #fff !important;
  font-size: clamp(19px, 1.45vw, 25px) !important;
  line-height: 1.24 !important;
  white-space: normal !important;
  word-break: keep-all !important;
  overflow-wrap: break-word !important;
  text-wrap: balance;
}

#scenarios .solution-card p,
#scenarios .solution-card:first-child p,
#scenarios .solution-card:nth-child(6) p {
  display: block !important;
  max-width: 100% !important;
  max-height: none !important;
  margin: 0 !important;
  overflow: visible !important;
  color: #8bbfaa !important;
  font-size: clamp(12px, 0.86vw, 13px) !important;
  line-height: 1.62 !important;
  -webkit-line-clamp: unset !important;
  -webkit-box-orient: initial !important;
}

@media (max-width: 1280px) {
  #scenarios.ai-solutions {
    grid-template-columns: minmax(280px, 0.32fr) minmax(0, 0.68fr) !important;
    gap: 30px !important;
    padding-inline: 42px !important;
  }

  #scenarios .solution-board {
    gap: 26px 20px !important;
    max-width: 760px !important;
  }

  #scenarios .solution-card h3 {
    font-size: clamp(18px, 1.55vw, 22px) !important;
  }
}

@media (max-height: 780px) and (min-width: 921px) {
  #scenarios.ai-solutions {
    padding-top: 82px !important;
    padding-bottom: 44px !important;
  }

  #scenarios .solution-hero h2 {
    font-size: clamp(34px, 3.65vw, 48px) !important;
    line-height: 1.12 !important;
  }

  #scenarios .solution-board {
    min-height: 398px !important;
    height: min(426px, calc(100svh - 190px)) !important;
    gap: 24px 20px !important;
  }

  #scenarios .solution-card {
    padding: 20px !important;
  }
}

@media (max-width: 920px) {
  #scenarios.ai-solutions {
    grid-template-columns: 1fr !important;
    min-height: auto !important;
    padding: 88px 24px 48px !important;
    overflow: visible !important;
  }

  #scenarios .solution-hero,
  #scenarios .solution-hero h2,
  #scenarios .solution-subtitle {
    max-width: 100% !important;
  }

  #scenarios .solution-board {
    grid-template-columns: 1fr !important;
    grid-template-rows: none !important;
    height: auto !important;
    min-height: 0 !important;
    max-width: 100% !important;
    gap: 16px !important;
  }

  #scenarios .solution-card {
    min-height: 190px !important;
  }
}

/* 2026-06-12: keep scenario badges and mini labels from covering content. */
#scenarios .solution-stats {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 12px !important;
}

#scenarios .solution-stats span {
  box-sizing: border-box !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  min-width: 168px !important;
  min-height: 50px !important;
  padding: 0 18px !important;
  white-space: nowrap !important;
}

#scenarios .solution-stats strong {
  flex: 0 0 auto !important;
  line-height: 1 !important;
}

#scenarios .solution-card,
#scenarios .solution-card:first-child,
#scenarios .solution-card:nth-child(2),
#scenarios .solution-card:nth-child(3),
#scenarios .solution-card:nth-child(4),
#scenarios .solution-card:nth-child(5),
#scenarios .solution-card:nth-child(6) {
  padding-bottom: 24px !important;
}

#scenarios .solution-card .solution-content,
#scenarios .solution-card:first-child .solution-content,
#scenarios .solution-card:not(:first-child) .solution-content {
  min-height: 100% !important;
  padding-bottom: 0 !important;
}

#scenarios .solution-card-link {
  margin-top: auto !important;
  margin-bottom: 0 !important;
}

#scenarios .solution-tag {
  position: static !important;
  inset: auto !important;
  z-index: 3 !important;
  flex: 0 0 auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: fit-content !important;
  max-width: 100% !important;
  min-height: 26px !important;
  margin-top: 14px !important;
  padding: 6px 12px !important;
  white-space: nowrap !important;
  transform: none !important;
}

@media (max-height: 820px) and (min-width: 921px) {
  #scenarios .solution-card,
  #scenarios .solution-card:first-child,
  #scenarios .solution-card:nth-child(2),
  #scenarios .solution-card:nth-child(3),
  #scenarios .solution-card:nth-child(4),
  #scenarios .solution-card:nth-child(5),
  #scenarios .solution-card:nth-child(6) {
    min-height: 218px !important;
  }
}

@media (max-width: 920px) {
  #scenarios .solution-stats span {
    min-width: 0 !important;
    flex: 1 1 150px !important;
  }
}

/* 2026-06-12 platform entry and appointment modal. */
.platform-entry {
  min-height: min(900px, 100svh) !important;
  padding: clamp(96px, 10vh, 128px) 0 clamp(72px, 9vh, 110px) !important;
  background:
    radial-gradient(circle at 22% 30%, rgba(32, 229, 163, 0.16), transparent 32%),
    radial-gradient(circle at 78% 64%, rgba(31, 111, 178, 0.16), transparent 34%),
    linear-gradient(180deg, #03100b 0%, #05080d 100%) !important;
}

.platform-stage {
  width: min(1440px, calc(100vw - 112px)) !important;
  margin-inline: auto !important;
  display: grid !important;
  grid-template-columns: minmax(300px, 0.78fr) minmax(0, 1.22fr) !important;
  align-items: center !important;
  gap: clamp(36px, 5vw, 84px) !important;
}

.platform-copy h2 {
  margin: 16px 0 18px !important;
  color: #f5fff9 !important;
  font-size: clamp(38px, 4.2vw, 68px) !important;
  font-weight: 650 !important;
  line-height: 1.08 !important;
  letter-spacing: 0 !important;
}

.platform-copy p {
  max-width: 560px !important;
  margin: 0 !important;
  color: rgba(177, 218, 200, 0.78) !important;
  font-size: 16px !important;
  line-height: 1.85 !important;
}

.platform-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
  margin-top: 30px !important;
}

.platform-actions a,
.platform-console-card a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 42px !important;
  padding: 0 18px !important;
  border: 1px solid rgba(32, 229, 163, 0.36) !important;
  border-radius: 999px !important;
  color: #dffbed !important;
  background: rgba(32, 229, 163, 0.08) !important;
  text-decoration: none !important;
  font-size: 13px !important;
  transition: transform 0.28s ease, border-color 0.28s ease, background 0.28s ease !important;
}

.platform-actions a:hover,
.platform-console-card a:hover {
  transform: translateY(-2px) !important;
  border-color: rgba(32, 229, 163, 0.72) !important;
  background: rgba(32, 229, 163, 0.16) !important;
}

.platform-console {
  position: relative !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr) !important;
  gap: 18px !important;
}

.platform-console::before {
  content: "" !important;
  position: absolute !important;
  inset: -28px !important;
  border: 1px solid rgba(157, 242, 207, 0.10) !important;
  border-radius: 28px !important;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px) !important;
  background-size: 36px 36px !important;
  opacity: 0.46 !important;
  pointer-events: none !important;
}

.platform-console-card {
  position: relative !important;
  z-index: 1 !important;
  min-height: 230px !important;
  padding: 28px !important;
  border: 1px solid rgba(157, 242, 207, 0.16) !important;
  border-radius: 16px !important;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.018)),
    rgba(5, 24, 18, 0.74) !important;
  box-shadow: 0 28px 82px rgba(0, 0, 0, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
  backdrop-filter: blur(18px) saturate(1.08) !important;
}

.platform-console-card.is-primary {
  grid-row: span 2 !important;
  min-height: 478px !important;
  background:
    radial-gradient(circle at 70% 24%, rgba(32, 229, 163, 0.22), transparent 34%),
    linear-gradient(145deg, rgba(32, 229, 163, 0.12), rgba(255, 255, 255, 0.026)),
    rgba(4, 22, 16, 0.82) !important;
}

.platform-console-card span {
  color: #5dcaa5 !important;
  font-size: 12px !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
}

.platform-console-card h3 {
  margin: 18px 0 12px !important;
  color: #ffffff !important;
  font-size: clamp(22px, 2vw, 34px) !important;
  line-height: 1.18 !important;
  letter-spacing: 0 !important;
}

.platform-console-card p {
  max-width: 360px !important;
  margin: 0 0 24px !important;
  color: rgba(177, 218, 200, 0.76) !important;
  font-size: 14px !important;
  line-height: 1.75 !important;
}

.contact-modal {
  position: fixed !important;
  inset: 0 !important;
  z-index: 1200 !important;
  display: grid !important;
  place-items: center !important;
  padding: 24px !important;
  background: rgba(1, 8, 6, 0.72) !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity 0.25s ease !important;
}

.contact-modal.is-open {
  opacity: 1 !important;
  pointer-events: auto !important;
}

.contact-modal-panel {
  position: relative !important;
  width: min(920px, 100%) !important;
  max-height: calc(100svh - 48px) !important;
  overflow: auto !important;
  display: grid !important;
  grid-template-columns: minmax(260px, 0.82fr) minmax(0, 1.18fr) !important;
  gap: 28px !important;
  padding: clamp(24px, 4vw, 40px) !important;
  border: 1px solid rgba(157, 242, 207, 0.22) !important;
  border-radius: 18px !important;
  background:
    radial-gradient(circle at 18% 14%, rgba(32, 229, 163, 0.18), transparent 34%),
    linear-gradient(145deg, rgba(8, 30, 21, 0.98), rgba(3, 10, 13, 0.98)) !important;
  box-shadow: 0 34px 120px rgba(0, 0, 0, 0.62) !important;
}

.contact-modal-close {
  position: absolute !important;
  top: 16px !important;
  right: 16px !important;
  width: 38px !important;
  height: 38px !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.06) !important;
  color: #ffffff !important;
  font-size: 22px !important;
  cursor: pointer !important;
}

.contact-modal-copy span,
.contact-form label span {
  color: #5dcaa5 !important;
  font-size: 13px !important;
}

.contact-modal-copy h2 {
  margin: 18px 0 14px !important;
  color: #ffffff !important;
  font-size: clamp(30px, 3.2vw, 46px) !important;
  line-height: 1.12 !important;
  letter-spacing: 0 !important;
}

.contact-modal-copy p {
  margin: 0 !important;
  color: rgba(177, 218, 200, 0.76) !important;
  line-height: 1.8 !important;
}

.contact-form {
  display: grid !important;
  gap: 14px !important;
}

.contact-form label {
  display: grid !important;
  gap: 8px !important;
}

.contact-form input,
.contact-form select,
.contact-form textarea {
  width: 100% !important;
  min-height: 46px !important;
  border: 1px solid rgba(157, 242, 207, 0.18) !important;
  border-radius: 10px !important;
  padding: 0 14px !important;
  background: rgba(255, 255, 255, 0.06) !important;
  color: #ffffff !important;
  font: inherit !important;
  outline: none !important;
}

.contact-form textarea {
  min-height: 108px !important;
  padding-top: 12px !important;
  resize: vertical !important;
}

.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
  border-color: rgba(32, 229, 163, 0.72) !important;
  box-shadow: 0 0 0 3px rgba(32, 229, 163, 0.10) !important;
}

.contact-form button[type="submit"] {
  min-height: 48px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: linear-gradient(135deg, #20e5a3, #6ee7b7) !important;
  color: #04120c !important;
  font-weight: 700 !important;
  cursor: pointer !important;
}

.contact-form-status {
  min-height: 22px !important;
  margin: 0 !important;
  color: rgba(177, 218, 200, 0.78) !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
}

@media (max-width: 920px) {
  .platform-entry {
    padding: 86px 0 64px !important;
  }

  .platform-stage {
    width: min(100%, calc(100vw - 44px)) !important;
    grid-template-columns: 1fr !important;
  }

  .platform-console {
    grid-template-columns: 1fr !important;
  }

  .platform-console-card,
  .platform-console-card.is-primary {
    min-height: 220px !important;
    grid-row: auto !important;
  }

  .contact-modal-panel {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }

  .footer-records {
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px 14px !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }
}

/* FINAL 2026-06-10C: scenarios section anti-overlap and readable grid */
#scenarios.ai-solutions {
  box-sizing: border-box !important;
  display: grid !important;
  grid-template-columns: minmax(330px, 440px) minmax(0, 1fr) !important;
  align-items: center !important;
  column-gap: clamp(36px, 4.8vw, 78px) !important;
  width: 100% !important;
  min-height: 100svh !important;
  height: auto !important;
  padding: clamp(108px, 12vh, 134px) clamp(56px, 6vw, 118px) clamp(64px, 7vh, 84px) !important;
  overflow: hidden !important;
}

#scenarios .solution-hero {
  position: relative !important;
  z-index: 3 !important;
  width: 100% !important;
  max-width: 440px !important;
  min-width: 0 !important;
  justify-self: start !important;
  align-self: center !important;
}

#scenarios .solution-hero h2 {
  display: block !important;
  width: 100% !important;
  max-width: 440px !important;
  margin: 0 0 22px !important;
  color: #fff !important;
  font-size: clamp(34px, 3.35vw, 50px) !important;
  font-weight: 650 !important;
  line-height: 1.2 !important;
  letter-spacing: 0 !important;
  white-space: normal !important;
  word-break: keep-all !important;
  overflow-wrap: break-word !important;
  text-wrap: balance !important;
  overflow: visible !important;
}

#scenarios .solution-subtitle {
  width: 100% !important;
  max-width: 420px !important;
  margin: 0 !important;
  color: #8bbfaa !important;
  font-size: clamp(14px, 0.95vw, 16px) !important;
  line-height: 1.72 !important;
  white-space: normal !important;
  overflow-wrap: break-word !important;
}

#scenarios .solution-stats {
  max-width: 420px !important;
  margin-top: 26px !important;
}

#scenarios .solution-board {
  position: relative !important;
  z-index: 2 !important;
  justify-self: end !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  grid-template-rows: repeat(2, minmax(214px, 1fr)) !important;
  gap: 34px 26px !important;
  width: 100% !important;
  max-width: 960px !important;
  min-width: 0 !important;
  min-height: 462px !important;
  height: auto !important;
  max-height: none !important;
  align-items: stretch !important;
  overflow: visible !important;
}

#scenarios .solution-card,
#scenarios .solution-card:first-child,
#scenarios .solution-card:nth-child(2),
#scenarios .solution-card:nth-child(3),
#scenarios .solution-card:nth-child(4),
#scenarios .solution-card:nth-child(5),
#scenarios .solution-card:nth-child(6) {
  box-sizing: border-box !important;
  position: relative !important;
  grid-column: auto !important;
  grid-row: auto !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-end !important;
  align-items: flex-start !important;
  min-width: 0 !important;
  min-height: 214px !important;
  height: auto !important;
  max-height: none !important;
  padding: 26px !important;
  overflow: hidden !important;
  border-radius: 12px !important;
  transform: none !important;
}

#scenarios .solution-card:hover {
  transform: translateY(-4px) !important;
}

#scenarios .solution-card .solution-visual,
#scenarios .solution-card:first-child .solution-visual,
#scenarios .solution-card:not(:first-child) .solution-visual {
  position: absolute !important;
  top: 24px !important;
  right: 24px !important;
  bottom: auto !important;
  left: auto !important;
  width: 64px !important;
  height: 64px !important;
  opacity: 0.9 !important;
  pointer-events: none !important;
  transform: none !important;
  overflow: visible !important;
}

#scenarios .solution-card .solution-icon,
#scenarios .solution-card:first-child .solution-icon,
#scenarios .solution-card:not(:first-child) .solution-icon {
  display: block !important;
  width: 64px !important;
  height: 64px !important;
  object-fit: contain !important;
  background: transparent !important;
}

#scenarios .solution-card .solution-content,
#scenarios .solution-card:first-child .solution-content,
#scenarios .solution-card:not(:first-child) .solution-content {
  position: relative !important;
  z-index: 2 !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: visible !important;
  transform: none !important;
}

#scenarios .solution-card span {
  display: block !important;
  margin: 0 0 14px !important;
  color: #5dcaa5 !important;
  font-size: 13px !important;
  line-height: 1 !important;
  letter-spacing: 0.18em !important;
  white-space: normal !important;
}

#scenarios .solution-card h3,
#scenarios .solution-card:first-child h3,
#scenarios .solution-card:nth-child(6) h3 {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  max-height: none !important;
  margin: 0 0 12px !important;
  overflow: visible !important;
  color: #ffffff !important;
  font-size: clamp(20px, 1.25vw, 24px) !important;
  font-weight: 650 !important;
  line-height: 1.28 !important;
  white-space: normal !important;
  word-break: keep-all !important;
  overflow-wrap: break-word !important;
  text-wrap: balance !important;
}

#scenarios .solution-card p,
#scenarios .solution-card:first-child p,
#scenarios .solution-card:nth-child(6) p {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  max-height: none !important;
  margin: 0 !important;
  overflow: visible !important;
  color: #8bbfaa !important;
  font-size: clamp(12px, 0.82vw, 14px) !important;
  line-height: 1.66 !important;
  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: break-word !important;
  -webkit-line-clamp: unset !important;
  -webkit-box-orient: initial !important;
}

@media (max-width: 1440px) and (min-width: 921px) {
  #scenarios.ai-solutions {
    grid-template-columns: minmax(310px, 400px) minmax(0, 1fr) !important;
    column-gap: 34px !important;
    padding-inline: 52px !important;
  }

  #scenarios .solution-hero,
  #scenarios .solution-hero h2 {
    max-width: 400px !important;
  }

  #scenarios .solution-hero h2 {
    font-size: clamp(32px, 3vw, 46px) !important;
  }

  #scenarios .solution-board {
    max-width: 850px !important;
    grid-template-rows: repeat(2, minmax(204px, 1fr)) !important;
    gap: 30px 22px !important;
  }

  #scenarios .solution-card,
  #scenarios .solution-card:first-child,
  #scenarios .solution-card:nth-child(2),
  #scenarios .solution-card:nth-child(3),
  #scenarios .solution-card:nth-child(4),
  #scenarios .solution-card:nth-child(5),
  #scenarios .solution-card:nth-child(6) {
    min-height: 204px !important;
    padding: 24px !important;
  }
}

@media (max-height: 800px) and (min-width: 921px) {
  #scenarios.ai-solutions {
    padding-top: 90px !important;
    padding-bottom: 46px !important;
  }

  #scenarios .solution-hero h2 {
    font-size: clamp(31px, 3vw, 44px) !important;
    line-height: 1.16 !important;
  }

  #scenarios .solution-board {
    grid-template-rows: repeat(2, minmax(190px, 1fr)) !important;
    min-height: 414px !important;
    gap: 24px 20px !important;
  }

  #scenarios .solution-card,
  #scenarios .solution-card:first-child,
  #scenarios .solution-card:nth-child(2),
  #scenarios .solution-card:nth-child(3),
  #scenarios .solution-card:nth-child(4),
  #scenarios .solution-card:nth-child(5),
  #scenarios .solution-card:nth-child(6) {
    min-height: 190px !important;
    padding: 22px !important;
  }
}

@media (max-width: 920px) {
  #scenarios.ai-solutions {
    grid-template-columns: 1fr !important;
    min-height: auto !important;
    padding: 92px 24px 56px !important;
    overflow: visible !important;
  }

  #scenarios .solution-hero,
  #scenarios .solution-hero h2,
  #scenarios .solution-subtitle {
    max-width: 100% !important;
  }

  #scenarios .solution-board {
    grid-template-columns: 1fr !important;
    grid-template-rows: none !important;
    max-width: 100% !important;
    min-height: 0 !important;
    gap: 18px !important;
  }
}

/* FINAL 2026-06-10: 场景智能单元业务操作台 */
#scenarios.ai-solutions {
  --scenario-green: #00ff99;
  --scenario-green-soft: #5dcaa5;
  --scenario-text: #d7f5ea;
  --scenario-muted: #8bbfaa;
  box-sizing: border-box !important;
  min-height: 100svh !important;
  height: auto !important;
  padding: clamp(96px, 11vh, 124px) clamp(52px, 6vw, 112px) clamp(64px, 7vh, 84px) !important;
  display: grid !important;
  grid-template-columns: minmax(300px, 420px) minmax(0, 1fr) !important;
  align-items: center !important;
  column-gap: clamp(42px, 5vw, 82px) !important;
  background:
    radial-gradient(circle at 82% 26%, rgba(0, 255, 153, 0.11), transparent 34%),
    radial-gradient(circle at 17% 77%, rgba(29, 158, 117, 0.08), transparent 34%),
    linear-gradient(135deg, #020504 0%, #06140d 45%, #020504 100%) !important;
  overflow: hidden !important;
}

#scenarios.ai-solutions::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
  background:
    linear-gradient(rgba(157, 225, 203, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(157, 225, 203, 0.03) 1px, transparent 1px) !important;
  background-size: 56px 56px !important;
  mask-image: radial-gradient(circle at 67% 48%, #000 0%, transparent 72%) !important;
}

#scenarios .solution-glow {
  opacity: 0.34 !important;
}

#scenarios .solution-hero {
  position: relative !important;
  z-index: 2 !important;
  width: 100% !important;
  max-width: 420px !important;
  min-width: 0 !important;
  justify-self: start !important;
  align-self: center !important;
}

#scenarios .solution-badge {
  display: inline-flex !important;
  align-items: center !important;
  width: auto !important;
  max-width: 100% !important;
  margin: 0 0 26px !important;
  padding: 9px 20px !important;
  border: 1px solid rgba(0, 255, 153, 0.5) !important;
  border-radius: 999px !important;
  background: rgba(0, 255, 153, 0.035) !important;
  color: #9fe1cb !important;
  font-size: 13px !important;
  line-height: 1 !important;
  letter-spacing: 0.08em !important;
  white-space: nowrap !important;
}

#scenarios .solution-badge span {
  color: var(--scenario-green) !important;
  margin-right: 10px !important;
}

#scenarios .solution-hero h2 {
  display: block !important;
  width: 100% !important;
  max-width: 420px !important;
  margin: 0 0 22px !important;
  color: #fff !important;
  font-size: clamp(34px, 3.1vw, 48px) !important;
  font-weight: 650 !important;
  line-height: 1.16 !important;
  letter-spacing: 0 !important;
  white-space: normal !important;
  word-break: keep-all !important;
  overflow-wrap: break-word !important;
  text-wrap: balance !important;
  overflow: visible !important;
}

#scenarios .solution-subtitle {
  width: 100% !important;
  max-width: 390px !important;
  margin: 0 !important;
  color: var(--scenario-muted) !important;
  font-size: clamp(14px, 0.95vw, 16px) !important;
  line-height: 1.68 !important;
  white-space: normal !important;
  overflow-wrap: break-word !important;
}

#scenarios .solution-stats {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px 12px !important;
  max-width: 400px !important;
  margin-top: 26px !important;
}

#scenarios .solution-stats span {
  min-height: 34px !important;
  padding: 7px 14px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(157, 225, 203, 0.24) !important;
  background: rgba(255, 255, 255, 0.03) !important;
  color: rgba(215, 245, 234, 0.66) !important;
  font-size: 12px !important;
  line-height: 1.2 !important;
}

#scenarios .solution-stats strong {
  color: #fff !important;
  font-size: 20px !important;
  margin-right: 8px !important;
}

#scenarios .solution-divider {
  display: none !important;
}

#scenarios .solution-board {
  position: relative !important;
  z-index: 2 !important;
  justify-self: end !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  grid-template-rows: repeat(2, minmax(220px, 1fr)) !important;
  gap: 32px !important;
  width: 100% !important;
  max-width: 980px !important;
  min-width: 0 !important;
  min-height: 472px !important;
  height: auto !important;
  max-height: none !important;
  align-items: stretch !important;
  overflow: visible !important;
}

#scenarios .solution-card,
#scenarios .solution-card:first-child,
#scenarios .solution-card:nth-child(2),
#scenarios .solution-card:nth-child(3),
#scenarios .solution-card:nth-child(4),
#scenarios .solution-card:nth-child(5),
#scenarios .solution-card:nth-child(6) {
  box-sizing: border-box !important;
  position: relative !important;
  grid-column: auto !important;
  grid-row: auto !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  align-items: flex-start !important;
  min-width: 0 !important;
  min-height: 220px !important;
  height: 100% !important;
  max-height: none !important;
  padding: 24px !important;
  overflow: hidden !important;
  border-radius: 14px !important;
  border: 1px solid rgba(157, 225, 203, 0.16) !important;
  background:
    radial-gradient(circle at 84% 12%, rgba(0, 255, 153, 0.13), transparent 35%),
    linear-gradient(145deg, rgba(13, 42, 28, 0.82), rgba(3, 9, 7, 0.78)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 18px 44px rgba(0, 0, 0, 0.32) !important;
  backdrop-filter: blur(18px) !important;
  transform: none !important;
  transition: transform 0.34s ease, border-color 0.34s ease, box-shadow 0.34s ease, background 0.34s ease !important;
}

#scenarios .solution-card:hover,
#scenarios .solution-card:first-child:hover,
#scenarios .solution-card:nth-child(2):hover,
#scenarios .solution-card:nth-child(3):hover,
#scenarios .solution-card:nth-child(4):hover,
#scenarios .solution-card:nth-child(5):hover,
#scenarios .solution-card:nth-child(6):hover {
  transform: translateY(-8px) !important;
  border-color: var(--scenario-green) !important;
  background:
    radial-gradient(circle at 84% 12%, rgba(0, 255, 153, 0.2), transparent 38%),
    linear-gradient(145deg, rgba(16, 58, 38, 0.9), rgba(3, 9, 7, 0.8)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 24px 58px rgba(0, 255, 153, 0.12),
    0 22px 50px rgba(0, 0, 0, 0.36) !important;
}

#scenarios .solution-card::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
  background: linear-gradient(135deg, rgba(255,255,255,.08), transparent 28%, transparent 72%, rgba(0,255,153,.05)) !important;
  opacity: 0.56 !important;
}

#scenarios .solution-card .solution-visual,
#scenarios .solution-card:first-child .solution-visual,
#scenarios .solution-card:not(:first-child) .solution-visual {
  position: absolute !important;
  top: 24px !important;
  right: 24px !important;
  bottom: auto !important;
  left: auto !important;
  width: 58px !important;
  height: 58px !important;
  opacity: 0.7 !important;
  pointer-events: none !important;
  transform: none !important;
  overflow: visible !important;
  transition: opacity 0.32s ease, transform 0.32s ease, filter 0.32s ease !important;
}

#scenarios .solution-card:hover .solution-visual {
  opacity: 1 !important;
  transform: translateY(-2px) scale(1.04) !important;
  filter: drop-shadow(0 0 18px rgba(0, 255, 153, 0.38)) !important;
}

#scenarios .solution-card .solution-icon,
#scenarios .solution-card:first-child .solution-icon,
#scenarios .solution-card:not(:first-child) .solution-icon {
  display: block !important;
  width: 58px !important;
  height: 58px !important;
  object-fit: contain !important;
  background: transparent !important;
  stroke: var(--scenario-green) !important;
  stroke-width: 3 !important;
}

#scenarios .solution-card .solution-content,
#scenarios .solution-card:first-child .solution-content,
#scenarios .solution-card:not(:first-child) .solution-content {
  position: relative !important;
  z-index: 2 !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  min-height: 100% !important;
  padding: 0 74px 28px 0 !important;
  margin: 0 !important;
  overflow: visible !important;
  transform: none !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
}

#scenarios .solution-card span {
  display: block !important;
  margin: 0 0 28px !important;
  color: var(--scenario-green-soft) !important;
  font-size: 13px !important;
  line-height: 1 !important;
  letter-spacing: 0.18em !important;
  white-space: normal !important;
  transition: color 0.3s ease !important;
}

#scenarios .solution-card:hover span {
  color: #9fe1cb !important;
}

#scenarios .solution-card h3,
#scenarios .solution-card:first-child h3,
#scenarios .solution-card:nth-child(6) h3,
#scenarios .solution-content h3 {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  max-height: none !important;
  margin: 0 0 12px !important;
  overflow: visible !important;
  color: #ffffff !important;
  font-size: clamp(20px, 1.24vw, 24px) !important;
  font-weight: 650 !important;
  line-height: 1.34 !important;
  text-align: left !important;
  white-space: normal !important;
  word-break: keep-all !important;
  overflow-wrap: break-word !important;
  text-wrap: balance !important;
}

#scenarios .solution-card p,
#scenarios .solution-card:first-child p,
#scenarios .solution-card:nth-child(6) p,
#scenarios .solution-content p {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  max-height: none !important;
  margin: 0 0 18px !important;
  overflow: visible !important;
  color: var(--scenario-muted) !important;
  font-size: clamp(12px, 0.82vw, 14px) !important;
  line-height: 1.6 !important;
  text-align: left !important;
  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: break-word !important;
  -webkit-line-clamp: unset !important;
  -webkit-box-orient: initial !important;
}

#scenarios .solution-card-link {
  display: inline-flex !important;
  align-items: center !important;
  width: fit-content !important;
  margin-top: auto !important;
  color: rgba(139, 191, 170, 0.78) !important;
  font-size: 13px !important;
  line-height: 1.2 !important;
  text-decoration: none !important;
  letter-spacing: 0.03em !important;
  transition: color 0.28s ease, transform 0.28s ease !important;
}

#scenarios .solution-card-link:hover {
  color: #ffffff !important;
  transform: translateX(5px) !important;
}

#scenarios .solution-tag {
  position: absolute !important;
  right: 20px !important;
  bottom: 18px !important;
  z-index: 3 !important;
  padding: 5px 9px !important;
  border: 1px solid rgba(0, 255, 153, 0.18) !important;
  border-radius: 999px !important;
  background: rgba(0, 255, 153, 0.075) !important;
  color: rgba(159, 225, 203, 0.78) !important;
  font-size: 11px !important;
  font-style: normal !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  transition: color 0.28s ease, border-color 0.28s ease, background 0.28s ease !important;
}

#scenarios .solution-card:hover .solution-tag {
  color: #ffffff !important;
  border-color: rgba(0, 255, 153, 0.42) !important;
  background: rgba(0, 255, 153, 0.13) !important;
}

@media (max-width: 1500px) and (min-width: 921px) {
  #scenarios.ai-solutions {
    grid-template-columns: minmax(300px, 390px) minmax(0, 1fr) !important;
    column-gap: 36px !important;
    padding-inline: 52px !important;
  }

  #scenarios .solution-hero,
  #scenarios .solution-hero h2 {
    max-width: 390px !important;
  }

  #scenarios .solution-hero h2 {
    font-size: clamp(32px, 3vw, 46px) !important;
  }

  #scenarios .solution-board {
    max-width: 880px !important;
    grid-template-rows: repeat(2, minmax(208px, 1fr)) !important;
    gap: 26px !important;
    min-height: 442px !important;
  }

  #scenarios .solution-card,
  #scenarios .solution-card:first-child,
  #scenarios .solution-card:nth-child(2),
  #scenarios .solution-card:nth-child(3),
  #scenarios .solution-card:nth-child(4),
  #scenarios .solution-card:nth-child(5),
  #scenarios .solution-card:nth-child(6) {
    min-height: 208px !important;
    padding: 22px !important;
  }

  #scenarios .solution-card .solution-content,
  #scenarios .solution-card:first-child .solution-content,
  #scenarios .solution-card:not(:first-child) .solution-content {
    padding-right: 64px !important;
  }
}

@media (max-height: 820px) and (min-width: 921px) {
  #scenarios.ai-solutions {
    padding-top: 90px !important;
    padding-bottom: 46px !important;
  }

  #scenarios .solution-hero h2 {
    font-size: clamp(31px, 2.8vw, 43px) !important;
    line-height: 1.14 !important;
  }

  #scenarios .solution-stats {
    margin-top: 20px !important;
  }

  #scenarios .solution-board {
    grid-template-rows: repeat(2, minmax(194px, 1fr)) !important;
    min-height: 414px !important;
    gap: 24px !important;
  }

  #scenarios .solution-card,
  #scenarios .solution-card:first-child,
  #scenarios .solution-card:nth-child(2),
  #scenarios .solution-card:nth-child(3),
  #scenarios .solution-card:nth-child(4),
  #scenarios .solution-card:nth-child(5),
  #scenarios .solution-card:nth-child(6) {
    min-height: 194px !important;
    padding: 20px !important;
  }

  #scenarios .solution-card span {
    margin-bottom: 22px !important;
  }
}

@media (max-width: 920px) {
  #scenarios.ai-solutions {
    grid-template-columns: 1fr !important;
    min-height: auto !important;
    padding: 92px 24px 56px !important;
    row-gap: 32px !important;
    overflow: visible !important;
  }

  #scenarios .solution-hero,
  #scenarios .solution-hero h2,
  #scenarios .solution-subtitle {
    max-width: 100% !important;
  }

  #scenarios .solution-board {
    grid-template-columns: 1fr !important;
    grid-template-rows: none !important;
    max-width: 100% !important;
    min-height: 0 !important;
    gap: 18px !important;
  }

  #scenarios .solution-card,
  #scenarios .solution-card:first-child,
  #scenarios .solution-card:nth-child(2),
  #scenarios .solution-card:nth-child(3),
  #scenarios .solution-card:nth-child(4),
  #scenarios .solution-card:nth-child(5),
  #scenarios .solution-card:nth-child(6) {
    min-height: 210px !important;
  }
}

/* FINAL 2026-06-12: tighten scenario title-to-module rhythm. */
@media (min-width: 921px) {
  #scenarios.ai-solutions {
    grid-template-columns: minmax(460px, 520px) minmax(0, 1fr) !important;
    column-gap: clamp(24px, 2.2vw, 36px) !important;
    padding-inline: clamp(52px, 5vw, 88px) !important;
  }

  #scenarios .solution-hero {
    max-width: 520px !important;
  }

  #scenarios .solution-hero h2 {
    max-width: 520px !important;
    font-size: clamp(42px, 3.75vw, 62px) !important;
    line-height: 1.14 !important;
    text-wrap: initial !important;
  }

  #scenarios .solution-subtitle,
  #scenarios .solution-stats {
    max-width: 520px !important;
  }

  #scenarios .solution-board {
    justify-self: start !important;
    max-width: 940px !important;
  }
}

@media (min-width: 921px) and (max-width: 1500px) {
  #scenarios.ai-solutions {
    grid-template-columns: minmax(430px, 500px) minmax(0, 1fr) !important;
    column-gap: 28px !important;
    padding-inline: 42px !important;
  }

  #scenarios .solution-hero,
  #scenarios .solution-hero h2 {
    max-width: 500px !important;
  }

  #scenarios .solution-hero h2 {
    font-size: clamp(42px, 4.1vw, 56px) !important;
  }

  #scenarios .solution-board {
    max-width: 860px !important;
    gap: 24px !important;
  }
}

/* FINAL 2026-06-12: scenario badges must never cover card copy or links. */
#scenarios .solution-stats {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 12px !important;
}

#scenarios .solution-stats span {
  box-sizing: border-box !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  min-width: 168px !important;
  min-height: 50px !important;
  padding: 0 18px !important;
  white-space: nowrap !important;
}

#scenarios .solution-stats strong {
  flex: 0 0 auto !important;
  line-height: 1 !important;
}

#scenarios .solution-card,
#scenarios .solution-card:first-child,
#scenarios .solution-card:nth-child(2),
#scenarios .solution-card:nth-child(3),
#scenarios .solution-card:nth-child(4),
#scenarios .solution-card:nth-child(5),
#scenarios .solution-card:nth-child(6) {
  padding-bottom: 24px !important;
}

#scenarios .solution-card .solution-content,
#scenarios .solution-card:first-child .solution-content,
#scenarios .solution-card:not(:first-child) .solution-content {
  min-height: 100% !important;
  padding-bottom: 0 !important;
}

#scenarios .solution-card-link {
  margin-top: auto !important;
  margin-bottom: 0 !important;
}

#scenarios .solution-tag {
  position: static !important;
  inset: auto !important;
  z-index: 3 !important;
  flex: 0 0 auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: fit-content !important;
  max-width: 100% !important;
  min-height: 26px !important;
  margin-top: 14px !important;
  padding: 6px 12px !important;
  white-space: nowrap !important;
  transform: none !important;
}

@media (max-height: 820px) and (min-width: 921px) {
  #scenarios .solution-card,
  #scenarios .solution-card:first-child,
  #scenarios .solution-card:nth-child(2),
  #scenarios .solution-card:nth-child(3),
  #scenarios .solution-card:nth-child(4),
  #scenarios .solution-card:nth-child(5),
  #scenarios .solution-card:nth-child(6) {
    min-height: 218px !important;
  }
}

@media (max-width: 920px) {
  #scenarios .solution-stats span {
    min-width: 0 !important;
    flex: 1 1 150px !important;
  }
}

/* FINAL 2026-06-10: 第三屏业务操作台重构 */
#scenarios.ai-solutions {
  --console-green: #00ff99;
  --console-card: rgba(7, 34, 23, 0.72);
  box-sizing: border-box !important;
  min-height: 100svh !important;
  height: auto !important;
  padding: clamp(92px, 10vh, 118px) clamp(52px, 6vw, 110px) clamp(58px, 7vh, 78px) !important;
  display: grid !important;
  grid-template-columns: minmax(300px, 420px) minmax(0, 1fr) !important;
  align-items: center !important;
  column-gap: clamp(42px, 5vw, 76px) !important;
  background:
    radial-gradient(circle at 76% 30%, rgba(0, 255, 153, 0.10), transparent 34%),
    radial-gradient(circle at 18% 78%, rgba(29, 158, 117, 0.08), transparent 32%),
    linear-gradient(135deg, #020504 0%, #06140d 48%, #020504 100%) !important;
  overflow: hidden !important;
}

#scenarios.ai-solutions::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
  opacity: 0.42 !important;
  background-image:
    linear-gradient(rgba(157, 225, 203, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(157, 225, 203, 0.035) 1px, transparent 1px) !important;
  background-size: 80px 80px !important;
  mask-image: linear-gradient(90deg, transparent, #000 24%, #000 80%, transparent) !important;
}

#scenarios .solution-glow {
  opacity: 0.34 !important;
  filter: blur(18px) !important;
}

#scenarios .solution-hero {
  position: relative !important;
  z-index: 2 !important;
  width: 100% !important;
  max-width: 420px !important;
  align-self: center !important;
  justify-self: start !important;
  overflow: visible !important;
}

#scenarios .solution-badge {
  margin-bottom: 28px !important;
  border-color: rgba(0, 255, 153, 0.55) !important;
  background: rgba(0, 255, 153, 0.045) !important;
  color: #9fe1cb !important;
}

#scenarios .solution-hero h2 {
  max-width: 420px !important;
  margin: 0 0 22px !important;
  color: #ffffff !important;
  font-size: clamp(34px, 3vw, 48px) !important;
  font-weight: 650 !important;
  line-height: 1.18 !important;
  letter-spacing: 0 !important;
  white-space: normal !important;
  word-break: keep-all !important;
  overflow-wrap: break-word !important;
  text-wrap: balance !important;
}

#scenarios .solution-subtitle {
  max-width: 390px !important;
  color: #8bbfaa !important;
  font-size: clamp(14px, 0.95vw, 16px) !important;
  line-height: 1.7 !important;
}

#scenarios .solution-stats {
  max-width: 390px !important;
  margin-top: 26px !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
}

#scenarios .solution-stats span {
  border-color: rgba(157, 225, 203, 0.22) !important;
  background: rgba(255, 255, 255, 0.025) !important;
  color: #8bbfaa !important;
}

#scenarios .solution-divider {
  display: none !important;
}

#scenarios .solution-board {
  position: relative !important;
  z-index: 2 !important;
  justify-self: end !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  grid-template-rows: repeat(2, minmax(220px, 1fr)) !important;
  gap: 32px !important;
  width: 100% !important;
  max-width: 980px !important;
  min-width: 0 !important;
  min-height: 472px !important;
  height: auto !important;
  overflow: visible !important;
  align-items: stretch !important;
}

#scenarios .solution-card,
#scenarios .solution-card:first-child,
#scenarios .solution-card:nth-child(2),
#scenarios .solution-card:nth-child(3),
#scenarios .solution-card:nth-child(4),
#scenarios .solution-card:nth-child(5),
#scenarios .solution-card:nth-child(6) {
  box-sizing: border-box !important;
  position: relative !important;
  grid-column: auto !important;
  grid-row: auto !important;
  min-width: 0 !important;
  min-height: 220px !important;
  height: auto !important;
  max-height: none !important;
  padding: 24px 92px 54px 24px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  overflow: hidden !important;
  border: 1px solid rgba(157, 225, 203, 0.16) !important;
  border-radius: 14px !important;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.01) 32%, rgba(0, 255, 153, 0.045)),
    var(--console-card) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 20px 50px rgba(0, 0, 0, 0.32) !important;
  backdrop-filter: blur(18px) !important;
  -webkit-backdrop-filter: blur(18px) !important;
  transform: none !important;
  transition: transform 0.34s ease, border-color 0.34s ease, box-shadow 0.34s ease, background 0.34s ease !important;
}

#scenarios .solution-card:hover {
  transform: translateY(-8px) !important;
  border-color: #00ff99 !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 24px 56px rgba(0, 255, 153, 0.16),
    0 20px 54px rgba(0, 0, 0, 0.42) !important;
}

#scenarios .solution-card::after {
  content: "" !important;
  position: absolute !important;
  inset: auto 0 0 0 !important;
  height: 1px !important;
  background: linear-gradient(90deg, transparent, rgba(0, 255, 153, 0.45), transparent) !important;
  opacity: 0.35 !important;
  pointer-events: none !important;
}

#scenarios .solution-card .solution-visual,
#scenarios .solution-card:first-child .solution-visual,
#scenarios .solution-card:not(:first-child) .solution-visual {
  position: absolute !important;
  top: 24px !important;
  right: 24px !important;
  left: auto !important;
  bottom: auto !important;
  width: 62px !important;
  height: 62px !important;
  opacity: 0.7 !important;
  pointer-events: none !important;
  transform: none !important;
  overflow: visible !important;
  transition: opacity 0.32s ease, transform 0.32s ease, filter 0.32s ease !important;
}

#scenarios .solution-card:hover .solution-visual {
  opacity: 1 !important;
  transform: translateY(-2px) scale(1.04) !important;
  filter: drop-shadow(0 0 16px rgba(0, 255, 153, 0.34)) !important;
}

#scenarios .solution-card .solution-icon,
#scenarios .solution-card:first-child .solution-icon,
#scenarios .solution-card:not(:first-child) .solution-icon {
  display: block !important;
  width: 62px !important;
  height: 62px !important;
  min-width: 62px !important;
  min-height: 62px !important;
  max-width: 62px !important;
  max-height: 62px !important;
  object-fit: contain !important;
  background: transparent !important;
  stroke: #00ff99 !important;
}

#scenarios .solution-visual,
#scenarios .solution-visual > svg,
#scenarios .solution-visual > img,
#scenarios .solution-icon {
  box-sizing: border-box !important;
  flex: 0 0 62px !important;
  aspect-ratio: 1 / 1 !important;
  transform-origin: center center !important;
}

#scenarios .solution-icon,
#scenarios .solution-icon * {
  vector-effect: non-scaling-stroke !important;
}

#scenarios .solution-card .solution-content,
#scenarios .solution-card:first-child .solution-content,
#scenarios .solution-card:not(:first-child) .solution-content {
  position: relative !important;
  z-index: 2 !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  min-height: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  overflow: visible !important;
}

#scenarios .solution-card span {
  display: block !important;
  margin: 0 0 24px !important;
  color: #5dcaa5 !important;
  font-size: 13px !important;
  line-height: 1 !important;
  letter-spacing: 0.18em !important;
  white-space: normal !important;
}

#scenarios .solution-card h3 {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 0 12px !important;
  color: #ffffff !important;
  font-size: clamp(20px, 1.2vw, 23px) !important;
  font-weight: 650 !important;
  line-height: 1.35 !important;
  white-space: normal !important;
  word-break: keep-all !important;
  overflow-wrap: break-word !important;
  text-wrap: balance !important;
  overflow: visible !important;
  -webkit-line-clamp: unset !important;
}

#scenarios .solution-card p {
  display: block !important;
  max-width: 100% !important;
  margin: 0 0 18px !important;
  color: #8bbfaa !important;
  font-size: 13px !important;
  line-height: 1.6 !important;
  white-space: normal !important;
  overflow: visible !important;
  -webkit-line-clamp: unset !important;
}

#scenarios .solution-card-link {
  margin-top: auto !important;
  display: inline-flex !important;
  align-items: center !important;
  width: fit-content !important;
  color: rgba(139, 191, 170, 0.72) !important;
  font-size: 13px !important;
  line-height: 1 !important;
  text-decoration: none !important;
  transition: color 0.28s ease, transform 0.28s ease !important;
}

#scenarios .solution-card-link:hover {
  color: #ffffff !important;
  transform: translateX(4px) !important;
}

#scenarios .solution-tag {
  position: static !important;
  inset: auto !important;
  z-index: 3 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 auto !important;
  width: fit-content !important;
  max-width: 100% !important;
  min-height: 26px !important;
  margin-top: 14px !important;
  padding: 6px 12px !important;
  border: 1px solid rgba(0, 255, 153, 0.18) !important;
  border-radius: 999px !important;
  background: rgba(0, 255, 153, 0.075) !important;
  color: rgba(159, 225, 203, 0.78) !important;
  font-size: 11px !important;
  font-style: normal !important;
  line-height: 1 !important;
  letter-spacing: 0.04em !important;
  white-space: nowrap !important;
  transform: none !important;
}

#scenarios .solution-card:hover .solution-tag {
  border-color: rgba(0, 255, 153, 0.45) !important;
  background: rgba(0, 255, 153, 0.12) !important;
  color: #ffffff !important;
}

@media (max-width: 1500px) and (min-width: 921px) {
  #scenarios.ai-solutions {
    grid-template-columns: minmax(290px, 390px) minmax(0, 1fr) !important;
    column-gap: 40px !important;
    padding-inline: 48px !important;
  }

  #scenarios .solution-board {
    max-width: 900px !important;
    gap: 26px !important;
    grid-template-rows: repeat(2, minmax(210px, 1fr)) !important;
    min-height: 446px !important;
  }

  #scenarios .solution-card,
  #scenarios .solution-card:first-child,
  #scenarios .solution-card:nth-child(2),
  #scenarios .solution-card:nth-child(3),
  #scenarios .solution-card:nth-child(4),
  #scenarios .solution-card:nth-child(5),
  #scenarios .solution-card:nth-child(6) {
    min-height: 210px !important;
    padding: 22px 82px 50px 22px !important;
  }

  #scenarios .solution-card .solution-visual,
  #scenarios .solution-card .solution-icon {
    width: 56px !important;
    height: 56px !important;
  }
}

@media (max-height: 820px) and (min-width: 921px) {
  #scenarios.ai-solutions {
    padding-top: 88px !important;
    padding-bottom: 46px !important;
  }

  #scenarios .solution-hero h2 {
    font-size: clamp(31px, 2.8vw, 43px) !important;
    line-height: 1.16 !important;
  }

  #scenarios .solution-board {
    gap: 24px !important;
    grid-template-rows: repeat(2, minmax(196px, 1fr)) !important;
    min-height: 416px !important;
  }

  #scenarios .solution-card,
  #scenarios .solution-card:first-child,
  #scenarios .solution-card:nth-child(2),
  #scenarios .solution-card:nth-child(3),
  #scenarios .solution-card:nth-child(4),
  #scenarios .solution-card:nth-child(5),
  #scenarios .solution-card:nth-child(6) {
    min-height: 196px !important;
    padding: 21px 78px 48px 21px !important;
  }
}

@media (max-width: 920px) {
  #scenarios.ai-solutions {
    grid-template-columns: 1fr !important;
    min-height: auto !important;
    padding: 92px 24px 56px !important;
    row-gap: 32px !important;
    overflow: visible !important;
  }

  #scenarios .solution-hero,
  #scenarios .solution-hero h2,
  #scenarios .solution-subtitle {
    max-width: 100% !important;
  }

  #scenarios .solution-board {
    grid-template-columns: 1fr !important;
    grid-template-rows: none !important;
    max-width: 100% !important;
    min-height: 0 !important;
    gap: 18px !important;
  }

  #scenarios .solution-card,
  #scenarios .solution-card:first-child,
  #scenarios .solution-card:nth-child(2),
  #scenarios .solution-card:nth-child(3),
  #scenarios .solution-card:nth-child(4),
  #scenarios .solution-card:nth-child(5),
  #scenarios .solution-card:nth-child(6) {
    min-height: 210px !important;
  }
}

/* FINAL 2026-06-12: tighten scenario title-to-module rhythm. */
@media (min-width: 921px) {
  #scenarios.ai-solutions {
    grid-template-columns: minmax(520px, 560px) minmax(0, 1fr) !important;
    column-gap: 20px !important;
    padding-inline: clamp(52px, 5vw, 88px) !important;
  }

  #scenarios .solution-hero {
    max-width: 560px !important;
  }

  #scenarios .solution-hero h2 {
    max-width: 560px !important;
    font-size: 40px !important;
    line-height: 1.18 !important;
    text-wrap: initial !important;
  }

  #scenarios .solution-subtitle,
  #scenarios .solution-stats {
    max-width: 560px !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    justify-content: flex-start !important;
    justify-self: start !important;
    align-self: start !important;
    place-self: start !important;
  }

  #scenarios .solution-board {
    justify-self: start !important;
    max-width: 860px !important;
  }
}

@media (min-width: 921px) and (max-width: 1500px) {
  #scenarios.ai-solutions {
    grid-template-columns: minmax(500px, 540px) minmax(0, 1fr) !important;
    column-gap: 18px !important;
    padding-inline: 42px !important;
  }

  #scenarios .solution-hero,
  #scenarios .solution-hero h2 {
    max-width: 540px !important;
  }

  #scenarios .solution-hero h2 {
    font-size: 40px !important;
    line-height: 1.18 !important;
  }

  #scenarios .solution-board {
    max-width: 800px !important;
    gap: 22px !important;
  }
}

@media (min-width: 1501px) {
  #scenarios.ai-solutions {
    grid-template-columns: minmax(660px, 700px) minmax(0, 1fr) !important;
    column-gap: 24px !important;
  }

  #scenarios .solution-hero,
  #scenarios .solution-hero h2,
  #scenarios .solution-subtitle,
  #scenarios .solution-stats {
    max-width: 700px !important;
    width: 100% !important;
  }

  #scenarios .solution-hero h2 {
    font-size: 52px !important;
    line-height: 1.14 !important;
  }
}

/* FINAL 2026-06-12: rebuild core technology section rhythm and card visibility. */
@media (min-width: 921px) {
  #capability.core-tech-section {
    min-height: 100svh !important;
    height: auto !important;
    padding: clamp(112px, 11vh, 150px) clamp(52px, 5vw, 88px) clamp(82px, 9vh, 118px) !important;
    overflow: visible !important;
  }

  #capability .capability-stage {
    width: 100% !important;
    max-width: 1840px !important;
    margin-inline: auto !important;
    display: grid !important;
    grid-template-columns: minmax(620px, 700px) minmax(760px, 1fr) !important;
    align-items: center !important;
    gap: clamp(38px, 4vw, 72px) !important;
  }

  #capability .capability-copy {
    max-width: 700px !important;
  }

  #capability .capability-copy h2 {
    max-width: 700px !important;
    margin: 26px 0 28px !important;
    color: #fff !important;
    font-size: 52px !important;
    font-weight: 650 !important;
    line-height: 1.16 !important;
    letter-spacing: 0 !important;
    white-space: normal !important;
    word-break: keep-all !important;
    overflow-wrap: normal !important;
    text-wrap: initial !important;
  }

  #capability .capability-copy p {
    max-width: 620px !important;
    font-size: 17px !important;
    line-height: 1.9 !important;
  }

  #capability .core-metrics {
    width: min(620px, 100%) !important;
    margin: 34px 0 34px !important;
    padding-top: 28px !important;
    border-top: 1px solid rgba(157, 242, 207, 0.14) !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 28px !important;
  }

  #capability .core-metrics span {
    display: grid !important;
    gap: 10px !important;
    color: rgba(152, 199, 178, 0.72) !important;
    font-size: 15px !important;
    line-height: 1.35 !important;
    white-space: nowrap !important;
  }

  #capability .core-metrics strong {
    display: inline-flex !important;
    align-items: baseline !important;
    gap: 2px !important;
    color: #ffffff !important;
    font-size: 34px !important;
    font-weight: 750 !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
  }

  #capability .core-metrics i {
    color: #20e5a3 !important;
    font-style: normal !important;
  }

  #capability .tech-console.core-card-grid {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 1000px !important;
    min-height: 660px !important;
    height: auto !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-template-rows: repeat(2, minmax(300px, 1fr)) !important;
    gap: 28px !important;
    padding: 32px !important;
    overflow: visible !important;
  }

  #capability .core-tech-card {
    position: relative !important;
    box-sizing: border-box !important;
    min-height: 300px !important;
    height: auto !important;
    max-height: none !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    padding: 34px 92px 32px 34px !important;
    overflow: visible !important;
  }

  #capability .tech-icon {
    position: absolute !important;
    top: 34px !important;
    right: 34px !important;
    display: block !important;
    width: 46px !important;
    height: 46px !important;
    min-width: 46px !important;
    min-height: 46px !important;
    opacity: 1 !important;
    visibility: visible !important;
    color: #20e5a3 !important;
    stroke: #20e5a3 !important;
    stroke-width: 1.8 !important;
    fill: none !important;
    filter: drop-shadow(0 0 18px rgba(32, 229, 163, 0.28)) !important;
    z-index: 3 !important;
  }

  #capability .core-tech-card span {
    margin: 0 0 30px !important;
    color: #5dcaa5 !important;
    font-size: 15px !important;
    line-height: 1 !important;
    letter-spacing: 0.16em !important;
  }

  #capability .core-tech-card h3 {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 14px !important;
    color: #fff !important;
    font-size: 25px !important;
    line-height: 1.25 !important;
    font-weight: 650 !important;
    white-space: normal !important;
    word-break: keep-all !important;
    overflow: visible !important;
  }

  #capability .core-tech-card p {
    width: 100% !important;
    margin: 0 0 22px !important;
    color: #5dcaa5 !important;
    font-size: 16px !important;
    line-height: 1.6 !important;
    white-space: normal !important;
    overflow: visible !important;
  }

  #capability .core-tech-card em {
    display: block !important;
    width: 100% !important;
    margin-top: auto !important;
    padding-top: 22px !important;
    border-top: 1px solid rgba(32, 229, 163, 0.16) !important;
    color: rgba(152, 199, 178, 0.78) !important;
    font-size: 14px !important;
    font-style: normal !important;
    line-height: 1.65 !important;
    white-space: normal !important;
    overflow: visible !important;
    opacity: 1 !important;
  }
}

@media (min-width: 921px) and (max-width: 1500px) {
  #capability .capability-stage {
    grid-template-columns: minmax(500px, 560px) minmax(640px, 1fr) !important;
    gap: 28px !important;
  }

  #capability .capability-copy h2 {
    max-width: 560px !important;
    font-size: 40px !important;
    line-height: 1.18 !important;
  }

  #capability .core-metrics {
    width: min(560px, 100%) !important;
    gap: 18px !important;
  }

  #capability .core-metrics strong {
    font-size: 28px !important;
  }

  #capability .core-metrics span {
    font-size: 13px !important;
  }

  #capability .tech-console.core-card-grid {
    min-height: 620px !important;
    grid-template-rows: repeat(2, minmax(284px, 1fr)) !important;
    gap: 22px !important;
    padding: 28px !important;
  }

  #capability .core-tech-card {
    min-height: 284px !important;
    padding: 30px 82px 28px 30px !important;
  }

  #capability .tech-icon {
    top: 30px !important;
    right: 30px !important;
    width: 42px !important;
    height: 42px !important;
  }

  #capability .core-tech-card h3 {
    font-size: 23px !important;
  }

  #capability .core-tech-card p {
    font-size: 15px !important;
  }

  #capability .core-tech-card em {
    font-size: 13px !important;
    line-height: 1.55 !important;
  }
}

@media (min-width: 921px) {
  #capability.core-tech-section .capability-stage .capability-copy h2 {
    max-width: 700px !important;
    font-size: 52px !important;
    line-height: 1.16 !important;
    letter-spacing: 0 !important;
  }

  #capability.core-tech-section .capability-stage .capability-copy h2 br {
    display: block !important;
  }
}

@media (min-width: 921px) and (max-width: 1500px) {
  #capability.core-tech-section .capability-stage .capability-copy h2 {
    max-width: 560px !important;
    font-size: 34px !important;
    line-height: 1.18 !important;
  }
}

@media (max-width: 920px) {
  #capability .core-metrics {
    width: 100% !important;
    margin: 26px 0 28px !important;
    padding-top: 22px !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 14px !important;
    border-top: 1px solid rgba(157, 242, 207, 0.14) !important;
  }

  #capability .core-metrics span {
    display: grid !important;
    gap: 8px !important;
    color: rgba(152, 199, 178, 0.72) !important;
    font-size: 12px !important;
    line-height: 1.35 !important;
  }

  #capability .core-metrics strong {
    display: inline-flex !important;
    align-items: baseline !important;
    color: #fff !important;
    font-size: 24px !important;
    line-height: 1 !important;
  }

  #capability .core-metrics i {
    color: #20e5a3 !important;
    font-style: normal !important;
  }
}

/* FINAL 2026-06-12: align core technology cards into a true 2x2 grid. */
#capability .tech-console.core-card-grid {
  align-items: stretch !important;
}

#capability .core-tech-card,
#capability .core-tech-card:nth-child(1),
#capability .core-tech-card:nth-child(2),
#capability .core-tech-card:nth-child(3),
#capability .core-tech-card:nth-child(4) {
  transform: none !important;
  translate: none !important;
  align-self: stretch !important;
}

#capability .core-tech-card:hover {
  transform: translateY(-4px) !important;
}

/* FINAL 2026-06-12: resources and platform screens use stable non-overlapping layouts. */
@media (min-width: 921px) {
  #resources.premium-resources {
    min-height: 100svh !important;
    height: 100svh !important;
    padding: 96px clamp(48px, 5vw, 96px) 64px !important;
    background:
      radial-gradient(circle at 18% 36%, rgba(32, 229, 163, 0.12), transparent 32%),
      linear-gradient(180deg, #07120f 0%, #07120f 100%) !important;
    overflow: hidden !important;
  }

  #resources .resource-stage {
    width: min(1720px, calc(100vw - 96px)) !important;
    height: calc(100svh - 160px) !important;
    max-height: 760px !important;
    margin-inline: auto !important;
    display: grid !important;
    grid-template-columns: minmax(420px, 560px) minmax(680px, 1fr) !important;
    gap: clamp(42px, 5vw, 86px) !important;
    align-items: center !important;
  }

  #resources .resource-main {
    position: relative !important;
    max-width: 560px !important;
    min-height: 0 !important;
    padding: 0 !important;
    align-self: center !important;
    text-align: left !important;
  }

  #resources .resource-main h2 {
    max-width: 560px !important;
    margin: 32px 0 26px !important;
    color: #fff !important;
    font-size: 48px !important;
    line-height: 1.16 !important;
    letter-spacing: 0 !important;
  }

  #resources .resource-main > p {
    max-width: 500px !important;
    margin: 0 0 34px !important;
    color: rgba(152, 199, 178, 0.78) !important;
    font-size: 18px !important;
    line-height: 1.78 !important;
  }

  #resources .resource-tabs {
    width: min(420px, 100%) !important;
    display: grid !important;
    gap: 16px !important;
    margin: 0 !important;
  }

  #resources .resource-tabs button {
    min-height: 58px !important;
    border: 1px solid rgba(157, 242, 207, 0.18) !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, 0.018) !important;
    color: rgba(152, 199, 178, 0.78) !important;
    font-size: 16px !important;
  }

  #resources .resource-tabs button.is-active {
    background: #20e5a3 !important;
    color: #03110b !important;
    border-color: #20e5a3 !important;
  }

  #resources .resource-panels {
    position: relative !important;
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 940px !important;
    min-height: 0 !important;
    height: auto !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1.18fr) minmax(0, 0.82fr) !important;
    grid-template-rows: repeat(2, minmax(240px, 1fr)) !important;
    gap: 24px !important;
    padding: 28px !important;
    border: 1px solid rgba(157, 242, 207, 0.10) !important;
    border-radius: 28px !important;
    background: rgba(8, 17, 24, 0.62) !important;
    overflow: visible !important;
  }

  #resources .resource-panels article,
  #resources .resource-panels article.is-active,
  #resources .resource-panels article:nth-child(1),
  #resources .resource-panels article:nth-child(2),
  #resources .resource-panels article:nth-child(3) {
    position: relative !important;
    inset: auto !important;
    grid-column: auto !important;
    grid-row: auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    min-width: 0 !important;
    min-height: 240px !important;
    height: auto !important;
    max-height: none !important;
    padding: 34px !important;
    border: 1px solid rgba(32, 229, 163, 0.20) !important;
    border-radius: 16px !important;
    background:
      radial-gradient(circle at 70% 18%, rgba(32, 229, 163, 0.12), transparent 34%),
      rgba(4, 32, 22, 0.78) !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    translate: none !important;
    overflow: hidden !important;
    order: initial !important;
  }

  #resources .resource-panels article:first-child {
    grid-row: 1 / 3 !important;
    min-height: 504px !important;
  }

  #resources .resource-icon {
    width: 48px !important;
    height: 48px !important;
    margin: 0 0 28px !important;
    stroke: #20e5a3 !important;
    color: #20e5a3 !important;
    flex: 0 0 auto !important;
  }

  #resources .resource-panels span,
  #resources .resource-panels h3,
  #resources .resource-panels p {
    grid-area: auto !important;
    position: static !important;
    transform: none !important;
  }

  #resources .resource-panels span {
    color: #5dcaa5 !important;
    font-size: 13px !important;
    letter-spacing: 0.16em !important;
    order: -1 !important;
    margin: 0 0 18px !important;
  }

  #resources .resource-panels h3 {
    margin: 0 0 18px !important;
    color: #fff !important;
    font-size: 30px !important;
    line-height: 1.22 !important;
  }

  #resources .resource-panels p {
    max-width: 420px !important;
    margin: 0 !important;
    color: rgba(152, 199, 178, 0.82) !important;
    font-size: 16px !important;
    line-height: 1.75 !important;
  }

  .platform-entry {
    min-height: 100svh !important;
    height: 100svh !important;
    padding: 96px clamp(48px, 5vw, 96px) 64px !important;
    background:
      radial-gradient(circle at 18% 35%, rgba(32, 229, 163, 0.10), transparent 34%),
      linear-gradient(180deg, #06120f 0%, #06120f 100%) !important;
    overflow: hidden !important;
  }

  .platform-stage {
    width: min(1720px, calc(100vw - 96px)) !important;
    height: calc(100svh - 160px) !important;
    margin-inline: auto !important;
    display: grid !important;
    grid-template-columns: minmax(420px, 560px) minmax(680px, 1fr) !important;
    gap: clamp(42px, 5vw, 86px) !important;
    align-items: center !important;
  }

  .platform-copy h2 {
    max-width: 560px !important;
    font-size: 48px !important;
    line-height: 1.16 !important;
    margin: 28px 0 24px !important;
  }

  .platform-copy p {
    max-width: 500px !important;
    font-size: 18px !important;
    line-height: 1.78 !important;
  }

  .platform-console {
    width: 100% !important;
    max-width: 940px !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr) !important;
    grid-template-rows: repeat(2, minmax(240px, 1fr)) !important;
    gap: 24px !important;
    padding: 28px !important;
    border: 1px solid rgba(157, 242, 207, 0.10) !important;
    border-radius: 28px !important;
    background: rgba(8, 17, 24, 0.62) !important;
    overflow: visible !important;
  }

  .platform-console::before {
    display: none !important;
  }

  .platform-console-card,
  .platform-console-card.is-primary {
    position: relative !important;
    grid-column: auto !important;
    grid-row: auto !important;
    min-height: 240px !important;
    height: auto !important;
    padding: 34px !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    transform: none !important;
  }

  .platform-console-card.is-primary {
    grid-row: 1 / 3 !important;
    min-height: 504px !important;
    background:
      radial-gradient(circle at 62% 34%, rgba(32, 229, 163, 0.18), transparent 38%),
      rgba(4, 32, 22, 0.82) !important;
  }

  .platform-console-card h3 {
    margin: 22px 0 18px !important;
    font-size: 34px !important;
    line-height: 1.18 !important;
  }

  .platform-console-card p {
    max-width: 420px !important;
    font-size: 16px !important;
    line-height: 1.75 !important;
  }
}

@media (max-width: 920px) {
  #resources.premium-resources,
  .platform-entry {
    height: auto !important;
    overflow: visible !important;
  }

  #resources .resource-stage,
  .platform-stage,
  #resources .resource-panels,
  .platform-console {
    grid-template-columns: 1fr !important;
    height: auto !important;
    max-height: none !important;
  }

  #resources .resource-panels article:first-child,
  .platform-console-card.is-primary {
    grid-row: auto !important;
    min-height: 240px !important;
  }
}

/* FINAL 2026-06-12: compact resources/platform for common desktop height. */
@media (min-width: 921px) and (max-width: 1500px) {
  #resources.premium-resources,
  .platform-entry {
    padding: 24px 42px 42px !important;
  }

  #resources .resource-stage,
  .platform-stage {
    width: min(1180px, calc(100vw - 84px)) !important;
    height: calc(100svh - 66px) !important;
    grid-template-columns: minmax(360px, 430px) minmax(650px, 1fr) !important;
    gap: 28px !important;
  }

  #resources .resource-main h2,
  .platform-copy h2 {
    font-size: 36px !important;
    line-height: 1.16 !important;
    margin: 24px 0 18px !important;
  }

  #resources .resource-main > p,
  .platform-copy p {
    font-size: 15px !important;
    line-height: 1.7 !important;
    margin-bottom: 26px !important;
  }

  #resources .resource-tabs,
  .platform-actions {
    width: min(360px, 100%) !important;
    gap: 12px !important;
  }

  #resources .resource-tabs button,
  .platform-actions a {
    min-height: 48px !important;
    font-size: 14px !important;
  }

  #resources .resource-panels,
  .platform-console {
    max-width: 760px !important;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr) !important;
    grid-template-rows: repeat(2, minmax(176px, 1fr)) !important;
    gap: 18px !important;
    padding: 20px !important;
  }

  #resources .resource-panels article,
  #resources .resource-panels article.is-active,
  #resources .resource-panels article:nth-child(1),
  #resources .resource-panels article:nth-child(2),
  #resources .resource-panels article:nth-child(3),
  .platform-console-card,
  .platform-console-card.is-primary {
    width: auto !important;
    min-width: 0 !important;
    justify-self: stretch !important;
    align-self: stretch !important;
    min-height: 176px !important;
    padding: 26px !important;
    transform: none !important;
    translate: none !important;
  }

  #resources .resource-panels article:first-child,
  .platform-console-card.is-primary {
    grid-column: 1 !important;
    grid-row: 1 / 3 !important;
    min-height: 370px !important;
  }

  #resources .resource-panels article:nth-child(2),
  .platform-console-card:nth-child(2) {
    grid-column: 2 !important;
    grid-row: 1 !important;
  }

  #resources .resource-panels article:nth-child(3),
  .platform-console-card:nth-child(3) {
    grid-column: 2 !important;
    grid-row: 2 !important;
  }

  #resources .resource-icon {
    width: 40px !important;
    height: 40px !important;
    margin-bottom: 20px !important;
  }

  #resources .resource-panels h3,
  .platform-console-card h3 {
    font-size: 24px !important;
    line-height: 1.2 !important;
    margin: 14px 0 12px !important;
  }

  #resources .resource-panels p,
  .platform-console-card p {
    font-size: 14px !important;
    line-height: 1.6 !important;
  }

  .platform-console-card a {
    min-height: 38px !important;
    padding: 0 14px !important;
    margin-top: auto !important;
  }
}

/* FINAL 2026-06-12: remove top void before the resources screen content. */
@media (min-width: 921px) and (max-width: 1500px) {
  #resources.premium-resources {
    padding-top: 24px !important;
  }

  #resources .resource-stage {
    align-items: start !important;
    padding-top: 0 !important;
  }
}

/* FINAL 2026-06-12: hard reset resource card offsets from older layouts. */
@media (min-width: 921px) and (max-width: 1500px) {
  #resources.premium-resources .resource-panels {
    height: 438px !important;
    max-height: 438px !important;
    min-height: 0 !important;
    align-self: center !important;
    grid-template-rows: 210px 210px !important;
    grid-auto-rows: 210px !important;
    gap: 18px !important;
    padding: 18px !important;
  }

  #resources.premium-resources .resource-panels article,
  #resources.premium-resources .resource-panels article.is-active,
  #resources.premium-resources .resource-panels article:nth-child(1),
  #resources.premium-resources .resource-panels article:nth-child(2),
  #resources.premium-resources .resource-panels article:nth-child(3) {
    margin: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: auto !important;
    height: auto !important;
    max-height: none !important;
    justify-self: stretch !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 58px !important;
    grid-template-rows: auto auto minmax(0, 1fr) auto !important;
    align-content: center !important;
    gap: 10px 18px !important;
    transform: none !important;
  }

  #resources.premium-resources .resource-panels article:first-child {
    min-height: 438px !important;
    padding: 34px !important;
  }

  #resources.premium-resources .resource-panels article:nth-child(2),
  #resources.premium-resources .resource-panels article:nth-child(3) {
    min-height: 210px !important;
    padding: 28px !important;
  }

  #resources.premium-resources .resource-icon {
    grid-column: 2 !important;
    grid-row: 1 / 3 !important;
    align-self: start !important;
    justify-self: end !important;
    width: 48px !important;
    height: 48px !important;
    margin: 0 !important;
  }

  #resources.premium-resources .resource-panels article:nth-child(2) .resource-icon,
  #resources.premium-resources .resource-panels article:nth-child(3) .resource-icon {
    width: 42px !important;
    height: 42px !important;
  }

  #resources.premium-resources .resource-panels span {
    grid-column: 1 !important;
    grid-row: 1 !important;
    margin: 0 !important;
  }

  #resources.premium-resources .resource-panels h3 {
    grid-column: 1 / 3 !important;
    grid-row: 2 !important;
    margin: 0 !important;
  }

  #resources.premium-resources .resource-panels p {
    grid-column: 1 / 3 !important;
    grid-row: 3 !important;
    margin: 8px 0 0 !important;
  }

  #resources.premium-resources .resource-panels article:first-child h3 {
    font-size: 28px !important;
  }

  #resources.premium-resources .resource-panels article:nth-child(2) h3,
  #resources.premium-resources .resource-panels article:nth-child(3) h3 {
    font-size: 24px !important;
  }

  #resources.premium-resources .resource-panels article:first-child p {
    max-width: 310px !important;
  }

  #resources.premium-resources .resource-feature-list {
    grid-column: 1 / 3 !important;
    grid-row: 4 !important;
    align-self: end !important;
    display: grid !important;
    gap: 12px !important;
    margin-top: 34px !important;
    padding-top: 22px !important;
    border-top: 1px solid rgba(32, 229, 163, 0.16) !important;
  }

  #resources.premium-resources .resource-feature-list em {
    display: flex !important;
    align-items: center !important;
    min-height: 34px !important;
    padding: 0 14px !important;
    border-radius: 999px !important;
    background: rgba(32, 229, 163, 0.08) !important;
    color: rgba(159, 225, 203, 0.86) !important;
    font-size: 13px !important;
    font-style: normal !important;
    font-weight: 650 !important;
  }
}

/* FINAL 2026-06-12: screen five follows the incubation delivery reference layout. */
#training.premium-delivery {
  min-height: 100svh !important;
  height: auto !important;
  padding: clamp(96px, 10vh, 126px) clamp(52px, 5vw, 88px) clamp(72px, 8vh, 104px) !important;
  background:
    radial-gradient(circle at 24% 46%, rgba(32, 229, 163, 0.13), transparent 34%),
    linear-gradient(180deg, #090d16 0%, #070b12 100%) !important;
  overflow: hidden !important;
}

#training .delivery-stage {
  width: min(1720px, calc(100vw - 104px)) !important;
  max-width: none !important;
  margin-inline: auto !important;
  display: grid !important;
  grid-template-columns: minmax(360px, 520px) minmax(760px, 1fr) !important;
  align-items: start !important;
  gap: clamp(64px, 7vw, 108px) !important;
}

#training .stage-head {
  position: sticky !important;
  top: 118px !important;
  align-self: start !important;
  max-width: 520px !important;
  min-height: calc(100svh - 220px) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  text-align: left !important;
}

#training .section-mark {
  margin: 0 0 42px !important;
  min-height: 48px !important;
  padding: 0 28px !important;
  border: 1px solid rgba(32, 229, 163, 0.42) !important;
  border-radius: 999px !important;
  background: rgba(32, 229, 163, 0.08) !important;
  color: #20e5a3 !important;
  font-size: 18px !important;
}

#training .stage-head h2 {
  max-width: 500px !important;
  margin: 0 0 34px !important;
  color: #fff !important;
  font-size: 52px !important;
  line-height: 1.15 !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
}

#training .stage-head h2 span {
  color: #20e5a3 !important;
}

#training .stage-head p {
  max-width: 420px !important;
  margin: 0 0 54px !important;
  color: rgba(161, 170, 184, 0.86) !important;
  font-size: 18px !important;
  line-height: 1.85 !important;
}

#training .delivery-actions {
  width: min(420px, 100%) !important;
  display: grid !important;
  gap: 16px !important;
  margin-bottom: 0 !important;
}

#training .delivery-actions a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 58px !important;
  padding: 0 22px !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 14px !important;
  background: rgba(255, 255, 255, 0.018) !important;
  color: rgba(32, 229, 163, 0.92) !important;
  text-decoration: none !important;
  font-size: 16px !important;
  font-weight: 650 !important;
}

#training .delivery-track {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 42px !important;
  width: 100% !important;
  max-width: 920px !important;
  padding: 0 !important;
  overflow: visible !important;
  grid-template-columns: none !important;
  grid-template-rows: none !important;
  grid-auto-rows: auto !important;
}

#training .delivery-track::before {
  content: "" !important;
  position: absolute !important;
  left: 113px !important;
  top: 96px !important;
  bottom: 96px !important;
  width: 1px !important;
  background: linear-gradient(180deg, rgba(32, 229, 163, 0.34), rgba(255, 255, 255, 0.08), rgba(32, 229, 163, 0.24)) !important;
  pointer-events: none !important;
}

#training .delivery-track article,
#training .delivery-track article:nth-child(1),
#training .delivery-track article:nth-child(2),
#training .delivery-track article:nth-child(3),
#training .delivery-track article:nth-child(4) {
  position: relative !important;
  box-sizing: border-box !important;
  min-height: 240px !important;
  height: auto !important;
  display: grid !important;
  grid-template-columns: 120px minmax(0, 1fr) !important;
  gap: 34px !important;
  align-items: start !important;
  padding: 42px 56px 42px 56px !important;
  border: 1px solid rgba(255, 255, 255, 0.10) !important;
  border-radius: 24px !important;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.018)),
    rgba(18, 23, 34, 0.84) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 20px 64px rgba(0, 0, 0, 0.26) !important;
  overflow: visible !important;
  transform: none !important;
}

#training .delivery-track article::before {
  display: none !important;
}

#training .delivery-icon {
  grid-column: 1 !important;
  grid-row: 1 / span 3 !important;
  position: relative !important;
  z-index: 2 !important;
  width: 72px !important;
  height: 72px !important;
  margin: 38px auto 0 !important;
  padding: 20px !important;
  border-radius: 16px !important;
  background: rgba(32, 229, 163, 0.12) !important;
  stroke: #20e5a3 !important;
  color: #20e5a3 !important;
  stroke-width: 2 !important;
}

#training .delivery-track article:nth-child(2) .delivery-icon {
  background: rgba(76, 129, 255, 0.14) !important;
  stroke: #5f91ff !important;
}

#training .delivery-track article:nth-child(3) .delivery-icon {
  background: rgba(235, 132, 45, 0.14) !important;
  stroke: #eb8432 !important;
}

#training .delivery-track > article > span {
  grid-column: 1 !important;
  grid-row: 1 !important;
  display: block !important;
  margin: 0 auto !important;
  color: rgba(161, 170, 184, 0.48) !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  line-height: 1 !important;
}

#training .delivery-card-copy {
  grid-column: 2 !important;
  min-width: 0 !important;
}

#training .delivery-track h3 {
  margin: 0 0 16px !important;
  color: #fff !important;
  font-size: 28px !important;
  line-height: 1.25 !important;
  font-weight: 700 !important;
}

#training .delivery-track p {
  max-width: 640px !important;
  margin: 0 !important;
  color: rgba(161, 170, 184, 0.82) !important;
  font-size: 18px !important;
  line-height: 1.72 !important;
  font-weight: 600 !important;
}

#training .delivery-tags {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  margin-top: 24px !important;
}

#training .delivery-tags em {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 36px !important;
  padding: 0 18px !important;
  border-radius: 999px !important;
  background: rgba(32, 229, 163, 0.12) !important;
  color: #20e5a3 !important;
  font-size: 16px !important;
  font-style: normal !important;
  font-weight: 700 !important;
}

#training .delivery-tags-blue em {
  background: rgba(76, 129, 255, 0.14) !important;
  color: #6d9aff !important;
}

#training .delivery-tags-orange em {
  background: rgba(235, 132, 45, 0.14) !important;
  color: #eb8432 !important;
}

@media (max-width: 920px) {
  #training.premium-delivery {
    padding: 86px 22px 64px !important;
    overflow: visible !important;
  }

  #training .delivery-stage {
    grid-template-columns: 1fr !important;
    width: 100% !important;
    gap: 34px !important;
  }

  #training .stage-head {
    position: relative !important;
    top: auto !important;
    min-height: 0 !important;
  }

  #training .stage-head h2 {
    font-size: 38px !important;
  }

  #training .delivery-actions,
  #training .delivery-side-nav {
    display: none !important;
  }

  #training .delivery-track::before {
    display: none !important;
  }

  #training .delivery-track article,
  #training .delivery-track article:nth-child(1),
  #training .delivery-track article:nth-child(2),
  #training .delivery-track article:nth-child(3),
  #training .delivery-track article:nth-child(4) {
    grid-template-columns: 74px minmax(0, 1fr) !important;
    gap: 18px !important;
    padding: 26px !important;
  }

  #training .delivery-icon {
    width: 56px !important;
    height: 56px !important;
    margin-top: 32px !important;
    padding: 15px !important;
  }

  #training .delivery-track h3 {
    font-size: 24px !important;
  }

  #training .delivery-track p {
    font-size: 15px !important;
  }
}

/* FINAL 2026-06-12: training typography normalization and spacing. */
#training .delivery-track {
  gap: 42px !important;
}

#training .delivery-track article,
#training .delivery-track article:nth-child(1),
#training .delivery-track article:nth-child(2),
#training .delivery-track article:nth-child(3),
#training .delivery-track article:nth-child(4) {
  min-height: 240px !important;
}

#training .delivery-track h3,
#training .delivery-track article h3,
#training .delivery-card-copy h3 {
  font-size: 28px !important;
  line-height: 1.25 !important;
  font-weight: 700 !important;
}

#training .delivery-track p,
#training .delivery-track article p,
#training .delivery-card-copy p {
  font-size: 18px !important;
  line-height: 1.72 !important;
  font-weight: 600 !important;
}

#training .stage-head p {
  font-size: 18px !important;
  line-height: 1.85 !important;
}

#training .delivery-side-nav {
  display: none !important;
}

@media (max-width: 920px) {
  #training .delivery-track h3,
  #training .delivery-track article h3,
  #training .delivery-card-copy h3 {
    font-size: 24px !important;
  }

  #training .delivery-track p,
  #training .delivery-track article p,
  #training .delivery-card-copy p {
    font-size: 15px !important;
  }
}

/* FINAL 2026-06-12: keep screen five in one viewport and unify the background. */
@media (min-width: 921px) {
  #training.premium-delivery {
    min-height: 100svh !important;
    height: 100svh !important;
    padding: 0 clamp(48px, 4vw, 80px) 34px !important;
    background-color: #070c12 !important;
    background: #070c12 !important;
    overflow: hidden !important;
  }

  #training .delivery-stage {
    width: min(1720px, calc(100vw - 96px)) !important;
    height: calc(100svh - 34px) !important;
    max-height: 820px !important;
    align-items: start !important;
    grid-template-columns: minmax(420px, 500px) minmax(760px, 1fr) !important;
    gap: clamp(24px, 2.4vw, 36px) !important;
  }

  #training .stage-head {
    position: relative !important;
    top: auto !important;
    min-height: 0 !important;
    height: auto !important;
    justify-content: flex-start !important;
  }

  #training .stage-head h2 {
    font-size: 52px !important;
    line-height: 1.14 !important;
    margin-bottom: 28px !important;
  }

  #training .stage-head p {
    max-width: 460px !important;
    margin-bottom: 44px !important;
  }

  #training .delivery-track {
    max-width: 980px !important;
    height: auto !important;
    max-height: calc(100svh - 164px) !important;
    gap: 14px !important;
    justify-content: flex-start !important;
  }

  #training .delivery-track::before {
    left: 94px !important;
    top: 68px !important;
    bottom: 68px !important;
    opacity: 0.62 !important;
  }

  #training .delivery-track article,
  #training .delivery-track article:nth-child(1),
  #training .delivery-track article:nth-child(2),
  #training .delivery-track article:nth-child(3),
  #training .delivery-track article:nth-child(4) {
    min-height: 136px !important;
    height: 136px !important;
    grid-template-columns: 44px 56px minmax(0, 1fr) !important;
    grid-template-rows: 1fr !important;
    gap: 18px !important;
    align-items: center !important;
    padding: 22px 34px 18px !important;
    border-color: rgba(255, 255, 255, 0.10) !important;
    background:
      linear-gradient(110deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.018)),
      #121722 !important;
    overflow: hidden !important;
  }

  #training .delivery-track > article > span {
    grid-column: 1 !important;
    grid-row: 1 !important;
    align-self: start !important;
    justify-self: center !important;
    font-size: 16px !important;
    margin: 4px 0 0 !important;
  }

  #training .delivery-icon {
    grid-column: 2 !important;
    grid-row: 1 !important;
    align-self: center !important;
    justify-self: center !important;
    width: 48px !important;
    height: 48px !important;
    padding: 13px !important;
    margin: 0 !important;
  }

  #training .delivery-card-copy {
    grid-column: 3 !important;
    grid-row: 1 !important;
    align-self: start !important;
    justify-self: stretch !important;
    min-width: 0 !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: translateY(14px) !important;
    translate: none !important;
    position: static !important;
    grid-area: auto !important;
  }

  #training .delivery-track h3,
  #training .delivery-track article h3,
  #training .delivery-card-copy h3 {
    grid-area: auto !important;
    margin-bottom: 6px !important;
    font-size: 22px !important;
    line-height: 1.2 !important;
    position: static !important;
    transform: none !important;
    translate: none !important;
    overflow: visible !important;
  }

  #training .delivery-track p,
  #training .delivery-track article p,
  #training .delivery-card-copy p {
    grid-area: auto !important;
    max-width: 690px !important;
    font-size: 14px !important;
    line-height: 1.45 !important;
    position: static !important;
    transform: none !important;
    translate: none !important;
  }

  #training .delivery-tags {
    gap: 8px !important;
    margin-top: 10px !important;
  }

  #training .delivery-tags em {
    min-height: 26px !important;
    padding: 0 12px !important;
    font-size: 13px !important;
  }
}

/* FINAL 2026-06-12: polish resources screen density and visual weight. */
@media (min-width: 921px) and (max-width: 1500px) {
  #resources.premium-resources {
    height: 100svh !important;
    min-height: 100svh !important;
    padding: 76px 42px 38px !important;
    background:
      radial-gradient(circle at 20% 46%, rgba(32, 229, 163, 0.14), transparent 30%),
      radial-gradient(circle at 72% 35%, rgba(32, 229, 163, 0.08), transparent 28%),
      #07120f !important;
    overflow: hidden !important;
  }

  #resources .resource-stage {
    width: min(1180px, calc(100vw - 84px)) !important;
    height: calc(100svh - 114px) !important;
    max-height: 560px !important;
    display: grid !important;
    grid-template-columns: minmax(380px, 430px) minmax(650px, 1fr) !important;
    gap: 28px !important;
    align-items: center !important;
    margin: 0 auto !important;
    padding: 0 !important;
  }

  #resources .resource-main {
    min-height: 420px !important;
    align-self: center !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    padding: 32px !important;
    border: 1px solid rgba(157, 242, 207, 0.12) !important;
    border-radius: 22px !important;
    background:
      radial-gradient(circle at 86% 84%, rgba(32, 229, 163, 0.14), transparent 34%),
      linear-gradient(145deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.008)),
      rgba(7, 18, 15, 0.84) !important;
    overflow: hidden !important;
  }

  #resources .resource-main .section-mark {
    align-self: flex-start !important;
    margin: 0 0 40px !important;
  }

  #resources .resource-main h2 {
    max-width: 390px !important;
    margin: 0 0 22px !important;
    font-size: 34px !important;
    line-height: 1.18 !important;
  }

  #resources .resource-main > p {
    max-width: 360px !important;
    margin: 0 0 30px !important;
    font-size: 15px !important;
    line-height: 1.68 !important;
  }

  #resources .resource-tabs {
    width: 100% !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 10px !important;
    margin-top: auto !important;
  }

  #resources .resource-tabs button {
    min-height: 46px !important;
    padding: 0 14px !important;
    font-size: 14px !important;
  }

  #resources.premium-resources .resource-panels {
    width: 100% !important;
    max-width: 720px !important;
    height: 450px !important;
    max-height: 450px !important;
    align-self: center !important;
    grid-template-columns: minmax(0, 1.36fr) minmax(0, 1fr) !important;
    grid-template-rows: 216px 216px !important;
    gap: 18px !important;
    padding: 18px !important;
    border-radius: 26px !important;
    background:
      linear-gradient(135deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.01)),
      rgba(8, 17, 24, 0.68) !important;
  }

  #resources.premium-resources .resource-panels article,
  #resources.premium-resources .resource-panels article.is-active,
  #resources.premium-resources .resource-panels article:nth-child(1),
  #resources.premium-resources .resource-panels article:nth-child(2),
  #resources.premium-resources .resource-panels article:nth-child(3) {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 54px !important;
    grid-template-rows: auto auto auto minmax(0, 1fr) auto !important;
    gap: 8px 16px !important;
    align-content: start !important;
    min-height: 0 !important;
    height: 100% !important;
    padding: 28px !important;
    border-radius: 16px !important;
    border-color: rgba(32, 229, 163, 0.22) !important;
    background:
      radial-gradient(circle at 72% 18%, rgba(32, 229, 163, 0.18), transparent 34%),
      linear-gradient(145deg, rgba(32, 229, 163, 0.045), rgba(32, 229, 163, 0.018)),
      rgba(3, 35, 24, 0.82) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045) !important;
  }

  #resources.premium-resources .resource-panels article:first-child {
    grid-column: 1 !important;
    grid-row: 1 / 3 !important;
    min-height: 414px !important;
    padding: 32px !important;
  }

  #resources.premium-resources .resource-panels article:nth-child(2) {
    grid-column: 2 !important;
    grid-row: 1 !important;
  }

  #resources.premium-resources .resource-panels article:nth-child(3) {
    grid-column: 2 !important;
    grid-row: 2 !important;
  }

  #resources.premium-resources .resource-icon {
    grid-column: 2 !important;
    grid-row: 1 / 3 !important;
    justify-self: end !important;
    align-self: start !important;
    width: 42px !important;
    height: 42px !important;
    margin: 0 !important;
  }

  #resources.premium-resources .resource-panels article:first-child .resource-icon {
    width: 48px !important;
    height: 48px !important;
  }

  #resources.premium-resources .resource-panels span {
    grid-column: 1 !important;
    grid-row: 1 !important;
    margin: 0 !important;
    font-size: 14px !important;
    letter-spacing: 0.18em !important;
  }

  #resources.premium-resources .resource-panels h3 {
    grid-column: 1 / 3 !important;
    grid-row: 2 !important;
    margin: 44px 0 0 !important;
    color: #fff !important;
    font-size: 24px !important;
    line-height: 1.2 !important;
  }

  #resources.premium-resources .resource-panels article:first-child h3 {
    margin-top: 86px !important;
    font-size: 26px !important;
  }

  #resources.premium-resources .resource-panels p {
    grid-column: 1 / 3 !important;
    grid-row: 3 !important;
    max-width: 310px !important;
    margin: 12px 0 0 !important;
    color: rgba(152, 199, 178, 0.84) !important;
    font-size: 14px !important;
    line-height: 1.58 !important;
  }

  #resources.premium-resources .resource-feature-list {
    grid-column: 1 / 3 !important;
    grid-row: 5 !important;
    align-self: end !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    margin: 0 !important;
    padding-top: 18px !important;
    border-top: 1px solid rgba(32, 229, 163, 0.16) !important;
  }

  #resources.premium-resources .resource-feature-list em {
    min-height: 32px !important;
    padding: 0 14px !important;
    border-radius: 999px !important;
    background: rgba(32, 229, 163, 0.08) !important;
    color: rgba(159, 225, 203, 0.9) !important;
    font-size: 13px !important;
    font-style: normal !important;
    font-weight: 650 !important;
  }
}

/* FINAL 2026-06-12: remove inherited 720px stage height on resources. */
@media (min-width: 921px) and (max-width: 1500px) {
  #resources.premium-resources {
    padding-top: 60px !important;
    padding-bottom: 40px !important;
  }

  #resources .resource-stage,
  #resources.premium-resources .resource-stage {
    height: calc(100svh - 100px) !important;
    min-height: 0 !important;
    max-height: 540px !important;
    align-items: center !important;
  }

  #resources .resource-main {
    min-height: 460px !important;
  }

  #resources.premium-resources .resource-panels {
    height: 500px !important;
    max-height: 500px !important;
    grid-template-rows: 241px 241px !important;
  }

  #resources.premium-resources .resource-panels article:first-child {
    min-height: 464px !important;
  }

  #resources.premium-resources .resource-panels article:nth-child(2),
  #resources.premium-resources .resource-panels article:nth-child(3) {
    min-height: 241px !important;
  }

  #resources.premium-resources .resource-panels article:first-child h3 {
    margin-top: 100px !important;
  }
}

/* FINAL 2026-06-12: resources anchor should not reveal a large previous-screen gap. */
#resources.premium-resources {
  scroll-margin-top: 0 !important;
}

/* FINAL 2026-06-12: concentrate the left copy block on screen five. */
@media (min-width: 921px) {
  #training .stage-head {
    min-height: 0 !important;
    height: min(560px, calc(100svh - 128px)) !important;
    justify-content: center !important;
    transform: translateY(-6px) !important;
  }

  #training .stage-head .section-mark {
    margin: 0 0 28px !important;
  }

  #training .stage-head h2 {
    margin: 0 0 24px !important;
  }

  #training .stage-head p {
    max-width: 450px !important;
    margin: 0 0 30px !important;
  }

  #training .delivery-actions {
    width: min(380px, 100%) !important;
    gap: 12px !important;
    margin: 0 !important;
  }

  #training .delivery-actions a {
    min-height: 52px !important;
    border-radius: 12px !important;
  }
}

/* FINAL 2026-06-12: enrich platform entry with dashboard density. */
.platform-stats {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 12px !important;
  width: min(480px, 100%) !important;
  margin: 28px 0 0 !important;
}

.platform-stats div {
  min-height: 76px !important;
  padding: 14px 16px !important;
  border: 1px solid rgba(157, 242, 207, 0.16) !important;
  border-radius: 14px !important;
  background: rgba(255, 255, 255, 0.028) !important;
}

.platform-stats strong {
  display: block !important;
  color: #f5fff9 !important;
  font-size: 24px !important;
  line-height: 1.1 !important;
}

.platform-stats span {
  display: block !important;
  margin-top: 8px !important;
  color: rgba(177, 218, 200, 0.72) !important;
  font-size: 13px !important;
}

.console-status,
.console-progress {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  border: 1px solid rgba(32, 229, 163, 0.16) !important;
  border-radius: 14px !important;
  background: rgba(1, 14, 10, 0.36) !important;
}

.console-status {
  min-height: 50px !important;
  margin: 24px 0 16px !important;
  padding: 0 16px !important;
}

.console-status strong,
.console-status em,
.console-progress em {
  font-style: normal !important;
  font-size: 13px !important;
}

.console-status strong {
  color: #f5fff9 !important;
}

.console-status em,
.console-progress em {
  color: rgba(177, 218, 200, 0.78) !important;
}

.console-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px !important;
  margin: 0 0 16px !important;
}

.console-grid div {
  min-height: 74px !important;
  padding: 14px !important;
  border: 1px solid rgba(157, 242, 207, 0.13) !important;
  border-radius: 14px !important;
  background: rgba(255, 255, 255, 0.035) !important;
}

.console-grid strong {
  display: block !important;
  color: #f5fff9 !important;
  font-size: 14px !important;
  line-height: 1.25 !important;
}

.console-grid span {
  display: block !important;
  margin-top: 8px !important;
  color: rgba(177, 218, 200, 0.68) !important;
  font-size: 12px !important;
  line-height: 1.45 !important;
}

.console-progress {
  position: relative !important;
  min-height: 42px !important;
  margin: 0 0 18px !important;
  padding: 0 14px !important;
  overflow: hidden !important;
}

.console-progress span {
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
  width: var(--progress, 64%) !important;
  background: linear-gradient(90deg, rgba(32, 229, 163, 0.22), rgba(32, 229, 163, 0.06)) !important;
}

.console-progress em {
  position: relative !important;
  z-index: 1 !important;
}

.platform-card-list {
  display: grid !important;
  gap: 10px !important;
  margin: 20px 0 22px !important;
  padding: 0 !important;
  list-style: none !important;
}

.platform-card-list li {
  position: relative !important;
  min-height: 30px !important;
  padding-left: 22px !important;
  color: rgba(177, 218, 200, 0.74) !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
}

.platform-card-list li::before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  top: 9px !important;
  width: 8px !important;
  height: 8px !important;
  border-radius: 999px !important;
  background: #20e5a3 !important;
  box-shadow: 0 0 14px rgba(32, 229, 163, 0.48) !important;
}

@media (min-width: 921px) and (max-width: 1500px) {
  .platform-entry {
    padding-top: 68px !important;
    padding-bottom: 42px !important;
  }

  .platform-stage {
    height: calc(100svh - 110px) !important;
    max-height: 560px !important;
    align-items: center !important;
  }

  .platform-copy h2 {
    font-size: 34px !important;
    margin-bottom: 18px !important;
  }

  .platform-copy p {
    max-width: 430px !important;
    font-size: 15px !important;
    line-height: 1.68 !important;
  }

  .platform-stats {
    margin-top: 22px !important;
  }

  .platform-stats div {
    min-height: 68px !important;
    padding: 12px 14px !important;
  }

  .platform-actions {
    margin-top: 22px !important;
  }

  .platform-console {
    max-width: 760px !important;
    grid-template-rows: 245px 245px !important;
    gap: 18px !important;
    padding: 18px !important;
  }

  .platform-console-card,
  .platform-console-card.is-primary {
    min-height: 245px !important;
    padding: 28px !important;
  }

  .platform-console-card.is-primary {
    min-height: 508px !important;
  }

  .platform-console-card h3 {
    margin: 14px 0 10px !important;
    font-size: 25px !important;
  }

  .platform-console-card p {
    margin-bottom: 0 !important;
    font-size: 14px !important;
    line-height: 1.55 !important;
  }

  .console-status {
    min-height: 44px !important;
    margin: 18px 0 12px !important;
  }

  .console-grid {
    gap: 10px !important;
    margin-bottom: 12px !important;
  }

  .console-grid div {
    min-height: 62px !important;
    padding: 11px 12px !important;
  }

  .console-progress {
    min-height: 38px !important;
    margin-bottom: 14px !important;
  }

  .platform-card-list {
    gap: 7px !important;
    margin: 14px 0 12px !important;
  }

  .platform-card-list li {
    min-height: 20px !important;
    font-size: 12px !important;
    line-height: 1.35 !important;
  }

  .platform-card-list li::before {
    top: 5px !important;
  }

  .platform-console-card:not(.is-primary) h3 {
    font-size: 23px !important;
    margin: 12px 0 8px !important;
  }

  .platform-console-card:not(.is-primary) p {
    font-size: 13px !important;
    line-height: 1.48 !important;
  }

  .platform-console-card:not(.is-primary) a {
    display: none !important;
  }

  .platform-console-card a {
    margin-top: 0 !important;
  }
}

/* FINAL 2026-06-16: delivery flow interaction, CTA and animated guidance. */
@media (min-width: 921px) {
  #training .delivery-stage {
    position: relative !important;
    isolation: isolate !important;
  }

  #training .delivery-stage::before {
    content: "" !important;
    position: absolute !important;
    z-index: 0 !important;
    left: min(430px, 34vw) !important;
    top: 43% !important;
    width: clamp(76px, 6.4vw, 118px) !important;
    height: 1px !important;
    background: linear-gradient(90deg, transparent, rgba(0, 255, 153, 0.18), #00ff99, rgba(0, 255, 153, 0.12), transparent) !important;
    background-size: 220% 100% !important;
    filter: drop-shadow(0 0 10px rgba(0, 255, 153, 0.42)) !important;
    opacity: 0.76 !important;
    transform: translateY(-50%) !important;
    animation: sws-flow-line 2.6s linear infinite !important;
    pointer-events: none !important;
  }

  #training .delivery-stage::after {
    content: "" !important;
    position: absolute !important;
    z-index: 0 !important;
    left: calc(min(430px, 34vw) + clamp(76px, 6.4vw, 118px) - 6px) !important;
    top: 43% !important;
    width: 8px !important;
    height: 8px !important;
    border-top: 1px solid #00ff99 !important;
    border-right: 1px solid #00ff99 !important;
    transform: translateY(-50%) rotate(45deg) !important;
    box-shadow: 0 0 12px rgba(0, 255, 153, 0.55) !important;
    opacity: 0.86 !important;
    pointer-events: none !important;
  }

  #training .stage-head,
  #training .delivery-track {
    position: relative !important;
    z-index: 1 !important;
  }

  #training .delivery-track article,
  #training .delivery-track article:nth-child(1),
  #training .delivery-track article:nth-child(2),
  #training .delivery-track article:nth-child(3),
  #training .delivery-track article:nth-child(4) {
    border: 1px solid rgba(0, 255, 153, 0.18) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.045),
      inset 0 0 0 1px rgba(255, 255, 255, 0.018),
      0 16px 46px rgba(0, 0, 0, 0.26) !important;
    cursor: pointer !important;
    opacity: 0 !important;
    transform: translateY(18px) !important;
    animation: sws-card-rise 0.72s cubic-bezier(.2, .72, .18, 1) forwards !important;
    transition:
      border-color 0.28s ease,
      box-shadow 0.28s ease,
      background 0.28s ease,
      transform 0.28s ease !important;
  }

  #training .delivery-track article:nth-child(1) {
    animation-delay: 0.06s !important;
  }

  #training .delivery-track article:nth-child(2) {
    animation-delay: 0.14s !important;
  }

  #training .delivery-track article:nth-child(3) {
    animation-delay: 0.22s !important;
  }

  #training .delivery-track article:nth-child(4) {
    animation-delay: 0.30s !important;
  }

  #training .delivery-track article:hover,
  #training .delivery-track article:focus-within {
    border-color: #00ff99 !important;
    box-shadow:
      inset 0 0 24px rgba(0, 255, 153, 0.12),
      inset 0 1px 0 rgba(255, 255, 255, 0.08),
      0 0 0 1px rgba(0, 255, 153, 0.20),
      0 18px 58px rgba(0, 255, 153, 0.10),
      0 18px 48px rgba(0, 0, 0, 0.30) !important;
    transform: translateY(-3px) !important;
  }

  #training .delivery-track h3,
  #training .delivery-track article h3,
  #training .delivery-card-copy h3 {
    color: #ffffff !important;
    font-weight: 750 !important;
  }

  #training .delivery-track p,
  #training .delivery-track article p,
  #training .delivery-card-copy p {
    color: #b0b0b0 !important;
    font-weight: 500 !important;
  }

  #training .delivery-tags,
  #training .delivery-tags-blue,
  #training .delivery-tags-orange {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 8px !important;
    max-width: calc(100% - 58px) !important;
  }

  #training .delivery-tags em,
  #training .delivery-tags-blue em,
  #training .delivery-tags-orange em {
    flex: 0 0 auto !important;
    min-height: 26px !important;
    max-width: 100% !important;
    padding: 0 12px !important;
    border: 1px solid rgba(0, 255, 153, 0.28) !important;
    border-radius: 999px !important;
    background: rgba(0, 255, 153, 0.18) !important;
    color: rgba(222, 255, 242, 0.96) !important;
    font-size: 13px !important;
    line-height: 1 !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    box-shadow: inset 0 0 14px rgba(0, 255, 153, 0.08) !important;
    transition:
      background 0.28s ease,
      border-color 0.28s ease,
      color 0.28s ease,
      transform 0.28s ease !important;
  }

  #training .delivery-track article:hover .delivery-tags em,
  #training .delivery-track article:focus-within .delivery-tags em {
    background: rgba(0, 255, 153, 0.28) !important;
    border-color: rgba(0, 255, 153, 0.46) !important;
    color: #ffffff !important;
  }

  #training .delivery-card-cta {
    position: absolute !important;
    right: 24px !important;
    bottom: 20px !important;
    z-index: 3 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 34px !important;
    height: 34px !important;
    border: 1px solid rgba(0, 255, 153, 0.32) !important;
    border-radius: 999px !important;
    background: rgba(0, 255, 153, 0.10) !important;
    color: #00ff99 !important;
    text-decoration: none !important;
    font-size: 18px !important;
    line-height: 1 !important;
    font-weight: 700 !important;
    box-shadow: inset 0 0 14px rgba(0, 255, 153, 0.06) !important;
    transition:
      transform 0.28s ease,
      color 0.28s ease,
      background 0.28s ease,
      border-color 0.28s ease,
      box-shadow 0.28s ease !important;
  }

  #training .delivery-track article:hover .delivery-card-cta,
  #training .delivery-card-cta:focus-visible {
    transform: translateX(3px) !important;
    border-color: #00ff99 !important;
    background: rgba(0, 255, 153, 0.22) !important;
    color: #ffffff !important;
    box-shadow:
      inset 0 0 16px rgba(0, 255, 153, 0.14),
      0 0 18px rgba(0, 255, 153, 0.18) !important;
  }
}

@media (max-width: 920px) {
  #training .delivery-card-cta {
    display: none !important;
  }
}

@keyframes sws-flow-line {
  0% {
    background-position: 220% 0;
  }
  100% {
    background-position: -40% 0;
  }
}

@keyframes sws-card-rise {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* FINAL 2026-06-16: keep delivery cards visible while preserving load reveal. */
@media (min-width: 921px) {
  #training .delivery-track article,
  #training .delivery-track article:nth-child(1),
  #training .delivery-track article:nth-child(2),
  #training .delivery-track article:nth-child(3),
  #training .delivery-track article:nth-child(4) {
    opacity: 1 !important;
    transform: none !important;
    animation: sws-card-reveal 0.72s cubic-bezier(.2, .72, .18, 1) both !important;
  }

  #training .delivery-track article:nth-child(1) {
    animation-delay: 0.06s !important;
  }

  #training .delivery-track article:nth-child(2) {
    animation-delay: 0.14s !important;
  }

  #training .delivery-track article:nth-child(3) {
    animation-delay: 0.22s !important;
  }

  #training .delivery-track article:nth-child(4) {
    animation-delay: 0.30s !important;
  }
}

@keyframes sws-card-reveal {
  0% {
    clip-path: inset(12% 0 0 0 round 24px);
    filter: brightness(0.72) saturate(0.86);
  }
  100% {
    clip-path: inset(0 0 0 0 round 24px);
    filter: brightness(1) saturate(1);
  }
}

/* FINAL 2026-06-16: make the left-to-right delivery connector visible in the gap. */
@media (min-width: 921px) {
  #training .stage-head::after {
    content: "" !important;
    position: absolute !important;
    right: -42px !important;
    top: 18% !important;
    z-index: 4 !important;
    width: 68px !important;
    height: 1px !important;
    background: linear-gradient(90deg, rgba(0, 255, 153, 0.08), rgba(0, 255, 153, 0.82), rgba(0, 255, 153, 0.08)) !important;
    background-size: 220% 100% !important;
    box-shadow: 0 0 14px rgba(0, 255, 153, 0.48) !important;
    animation: sws-flow-line 2.2s linear infinite !important;
    pointer-events: none !important;
  }

  #training .stage-head::before {
    content: "" !important;
    position: absolute !important;
    right: -50px !important;
    top: calc(18% - 4px) !important;
    z-index: 5 !important;
    width: 9px !important;
    height: 9px !important;
    border-top: 1px solid #00ff99 !important;
    border-right: 1px solid #00ff99 !important;
    transform: rotate(45deg) !important;
    box-shadow: 0 0 12px rgba(0, 255, 153, 0.5) !important;
    pointer-events: none !important;
  }
}

/* FINAL 2026-06-16: enlarge-on-interaction and align numbers/icons with titles. */
@media (min-width: 921px) {
  #training .delivery-track {
    overflow: visible !important;
  }

  #training .delivery-track article,
  #training .delivery-track article:nth-child(1),
  #training .delivery-track article:nth-child(2),
  #training .delivery-track article:nth-child(3),
  #training .delivery-track article:nth-child(4) {
    grid-template-columns: 44px 56px minmax(0, 1fr) 34px !important;
    align-items: center !important;
    padding: 20px 26px 18px 28px !important;
    overflow: visible !important;
    transform-origin: center center !important;
    scale: 1 !important;
    transition:
      scale 0.28s cubic-bezier(.2, .72, .18, 1),
      border-color 0.28s ease,
      box-shadow 0.28s ease,
      background 0.28s ease,
      filter 0.28s ease !important;
  }

  #training .delivery-track article:hover,
  #training .delivery-track article:focus-within {
    transform: none !important;
    scale: 1.024 !important;
  }

  #training .delivery-track article:active {
    scale: 1.014 !important;
  }

  #training .delivery-track > article > span {
    grid-column: 1 !important;
    grid-row: 1 !important;
    align-self: start !important;
    justify-self: center !important;
    margin: 6px 0 0 !important;
    line-height: 1 !important;
  }

  #training .delivery-icon {
    grid-column: 2 !important;
    grid-row: 1 !important;
    position: static !important;
    align-self: start !important;
    justify-self: center !important;
    width: 46px !important;
    height: 46px !important;
    margin: 0 !important;
    padding: 12px !important;
    transform: none !important;
    translate: none !important;
  }

  #training .delivery-card-copy {
    grid-column: 3 !important;
    grid-row: 1 !important;
    align-self: center !important;
    transform: none !important;
    padding: 0 44px 0 0 !important;
  }

  #training .delivery-card-copy h3,
  #training .delivery-track article h3 {
    margin: 0 0 7px !important;
  }

  #training .delivery-card-copy p,
  #training .delivery-track article p {
    line-height: 1.42 !important;
  }

  #training .delivery-tags {
    margin-top: 8px !important;
  }

  #training .delivery-card-cta {
    right: 22px !important;
    bottom: 50% !important;
    transform: translateY(50%) !important;
  }

  #training .delivery-track article:hover .delivery-card-cta,
  #training .delivery-card-cta:focus-visible {
    transform: translate(3px, 50%) !important;
  }
}

/* FINAL 2026-06-16: shared functional-card behavior across all main screens. */
@media (min-width: 921px) {
  .solution-card,
  .core-tech-card,
  .resource-panels article,
  .platform-console-card {
    position: relative !important;
    cursor: pointer !important;
    overflow: visible !important;
    transform-origin: center center !important;
    scale: 1 !important;
    border-color: rgba(0, 255, 153, 0.18) !important;
    transition:
      scale 0.28s cubic-bezier(.2, .72, .18, 1),
      border-color 0.28s ease,
      box-shadow 0.28s ease,
      background 0.28s ease,
      filter 0.28s ease !important;
  }

  .solution-card:hover,
  .solution-card:focus-within,
  .core-tech-card:hover,
  .core-tech-card:focus-within,
  .resource-panels article:hover,
  .resource-panels article:focus-within,
  .platform-console-card:hover,
  .platform-console-card:focus-within {
    scale: 1.024 !important;
    border-color: #00ff99 !important;
    box-shadow:
      inset 0 0 24px rgba(0, 255, 153, 0.12),
      inset 0 1px 0 rgba(255, 255, 255, 0.08),
      0 0 0 1px rgba(0, 255, 153, 0.20),
      0 18px 58px rgba(0, 255, 153, 0.10),
      0 18px 48px rgba(0, 0, 0, 0.30) !important;
  }

  .solution-card:active,
  .core-tech-card:active,
  .resource-panels article:active,
  .platform-console-card:active {
    scale: 1.014 !important;
  }

  .solution-card-link,
  .core-card-cta,
  .resource-card-cta {
    position: absolute !important;
    right: 22px !important;
    bottom: 20px !important;
    z-index: 5 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    min-height: 34px !important;
    padding: 0 !important;
    border: 1px solid rgba(0, 255, 153, 0.32) !important;
    border-radius: 999px !important;
    background: rgba(0, 255, 153, 0.10) !important;
    color: #00ff99 !important;
    font-size: 0 !important;
    line-height: 1 !important;
    text-decoration: none !important;
    box-shadow: inset 0 0 14px rgba(0, 255, 153, 0.06) !important;
    transition:
      transform 0.28s ease,
      color 0.28s ease,
      background 0.28s ease,
      border-color 0.28s ease,
      box-shadow 0.28s ease !important;
  }

  .solution-card-link::before,
  .core-card-cta::before,
  .resource-card-cta::before {
    content: "→" !important;
    font-size: 18px !important;
    font-weight: 750 !important;
  }

  .solution-card:hover .solution-card-link,
  .solution-card:focus-within .solution-card-link,
  .core-tech-card:hover .core-card-cta,
  .core-tech-card:focus-within .core-card-cta,
  .resource-panels article:hover .resource-card-cta,
  .resource-panels article:focus-within .resource-card-cta {
    transform: translateX(3px) !important;
    border-color: #00ff99 !important;
    background: rgba(0, 255, 153, 0.22) !important;
    color: #ffffff !important;
    box-shadow:
      inset 0 0 16px rgba(0, 255, 153, 0.14),
      0 0 18px rgba(0, 255, 153, 0.18) !important;
  }

  .solution-tag,
  .core-tech-card em,
  .resource-feature-list em {
    border-radius: 999px !important;
    border: 1px solid rgba(0, 255, 153, 0.24) !important;
    background: rgba(0, 255, 153, 0.16) !important;
    color: rgba(222, 255, 242, 0.94) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .platform-console-card > a {
    transition:
      transform 0.28s ease,
      border-color 0.28s ease,
      background 0.28s ease,
      box-shadow 0.28s ease !important;
  }

  .platform-console-card:hover > a {
    transform: translateX(3px) !important;
    border-color: #00ff99 !important;
    background: rgba(0, 255, 153, 0.20) !important;
    box-shadow: 0 0 18px rgba(0, 255, 153, 0.16) !important;
  }
}

/* FINAL 2026-06-16: delivery card click now has a persistent selected state. */
@media (min-width: 921px) {
  #training .delivery-active-note {
    width: min(420px, 100%) !important;
    min-height: 74px !important;
    margin: 0 0 18px !important;
    padding: 14px 16px !important;
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) !important;
    gap: 6px 12px !important;
    align-items: center !important;
    border: 1px solid rgba(0, 255, 153, 0.20) !important;
    border-radius: 14px !important;
    background:
      linear-gradient(135deg, rgba(0, 255, 153, 0.075), rgba(255, 255, 255, 0.018)),
      rgba(255, 255, 255, 0.018) !important;
    box-shadow: inset 0 0 18px rgba(0, 255, 153, 0.05) !important;
    animation: sws-delivery-note-in 0.34s ease both !important;
  }

  #training .delivery-active-note span {
    grid-row: 1 / 3 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 38px !important;
    height: 38px !important;
    border-radius: 999px !important;
    background: rgba(0, 255, 153, 0.16) !important;
    color: #00ff99 !important;
    font-size: 13px !important;
    font-weight: 750 !important;
  }

  #training .delivery-active-note strong {
    color: #ffffff !important;
    font-size: 15px !important;
    line-height: 1.2 !important;
  }

  #training .delivery-active-note em {
    color: rgba(176, 176, 176, 0.88) !important;
    font-size: 12px !important;
    line-height: 1.35 !important;
    font-style: normal !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  #training .delivery-track article.is-selected,
  #training .delivery-track article.is-selected:hover,
  #training .delivery-track article[aria-selected="true"] {
    scale: 1.018 !important;
    border-color: #00ff99 !important;
    background:
      linear-gradient(110deg, rgba(0, 255, 153, 0.075), rgba(255, 255, 255, 0.024)),
      #121722 !important;
    box-shadow:
      inset 0 0 28px rgba(0, 255, 153, 0.14),
      inset 0 1px 0 rgba(255, 255, 255, 0.08),
      0 0 0 1px rgba(0, 255, 153, 0.22),
      0 18px 60px rgba(0, 255, 153, 0.12),
      0 18px 44px rgba(0, 0, 0, 0.30) !important;
  }

  #training .delivery-track article.is-selected::after {
    content: "当前步骤" !important;
    position: absolute !important;
    right: 64px !important;
    top: 16px !important;
    z-index: 4 !important;
    display: inline-flex !important;
    align-items: center !important;
    height: 24px !important;
    padding: 0 10px !important;
    border-radius: 999px !important;
    background: rgba(0, 255, 153, 0.16) !important;
    color: #dffff2 !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: 0 !important;
  }

  #training .delivery-track article.is-selected .delivery-card-cta {
    border-color: #00ff99 !important;
    background: rgba(0, 255, 153, 0.24) !important;
    color: #ffffff !important;
  }
}

@keyframes sws-delivery-note-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* FINAL 2026-06-16: hard-lock delivery clickable feedback and CTA placement. */
@media (min-width: 921px) {
  #training .delivery-track article {
    cursor: pointer !important;
    pointer-events: auto !important;
  }

  #training .delivery-card-cta,
  #training .delivery-track article .delivery-card-cta,
  #training .delivery-track article.is-selected .delivery-card-cta {
    position: absolute !important;
    left: auto !important;
    top: 50% !important;
    right: 22px !important;
    bottom: auto !important;
    transform: translateY(-50%) !important;
    width: 36px !important;
    height: 36px !important;
    z-index: 20 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1px solid rgba(0, 255, 153, 0.42) !important;
    border-radius: 999px !important;
    background: rgba(0, 255, 153, 0.12) !important;
    color: #00ff99 !important;
    font-size: 20px !important;
    text-decoration: none !important;
    line-height: 1 !important;
  }

  #training .delivery-track article:hover .delivery-card-cta,
  #training .delivery-card-cta:focus-visible,
  #training .delivery-track article.is-selected .delivery-card-cta {
    transform: translate(4px, -50%) !important;
    border-color: #00ff99 !important;
    background: rgba(0, 255, 153, 0.26) !important;
    color: #ffffff !important;
    box-shadow: 0 0 22px rgba(0, 255, 153, 0.24), inset 0 0 16px rgba(0, 255, 153, 0.16) !important;
  }

  #training .delivery-track article.is-selected h3::after {
    content: "已选择" !important;
    display: inline-flex !important;
    align-items: center !important;
    height: 22px !important;
    margin-left: 12px !important;
    padding: 0 9px !important;
    border: 1px solid rgba(0, 255, 153, 0.36) !important;
    border-radius: 999px !important;
    background: rgba(0, 255, 153, 0.16) !important;
    color: #dffff2 !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    vertical-align: middle !important;
  }

  #training .delivery-track article.is-selected {
    animation: sws-selected-pulse 0.42s ease both !important;
  }
}

@keyframes sws-selected-pulse {
  0% {
    filter: brightness(1);
  }
  45% {
    filter: brightness(1.18) saturate(1.12);
  }
  100% {
    filter: brightness(1);
  }
}

/* FINAL 2026-06-16: core technology bottom descriptions must wrap, not clip. */
@media (min-width: 921px) {
  #capability .core-tech-card,
  #capability .core-tech-card:nth-child(1),
  #capability .core-tech-card:nth-child(2),
  #capability .core-tech-card:nth-child(3),
  #capability .core-tech-card:nth-child(4) {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 58px !important;
    grid-template-rows: auto auto auto minmax(0, 1fr) auto !important;
    align-content: start !important;
    gap: 12px 16px !important;
    padding-right: 30px !important;
    padding-left: 30px !important;
    overflow: visible !important;
  }

  #capability .core-tech-card span {
    grid-column: 1 !important;
    grid-row: 1 !important;
    margin: 0 !important;
  }

  #capability .core-tech-card .tech-icon {
    grid-column: 2 !important;
    grid-row: 1 / 3 !important;
    align-self: start !important;
    justify-self: end !important;
    margin: 0 !important;
    transform: none !important;
  }

  #capability .core-tech-card h3 {
    grid-column: 1 / 3 !important;
    grid-row: 2 !important;
    margin: 30px 0 0 !important;
  }

  #capability .core-tech-card p {
    grid-column: 1 / 3 !important;
    grid-row: 3 !important;
    margin: 0 !important;
    max-width: 330px !important;
    overflow: visible !important;
  }

  #capability .core-tech-card em {
    grid-column: 1 / 3 !important;
    grid-row: 5 !important;
    align-self: end !important;
    justify-self: stretch !important;
    display: block !important;
    width: auto !important;
    max-width: none !important;
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
    margin: 18px 58px 0 0 !important;
    padding: 16px 18px !important;
    border: 1px solid rgba(0, 255, 153, 0.18) !important;
    border-radius: 16px !important;
    background: rgba(0, 255, 153, 0.075) !important;
    color: rgba(176, 176, 176, 0.92) !important;
    font-size: 15px !important;
    line-height: 1.62 !important;
    font-style: normal !important;
    font-weight: 500 !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    word-break: keep-all !important;
    overflow-wrap: anywhere !important;
    box-shadow: inset 0 0 18px rgba(0, 255, 153, 0.045) !important;
  }

  #capability .core-card-cta {
    right: 20px !important;
    bottom: 22px !important;
  }
}

@media (min-width: 921px) and (max-width: 1500px) {
  #capability .core-tech-card em {
    width: auto !important;
    max-width: none !important;
    margin-right: 54px !important;
    padding: 13px 15px !important;
    font-size: 13px !important;
    line-height: 1.48 !important;
  }

  #capability .core-tech-card h3 {
    margin-top: 24px !important;
  }
}

/* FINAL 2026-06-16: scenario cards keep CTA and tag in a fixed bottom action row. */
@media (min-width: 921px) {
  #scenarios .solution-card,
  #scenarios .solution-card:first-child,
  #scenarios .solution-card:nth-child(2),
  #scenarios .solution-card:nth-child(3),
  #scenarios .solution-card:nth-child(4),
  #scenarios .solution-card:nth-child(5),
  #scenarios .solution-card:nth-child(6) {
    overflow: hidden !important;
  }

  #scenarios .solution-card .solution-content,
  #scenarios .solution-card:first-child .solution-content,
  #scenarios .solution-card:not(:first-child) .solution-content {
    min-height: 100% !important;
    padding-bottom: 82px !important;
    overflow: visible !important;
  }

  #scenarios .solution-card p,
  #scenarios .solution-card:first-child p,
  #scenarios .solution-card:nth-child(6) p,
  #scenarios .solution-content p {
    max-width: calc(100% - 8px) !important;
    margin-bottom: 0 !important;
    line-height: 1.58 !important;
    overflow: visible !important;
    text-overflow: clip !important;
    -webkit-line-clamp: unset !important;
  }

  #scenarios .solution-card-link,
  #scenarios .solution-card .solution-card-link {
    position: absolute !important;
    left: 28px !important;
    right: auto !important;
    bottom: 28px !important;
    z-index: 6 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    height: 36px !important;
    min-width: 118px !important;
    max-width: calc(100% - 170px) !important;
    margin: 0 !important;
    padding: 0 16px !important;
    border: 1px solid rgba(0, 255, 153, 0.30) !important;
    border-radius: 999px !important;
    background: rgba(0, 255, 153, 0.085) !important;
    color: rgba(205, 245, 231, 0.86) !important;
    font-size: 13px !important;
    font-weight: 650 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    text-decoration: none !important;
    box-shadow: inset 0 0 14px rgba(0, 255, 153, 0.06) !important;
    transform: none !important;
  }

  #scenarios .solution-card-link::before {
    content: none !important;
  }

  #scenarios .solution-card:hover .solution-card-link,
  #scenarios .solution-card:focus-within .solution-card-link,
  #scenarios .solution-card-link:hover {
    border-color: #00ff99 !important;
    background: rgba(0, 255, 153, 0.18) !important;
    color: #ffffff !important;
    transform: translateY(-2px) !important;
    box-shadow:
      inset 0 0 18px rgba(0, 255, 153, 0.10),
      0 0 20px rgba(0, 255, 153, 0.16) !important;
  }

  #scenarios .solution-tag,
  #scenarios .solution-card .solution-tag {
    position: absolute !important;
    left: auto !important;
    right: 28px !important;
    bottom: 28px !important;
    z-index: 6 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    max-width: 118px !important;
    min-height: 36px !important;
    margin: 0 !important;
    padding: 0 14px !important;
    border: 1px solid rgba(0, 255, 153, 0.28) !important;
    border-radius: 999px !important;
    background: rgba(0, 255, 153, 0.12) !important;
    color: rgba(222, 255, 242, 0.90) !important;
    font-size: 12px !important;
    font-style: normal !important;
    font-weight: 650 !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    transform: none !important;
  }
}

@media (min-width: 921px) and (max-width: 1500px) {
  #scenarios .solution-card .solution-content,
  #scenarios .solution-card:first-child .solution-content,
  #scenarios .solution-card:not(:first-child) .solution-content {
    padding-bottom: 76px !important;
  }

  #scenarios .solution-card-link,
  #scenarios .solution-card .solution-card-link {
    left: 24px !important;
    bottom: 24px !important;
    height: 34px !important;
    min-width: 106px !important;
    max-width: calc(100% - 150px) !important;
    padding: 0 13px !important;
    font-size: 12px !important;
  }

  #scenarios .solution-tag,
  #scenarios .solution-card .solution-tag {
    right: 24px !important;
    bottom: 24px !important;
    max-width: 106px !important;
    min-height: 34px !important;
    padding: 0 12px !important;
    font-size: 11px !important;
  }
}

@media (max-width: 720px) {
  #scenarios .solution-card-link {
    margin-top: 20px !important;
  }

  #scenarios .solution-tag {
    margin-top: 10px !important;
  }
}

/* FINAL 2026-06-16: stack scenario CTA above tag on narrow desktop cards. */
@media (min-width: 921px) {
  #scenarios .solution-card .solution-content,
  #scenarios .solution-card:first-child .solution-content,
  #scenarios .solution-card:not(:first-child) .solution-content {
    position: static !important;
    padding-bottom: 118px !important;
  }

  #scenarios .solution-card-link,
  #scenarios .solution-card .solution-card-link {
    left: 28px !important;
    right: auto !important;
    bottom: 74px !important;
    max-width: calc(100% - 56px) !important;
  }

  #scenarios .solution-tag,
  #scenarios .solution-card .solution-tag {
    left: 28px !important;
    right: auto !important;
    bottom: 28px !important;
    max-width: calc(100% - 56px) !important;
  }
}

@media (min-width: 921px) and (max-width: 1500px) {
  #scenarios .solution-card .solution-content,
  #scenarios .solution-card:first-child .solution-content,
  #scenarios .solution-card:not(:first-child) .solution-content {
    padding-bottom: 108px !important;
  }

  #scenarios .solution-card-link,
  #scenarios .solution-card .solution-card-link {
    left: 24px !important;
    bottom: 66px !important;
    max-width: calc(100% - 48px) !important;
  }

  #scenarios .solution-tag,
  #scenarios .solution-card .solution-tag {
    left: 24px !important;
    bottom: 24px !important;
    max-width: calc(100% - 48px) !important;
  }
}

/* FINAL 2026-06-16: scenario card actions are normal stacked rows, never overlapping. */
@media (min-width: 921px) {
  #scenarios .solution-card .solution-content,
  #scenarios .solution-card:first-child .solution-content,
  #scenarios .solution-card:not(:first-child) .solution-content {
    position: relative !important;
    flex: 1 1 auto !important;
    min-height: 100% !important;
    padding: 0 !important;
    display: grid !important;
    grid-template-rows: auto auto auto minmax(18px, 1fr) 36px 34px !important;
    row-gap: 8px !important;
    align-items: start !important;
    overflow: visible !important;
  }

  #scenarios .solution-card span {
    grid-row: 1 !important;
    margin: 0 0 16px !important;
  }

  #scenarios .solution-card h3 {
    grid-row: 2 !important;
    margin: 0 0 8px !important;
  }

  #scenarios .solution-card p,
  #scenarios .solution-card:first-child p,
  #scenarios .solution-card:nth-child(6) p,
  #scenarios .solution-content p {
    grid-row: 3 !important;
    margin: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 3 !important;
  }

  #scenarios .solution-card-link,
  #scenarios .solution-card .solution-card-link {
    position: static !important;
    grid-row: 5 !important;
    align-self: end !important;
    justify-self: start !important;
    inset: auto !important;
    width: max-content !important;
    max-width: 100% !important;
    height: 36px !important;
    min-width: 118px !important;
    margin: 0 !important;
    transform: none !important;
  }

  #scenarios .solution-tag,
  #scenarios .solution-card .solution-tag {
    position: static !important;
    grid-row: 6 !important;
    align-self: end !important;
    justify-self: start !important;
    inset: auto !important;
    width: max-content !important;
    max-width: 100% !important;
    height: 34px !important;
    min-height: 34px !important;
    margin: 0 !important;
    transform: none !important;
  }

  #scenarios .solution-card:hover .solution-card-link,
  #scenarios .solution-card:focus-within .solution-card-link,
  #scenarios .solution-card-link:hover {
    transform: translateX(3px) !important;
  }
}

/* FINAL 2026-06-16: scenario CTA and tag sit on one bottom row. */
@media (min-width: 921px) {
  #scenarios .solution-card,
  #scenarios .solution-card:first-child,
  #scenarios .solution-card:nth-child(2),
  #scenarios .solution-card:nth-child(3),
  #scenarios .solution-card:nth-child(4),
  #scenarios .solution-card:nth-child(5),
  #scenarios .solution-card:nth-child(6) {
    padding-bottom: 82px !important;
  }

  #scenarios .solution-card .solution-content,
  #scenarios .solution-card:first-child .solution-content,
  #scenarios .solution-card:not(:first-child) .solution-content {
    position: static !important;
    grid-template-rows: auto auto auto minmax(18px, 1fr) !important;
    padding: 0 !important;
  }

  #scenarios .solution-card-link,
  #scenarios .solution-card .solution-card-link,
  #scenarios .solution-tag,
  #scenarios .solution-card .solution-tag {
    position: absolute !important;
    top: auto !important;
    bottom: 28px !important;
    z-index: 8 !important;
    grid-row: auto !important;
    align-self: auto !important;
    justify-self: auto !important;
    margin: 0 !important;
    transform: none !important;
  }

  #scenarios .solution-card-link,
  #scenarios .solution-card .solution-card-link {
    left: 28px !important;
    right: auto !important;
    width: auto !important;
    min-width: 116px !important;
    max-width: calc(100% - 150px) !important;
    height: 36px !important;
    padding: 0 15px !important;
  }

  #scenarios .solution-tag,
  #scenarios .solution-card .solution-tag {
    left: 158px !important;
    right: auto !important;
    width: auto !important;
    max-width: calc(100% - 186px) !important;
    height: 36px !important;
    min-height: 36px !important;
    padding: 0 14px !important;
  }
}

@media (min-width: 921px) and (max-width: 1500px) {
  #scenarios .solution-card,
  #scenarios .solution-card:first-child,
  #scenarios .solution-card:nth-child(2),
  #scenarios .solution-card:nth-child(3),
  #scenarios .solution-card:nth-child(4),
  #scenarios .solution-card:nth-child(5),
  #scenarios .solution-card:nth-child(6) {
    padding-bottom: 78px !important;
  }

  #scenarios .solution-card-link,
  #scenarios .solution-card .solution-card-link,
  #scenarios .solution-tag,
  #scenarios .solution-card .solution-tag {
    bottom: 24px !important;
  }

  #scenarios .solution-card-link,
  #scenarios .solution-card .solution-card-link {
    left: 10px !important;
    min-width: 96px !important;
    max-width: 96px !important;
    height: 32px !important;
    padding: 0 8px !important;
    font-size: 11px !important;
  }

  #scenarios .solution-tag,
  #scenarios .solution-card .solution-tag {
    left: 112px !important;
    max-width: calc(100% - 122px) !important;
    height: 32px !important;
    min-height: 32px !important;
    padding: 0 8px !important;
    font-size: 10px !important;
  }
}

/* FINAL 2026-06-16: keep the one-row action bar readable on narrower desktop previews. */
@media (min-width: 921px) and (max-width: 1500px) {
  #scenarios .solution-card p,
  #scenarios .solution-card:first-child p,
  #scenarios .solution-card:nth-child(6) p,
  #scenarios .solution-content p {
    line-height: 1.48 !important;
    -webkit-line-clamp: 2 !important;
  }

  #scenarios .solution-card-link,
  #scenarios .solution-card .solution-card-link,
  #scenarios .solution-tag,
  #scenarios .solution-card .solution-tag {
    bottom: 12px !important;
  }

  #scenarios .solution-card-link,
  #scenarios .solution-card .solution-card-link {
    left: 10px !important;
    width: 96px !important;
    min-width: 96px !important;
    max-width: 96px !important;
  }

  #scenarios .solution-tag,
  #scenarios .solution-card .solution-tag {
    left: 112px !important;
    width: auto !important;
    max-width: calc(100% - 122px) !important;
    min-width: 0 !important;
  }
}

/* FINAL 2026-06-16: footer CTA becomes an illustrated product entry. */
.site-footer.dji-footer .footer-download {
  position: relative !important;
  display: grid !important;
  grid-template-columns: minmax(320px, 0.44fr) minmax(420px, 0.56fr) !important;
  align-items: center !important;
  gap: clamp(34px, 5vw, 78px) !important;
  min-height: 360px !important;
  padding: clamp(42px, 5.4vw, 72px) clamp(28px, 4.5vw, 64px) !important;
  border: 1px solid rgba(255, 255, 255, 0.10) !important;
  border-radius: 0 !important;
  background:
    radial-gradient(circle at 76% 34%, rgba(0, 255, 153, 0.16), transparent 32%),
    radial-gradient(circle at 28% 74%, rgba(82, 142, 255, 0.12), transparent 34%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.012)),
    #111313 !important;
  overflow: hidden !important;
}

.site-footer.dji-footer .footer-download::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px) !important;
  background-size: 46px 46px !important;
  mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0.36), rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0.46)) !important;
  pointer-events: none !important;
}

.footer-cta-copy,
.footer-cta-visual {
  position: relative !important;
  z-index: 1 !important;
}

.footer-cta-copy {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 18px !important;
}

.footer-cta-copy > span {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  min-height: 34px !important;
  padding: 0 16px !important;
  border: 1px solid rgba(0, 255, 153, 0.32) !important;
  border-radius: 999px !important;
  background: rgba(0, 255, 153, 0.08) !important;
  color: #26efad !important;
  font-size: 14px !important;
  font-weight: 700 !important;
}

.footer-cta-copy > span::before {
  content: "" !important;
  width: 8px !important;
  height: 8px !important;
  border-radius: 999px !important;
  background: #26efad !important;
  box-shadow: 0 0 18px rgba(38, 239, 173, 0.72) !important;
}

.site-footer.dji-footer .footer-cta-copy p {
  max-width: 620px !important;
  margin: 0 !important;
  color: #ffffff !important;
  font-size: clamp(32px, 4vw, 52px) !important;
  font-weight: 760 !important;
  line-height: 1.34 !important;
  letter-spacing: 0 !important;
}

.footer-cta-copy small {
  display: block !important;
  max-width: 540px !important;
  color: rgba(222, 234, 229, 0.68) !important;
  font-size: clamp(15px, 1.1vw, 18px) !important;
  line-height: 1.76 !important;
}

.site-footer.dji-footer .footer-cta-copy a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 154px !important;
  min-height: 52px !important;
  margin-top: 8px !important;
  padding: 0 28px !important;
  border: 1px solid rgba(0, 255, 153, 0.42) !important;
  border-radius: 999px !important;
  background: rgba(0, 255, 153, 0.16) !important;
  color: #ffffff !important;
  font-size: 16px !important;
  font-weight: 750 !important;
  text-decoration: none !important;
  box-shadow: inset 0 0 18px rgba(0, 255, 153, 0.10), 0 16px 40px rgba(0, 0, 0, 0.24) !important;
  transition: transform 0.28s ease, border-color 0.28s ease, background 0.28s ease, box-shadow 0.28s ease !important;
}

.site-footer.dji-footer .footer-cta-copy a:hover {
  transform: translateY(-3px) !important;
  border-color: #00ff99 !important;
  background: rgba(0, 255, 153, 0.24) !important;
  box-shadow: inset 0 0 20px rgba(0, 255, 153, 0.16), 0 18px 46px rgba(0, 255, 153, 0.12) !important;
}

.footer-cta-visual {
  min-height: 300px !important;
  display: grid !important;
  grid-template-columns: 1fr 0.92fr !important;
  grid-template-rows: 1fr 0.82fr !important;
  gap: 18px !important;
}

.footer-visual-panel {
  position: relative !important;
  border: 1px solid rgba(255, 255, 255, 0.13) !important;
  border-radius: 18px !important;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0.025)),
    rgba(8, 20, 17, 0.78) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.09), 0 20px 46px rgba(0, 0, 0, 0.24) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  overflow: hidden !important;
}

.footer-visual-panel::after {
  content: "" !important;
  position: absolute !important;
  inset: auto -18% -36% 32% !important;
  height: 68% !important;
  background: radial-gradient(circle, rgba(0, 255, 153, 0.20), transparent 68%) !important;
  pointer-events: none !important;
}

.footer-agent-panel {
  grid-row: 1 / 3 !important;
  padding: 26px !important;
}

.footer-agent-panel strong,
.footer-workflow-panel strong {
  display: block !important;
  color: rgba(255, 255, 255, 0.96) !important;
  font-size: 18px !important;
  font-weight: 760 !important;
  line-height: 1.3 !important;
}

.footer-agent-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px !important;
  margin: 28px 0 !important;
}

.footer-agent-grid span,
.footer-workflow-panel span {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 38px !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 12px !important;
  background: rgba(255, 255, 255, 0.88) !important;
  color: #17211e !important;
  font-size: 13px !important;
  font-weight: 750 !important;
}

.footer-agent-panel em {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 40px !important;
  padding: 0 18px !important;
  border-radius: 999px !important;
  background: rgba(0, 255, 153, 0.18) !important;
  color: #dffff2 !important;
  font-size: 14px !important;
  font-style: normal !important;
  font-weight: 800 !important;
}

.footer-workflow-panel {
  padding: 24px !important;
}

.footer-flow-line {
  position: relative !important;
  height: 68px !important;
  margin: 18px 0 12px !important;
  border-radius: 14px !important;
  background:
    linear-gradient(90deg, rgba(0, 255, 153, 0.12), rgba(82, 142, 255, 0.12)),
    rgba(255, 255, 255, 0.05) !important;
}

.footer-flow-line::before {
  content: "" !important;
  position: absolute !important;
  left: 20px !important;
  right: 20px !important;
  top: 50% !important;
  height: 2px !important;
  background: linear-gradient(90deg, #00ff99, rgba(82, 142, 255, 0.88)) !important;
  transform: translateY(-50%) !important;
}

.footer-flow-line i {
  position: absolute !important;
  top: 50% !important;
  width: 14px !important;
  height: 14px !important;
  border: 2px solid rgba(255, 255, 255, 0.84) !important;
  border-radius: 999px !important;
  background: #00ff99 !important;
  transform: translate(-50%, -50%) !important;
  box-shadow: 0 0 18px rgba(0, 255, 153, 0.42) !important;
}

.footer-flow-line i:nth-child(1) { left: 18% !important; }
.footer-flow-line i:nth-child(2) { left: 40% !important; background: #8fb7ff !important; }
.footer-flow-line i:nth-child(3) { left: 62% !important; }
.footer-flow-line i:nth-child(4) { left: 84% !important; background: #8fb7ff !important; }

.footer-workflow-panel span {
  min-height: 30px !important;
  margin: 0 8px 8px 0 !important;
  padding: 0 12px !important;
  border-radius: 999px !important;
  background: rgba(0, 255, 153, 0.16) !important;
  color: #dffff2 !important;
}

.footer-dashboard-panel {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 12px !important;
  padding: 18px !important;
}

.footer-dashboard-panel div {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  gap: 8px !important;
  min-height: 96px !important;
  padding: 16px !important;
  border-radius: 14px !important;
  background: rgba(0, 255, 153, 0.10) !important;
}

.footer-dashboard-panel b {
  color: #ffffff !important;
  font-size: 28px !important;
  line-height: 1 !important;
}

.footer-dashboard-panel span {
  color: rgba(222, 255, 242, 0.72) !important;
  font-size: 13px !important;
}

@media (max-width: 980px) {
  .site-footer.dji-footer .footer-download {
    grid-template-columns: 1fr !important;
  }

  .footer-cta-visual {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto !important;
  }

  .footer-agent-panel {
    grid-row: auto !important;
  }
}

/* FINAL 2026-06-16: about title rhythm and demo CTA placement. */
#about .about-narrative-center h2,
#about .about-narrative h2 {
  max-width: 640px !important;
  margin: 0 !important;
  color: #ffffff !important;
  font-size: clamp(40px, 3.15vw, 56px) !important;
  font-weight: 760 !important;
  line-height: 1.18 !important;
  letter-spacing: 0 !important;
}

#about .about-narrative-center p,
#about .about-narrative p {
  margin-bottom: 0 !important;
}

#about .about-demo-cta {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: fit-content !important;
  min-width: 154px !important;
  min-height: 52px !important;
  margin-top: 32px !important;
  padding: 0 30px !important;
  border: 1px solid rgba(0, 255, 153, 0.42) !important;
  border-radius: 999px !important;
  background: rgba(0, 255, 153, 0.14) !important;
  color: #ffffff !important;
  font-size: 16px !important;
  font-weight: 750 !important;
  line-height: 1 !important;
  text-decoration: none !important;
  box-shadow:
    inset 0 0 18px rgba(0, 255, 153, 0.10),
    0 16px 40px rgba(0, 0, 0, 0.22) !important;
  transition:
    transform 0.28s ease,
    border-color 0.28s ease,
    background 0.28s ease,
    box-shadow 0.28s ease !important;
}

#about .about-demo-cta:hover,
#about .about-demo-cta:focus-visible {
  transform: translateY(-3px) !important;
  border-color: #00ff99 !important;
  background: rgba(0, 255, 153, 0.24) !important;
  box-shadow:
    inset 0 0 20px rgba(0, 255, 153, 0.16),
    0 18px 46px rgba(0, 255, 153, 0.12) !important;
}

.footer-cta-copy > span {
  display: none !important;
}

/* FINAL 2026-06-16: remove explanatory subtitles from navigation and section cards. */
.nav-panel-intro em,
.nav-panel-grid a em,
#services .infra-hero > p,
#services .infra-copy p,
#scenarios .solution-subtitle,
#scenarios .solution-card p,
#capability .capability-copy p,
#capability .core-tech-card p,
#capability .core-tech-card > em,
#training .delivery-copy > p,
#training .delivery-card-copy > p,
#resources .resource-main > p,
#resources .resource-panels article > p,
#console .console-copy > p,
#console .platform-console-card > p,
#about .about-narrative > p,
#about .about-narrative-center > p {
  display: none !important;
}

.nav-panel-grid a,
.nav-panel-intro {
  gap: 0 !important;
}

#services .infra-copy,
#capability .capability-copy,
#training .delivery-copy,
#resources .resource-main,
#console .console-copy,
#about .about-narrative,
#about .about-narrative-center {
  gap: 22px !important;
}

#scenarios .solution-card .solution-content,
#scenarios .solution-card:first-child .solution-content,
#scenarios .solution-card:not(:first-child) .solution-content {
  grid-template-rows: auto auto minmax(18px, 1fr) !important;
}

#about .about-demo-cta {
  margin-top: 22px !important;
}

/* FINAL 2026-06-16: stronger removal for legacy card subtitle overrides. */
body #services .infra-showcase article .infra-copy > p,
body #scenarios .solution-board article.solution-card .solution-content > p,
body #training .delivery-track article .delivery-card-copy > p,
body #resources .resource-panels article > p,
body #capability .tech-console article.core-tech-card > p,
body #capability .tech-console article.core-tech-card > em,
body #console .console-grid article.platform-console-card > p {
  display: none !important;
  visibility: hidden !important;
  width: 0 !important;
  height: 0 !important;
  max-width: 0 !important;
  max-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

[hidden] {
  display: none !important;
}

/* FINAL 2026-06-16: footer columns mirror the header navigation structure. */
.site-footer.dji-footer .footer-mega {
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  gap: clamp(20px, 2.4vw, 34px) !important;
}

.site-footer.dji-footer .footer-column h3:not(:first-child) {
  margin-top: 0 !important;
}

.site-footer.dji-footer .footer-column a,
.site-footer.dji-footer .footer-column span {
  white-space: normal !important;
}

@media (max-width: 1180px) {
  .site-footer.dji-footer .footer-mega {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 720px) {
  .site-footer.dji-footer .footer-mega {
    grid-template-columns: 1fr !important;
  }
}

/* FINAL 2026-06-16: restore homepage body copy; only dropdown explanations stay hidden. */
body #services .infra-hero > p,
body #services .infra-showcase article .infra-copy > p,
body #scenarios .solution-subtitle,
body #scenarios .solution-board article.solution-card .solution-content > p,
body #capability .capability-copy > p,
body #capability .tech-console article.core-tech-card > p,
body #capability .tech-console article.core-tech-card > em,
body #training .delivery-copy > p,
body #training .delivery-track article .delivery-card-copy > p,
body #resources .resource-main > p,
body #resources .resource-panels article > p,
body #console .console-copy > p,
body #console .console-grid article.platform-console-card > p,
body #console .platform-console article.platform-console-card > p,
body #about .about-narrative > p,
body #about .about-narrative-center > p {
  display: block !important;
  visibility: visible !important;
  width: auto !important;
  height: auto !important;
  max-width: none !important;
  max-height: none !important;
  overflow: visible !important;
}

body #capability .tech-console article.core-tech-card > em {
  display: block !important;
}

body .nav-panel-intro em,
body .nav-panel-grid a em {
  display: none !important;
}

body #console .platform-console article.platform-console-card > p {
  display: block !important;
  visibility: visible !important;
  width: auto !important;
  height: auto !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 0 18px !important;
  padding: 0 !important;
  overflow: visible !important;
}

/* FINAL 2026-06-16: homepage technology color system. */
:root {
  --tech-void: #020711;
  --tech-ink: #06101f;
  --tech-panel: rgba(9, 22, 38, .82);
  --tech-panel-strong: rgba(8, 32, 38, .90);
  --tech-cyan: #23d8ff;
  --tech-green: #00ff99;
  --tech-blue: #4f8cff;
  --tech-title: #f5fbff;
  --tech-body: #b0c3ce;
  --tech-muted: #7f98a5;
  --tech-line: rgba(92, 223, 255, .18);
  --tech-green-line: rgba(0, 255, 153, .28);
  --tech-glow: 0 0 32px rgba(0, 255, 153, .16), 0 0 72px rgba(35, 216, 255, .08);
}

html body {
  background:
    radial-gradient(circle at 16% 8%, rgba(35, 216, 255, .15), transparent 30%),
    radial-gradient(circle at 84% 18%, rgba(0, 255, 153, .13), transparent 32%),
    linear-gradient(180deg, #030813 0%, #06101f 42%, #020711 100%) !important;
  color: var(--tech-body) !important;
}

.site-header {
  background: rgba(1, 6, 14, .88) !important;
  border-bottom: 1px solid rgba(92, 223, 255, .14) !important;
  box-shadow: 0 18px 54px rgba(0, 0, 0, .30) !important;
  backdrop-filter: blur(18px) saturate(150%) !important;
}

.site-nav .nav-link,
.console-link,
.lang-switch {
  color: rgba(215, 231, 238, .72) !important;
}

.site-nav .nav-link:hover,
.site-nav .nav-link.is-active,
.console-link:hover {
  color: var(--tech-green) !important;
  text-shadow: 0 0 18px rgba(0, 255, 153, .38) !important;
}

.site-nav .nav-link.is-active::after {
  background: linear-gradient(90deg, var(--tech-cyan), var(--tech-green)) !important;
  box-shadow: 0 0 16px rgba(0, 255, 153, .55) !important;
}

.nav-panel {
  background:
    linear-gradient(145deg, rgba(7, 18, 32, .96), rgba(4, 34, 34, .92)) !important;
  border-color: rgba(92, 223, 255, .18) !important;
  box-shadow: 0 26px 80px rgba(0, 0, 0, .44), inset 0 1px 0 rgba(255, 255, 255, .05) !important;
}

.hero.hero--agent,
.hero-slide {
  background:
    radial-gradient(circle at 70% 24%, rgba(35, 216, 255, .16), transparent 34%),
    radial-gradient(circle at 26% 66%, rgba(0, 255, 153, .13), transparent 38%),
    linear-gradient(135deg, #030813 0%, #07162a 50%, #020711 100%) !important;
}

.hero-overlay {
  background:
    linear-gradient(90deg, rgba(2, 7, 17, .60), rgba(2, 7, 17, .20) 48%, rgba(2, 7, 17, .62)),
    linear-gradient(180deg, rgba(35, 216, 255, .05), transparent 36%, rgba(0, 255, 153, .04)) !important;
}

.hero-electric-flow {
  opacity: .78 !important;
  filter: hue-rotate(35deg) saturate(1.28) brightness(1.12) !important;
}

.hero-content h1,
.cert-content h2,
.workflow-content h2 {
  color: var(--tech-title) !important;
  text-shadow: 0 0 36px rgba(35, 216, 255, .14) !important;
}

.hero-copy,
.cert-content p,
.workflow-content p {
  color: var(--tech-body) !important;
}

.button.primary,
.hero-actions .button.primary,
.cert-actions .button.primary {
  background: linear-gradient(135deg, var(--tech-green), #18d7ff) !important;
  color: #00120d !important;
  border-color: rgba(255, 255, 255, .16) !important;
  box-shadow: 0 14px 42px rgba(0, 255, 153, .22), 0 0 28px rgba(35, 216, 255, .12) !important;
}

.button.secondary,
.hero-actions .button.secondary,
.cert-actions .button.secondary {
  color: var(--tech-title) !important;
  border-color: rgba(92, 223, 255, .30) !important;
  background: rgba(7, 20, 34, .54) !important;
  box-shadow: inset 0 0 0 1px rgba(0, 255, 153, .10) !important;
}

.ai-home,
#services.ai-origin,
#scenarios.ai-solutions,
#capability.core-tech-section,
#training.premium-delivery,
#resources.premium-resources,
#console.ai-console-section,
#about.premium-about {
  background:
    radial-gradient(circle at 72% 24%, rgba(35, 216, 255, .12), transparent 34%),
    radial-gradient(circle at 18% 72%, rgba(0, 255, 153, .11), transparent 34%),
    linear-gradient(180deg, #04101e 0%, #020711 100%) !important;
}

.ai-section::before {
  background-image:
    linear-gradient(rgba(92, 223, 255, .055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(92, 223, 255, .055) 1px, transparent 1px) !important;
  background-size: 72px 72px !important;
  opacity: .30 !important;
}

.ai-section::after {
  background:
    linear-gradient(180deg, rgba(35, 216, 255, .05), transparent 24%, transparent 78%, rgba(0, 255, 153, .04)),
    radial-gradient(circle at 78% 36%, rgba(35, 216, 255, .14), transparent 34%) !important;
}

#services .infra-pill,
#scenarios .solution-pill,
#capability .capability-pill,
#training .stage-pill,
#resources .resource-pill,
#console .console-pill,
#about .about-pill {
  color: #bfffee !important;
  background: rgba(0, 255, 153, .10) !important;
  border-color: rgba(0, 255, 153, .48) !important;
  box-shadow: 0 0 28px rgba(0, 255, 153, .10) !important;
}

#services .infra-hero h2,
#scenarios .solution-hero h2,
#capability .capability-copy h2,
#training .stage-head h2,
#resources .resource-main h2,
#console .console-copy h2,
#about .about-narrative-center h2,
#about .about-narrative h2 {
  color: var(--tech-title) !important;
  text-shadow: 0 0 32px rgba(35, 216, 255, .12) !important;
}

#services .infra-hero p,
#scenarios .solution-subtitle,
#capability .capability-copy > p,
#training .stage-head p,
#resources .resource-main > p,
#console .console-copy > p,
#about .about-narrative-center p,
#about .about-narrative > p {
  color: var(--tech-body) !important;
}

#services .infra-module,
#scenarios .solution-card,
#capability .core-tech-card,
#training .delivery-track article,
#resources .resource-panels article,
#console .platform-console-card,
#about .about-video-card,
#about .about-narrative {
  background:
    linear-gradient(145deg, rgba(8, 21, 38, .78), rgba(3, 36, 31, .70)) !important;
  border-color: var(--tech-line) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .045), 0 24px 72px rgba(0, 0, 0, .24) !important;
}

#services .infra-module:hover,
#scenarios .solution-card:hover,
#capability .core-tech-card:hover,
#training .delivery-track article:hover,
#resources .resource-panels article:hover,
#console .platform-console-card:hover {
  border-color: rgba(0, 255, 153, .72) !important;
  box-shadow: var(--tech-glow), inset 0 1px 0 rgba(255, 255, 255, .07) !important;
}

#services .infra-module h3,
#scenarios .solution-card h3,
#capability .core-tech-card h3,
#training .delivery-track h3,
#resources .resource-panels h3,
#console .platform-console-card h3 {
  color: var(--tech-title) !important;
}

#services .infra-module p,
#scenarios .solution-card p,
#capability .core-tech-card p,
#training .delivery-track p,
#resources .resource-panels p,
#console .platform-console-card p {
  color: var(--tech-body) !important;
}

#services .infra-module svg,
#scenarios .solution-card svg,
#capability .core-tech-card svg,
#training .delivery-track svg,
#resources .resource-panels svg,
#console .platform-console-card svg {
  color: var(--tech-green) !important;
  filter: drop-shadow(0 0 18px rgba(0, 255, 153, .34)) !important;
}

.site-footer.dji-footer {
  background:
    radial-gradient(circle at 82% 8%, rgba(35, 216, 255, .13), transparent 32%),
    linear-gradient(180deg, #020711 0%, #010409 100%) !important;
  border-top: 1px solid rgba(92, 223, 255, .16) !important;
}

body #services .infra-showcase article.infra-module,
body #services .infra-showcase article.infra-module.infra-module--large,
body #scenarios .solution-board article.solution-card,
body #capability .tech-console article.core-tech-card,
body #training .delivery-track article.delivery-step,
body #resources .resource-panels article,
body #console .platform-console article.platform-console-card {
  background:
    radial-gradient(circle at 82% 24%, rgba(35, 216, 255, .16), transparent 34%),
    radial-gradient(circle at 18% 78%, rgba(0, 255, 153, .14), transparent 38%),
    linear-gradient(145deg, rgba(8, 21, 38, .86), rgba(4, 28, 38, .72)) !important;
  border-color: rgba(92, 223, 255, .22) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .055), 0 24px 72px rgba(0, 0, 0, .28) !important;
}

body #services .infra-showcase article.infra-module:hover,
body #scenarios .solution-board article.solution-card:hover,
body #capability .tech-console article.core-tech-card:hover,
body #training .delivery-track article.delivery-step:hover,
body #resources .resource-panels article:hover,
body #console .platform-console article.platform-console-card:hover {
  border-color: rgba(0, 255, 153, .78) !important;
  box-shadow: 0 0 34px rgba(0, 255, 153, .18), 0 0 80px rgba(35, 216, 255, .10), inset 0 1px 0 rgba(255, 255, 255, .08) !important;
}

body #services .infra-showcase article.infra-module svg,
body #services .infra-showcase article.infra-module img,
body #scenarios .solution-board article.solution-card svg,
body #capability .tech-console article.core-tech-card svg,
body #training .delivery-track article.delivery-step svg,
body #resources .resource-panels article svg,
body #console .platform-console article.platform-console-card svg {
  color: var(--tech-green) !important;
  filter: drop-shadow(0 0 20px rgba(0, 255, 153, .38)) saturate(1.22) brightness(1.08) !important;
}

/* FINAL 2026-06-16: requested layout polish after technology palette pass. */
.hero.hero--agent {
  background:
    linear-gradient(90deg, rgba(0,0,0,.34), rgba(0,0,0,.06) 56%, rgba(0,0,0,.14)),
    url("./assets/hero-ai-road.webp") center / cover no-repeat,
    #030608 !important;
}

.hero.hero--agent .hero-slide {
  background: transparent !important;
}

.hero.hero--agent .hero-overlay {
  background:
    linear-gradient(90deg, rgba(2, 3, 4, .48) 0%, rgba(2, 3, 4, .06) 55%, rgba(2, 3, 4, .18) 100%),
    linear-gradient(180deg, rgba(4, 6, 7, .18) 0%, rgba(4, 6, 7, .08) 48%, rgba(4, 6, 7, .56) 100%) !important;
}

@media (min-width: 1181px) {
  #scenarios.ai-solutions {
    width: min(1440px, calc(100vw - 112px)) !important;
    margin-inline: auto !important;
    display: grid !important;
    grid-template-columns: minmax(390px, .82fr) minmax(0, 1.48fr) !important;
    column-gap: clamp(34px, 4vw, 62px) !important;
    align-items: center !important;
    overflow: visible !important;
  }

  #scenarios .solution-hero {
    width: 100% !important;
    max-width: 560px !important;
    min-width: 0 !important;
    justify-self: start !important;
  }

  #scenarios .solution-board {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    justify-self: stretch !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    grid-template-rows: repeat(2, minmax(236px, auto)) !important;
    gap: clamp(20px, 1.7vw, 28px) !important;
  }

  #scenarios .solution-card,
  #scenarios .solution-card:first-child,
  #scenarios .solution-card:nth-child(2),
  #scenarios .solution-card:nth-child(3),
  #scenarios .solution-card:nth-child(4),
  #scenarios .solution-card:nth-child(5),
  #scenarios .solution-card:nth-child(6) {
    min-width: 0 !important;
    min-height: 236px !important;
    padding: 28px 28px 72px !important;
    overflow: hidden !important;
  }

  #scenarios .solution-card .solution-visual,
  #scenarios .solution-card:first-child .solution-visual,
  #scenarios .solution-card:not(:first-child) .solution-visual {
    top: 28px !important;
    right: 28px !important;
    width: 58px !important;
    height: 58px !important;
  }

  #scenarios .solution-card .solution-icon,
  #scenarios .solution-card:first-child .solution-icon,
  #scenarios .solution-card:not(:first-child) .solution-icon {
    width: 58px !important;
    height: 58px !important;
    min-width: 58px !important;
    min-height: 58px !important;
    max-width: 58px !important;
    max-height: 58px !important;
  }

  #scenarios .solution-card h3 {
    max-width: calc(100% - 72px) !important;
    font-size: clamp(22px, 1.35vw, 28px) !important;
    line-height: 1.26 !important;
    word-break: normal !important;
    overflow-wrap: anywhere !important;
    line-break: anywhere !important;
    text-wrap: wrap !important;
  }

  #scenarios .solution-card:nth-child(6) h3 {
    max-width: calc(100% - 76px) !important;
  }

  #scenarios .solution-card p {
    max-width: calc(100% - 8px) !important;
    font-size: 15px !important;
    line-height: 1.62 !important;
  }
}

@media (min-width: 921px) {
  #training .delivery-track {
    gap: 22px !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  #training .delivery-track article,
  #training .delivery-track article:nth-child(1),
  #training .delivery-track article:nth-child(2),
  #training .delivery-track article:nth-child(3),
  #training .delivery-track article:nth-child(4) {
    min-height: 138px !important;
    grid-template-columns: 58px minmax(0, 1fr) 44px !important;
    gap: 24px !important;
    align-items: center !important;
    padding: 26px 32px !important;
    border-color: rgba(0, 255, 153, .24) !important;
    background:
      radial-gradient(circle at 86% 24%, rgba(35, 216, 255, .10), transparent 34%),
      linear-gradient(145deg, rgba(8, 21, 38, .88), rgba(5, 28, 36, .78)) !important;
  }

  #training .delivery-track > article > span {
    position: absolute !important;
    top: 22px !important;
    left: 32px !important;
    margin: 0 !important;
    color: rgba(191, 255, 238, .38) !important;
  }

  #training .delivery-icon,
  #training .delivery-track article:nth-child(2) .delivery-icon,
  #training .delivery-track article:nth-child(3) .delivery-icon {
    grid-column: 1 !important;
    position: static !important;
    width: 58px !important;
    height: 58px !important;
    margin: 14px 0 0 !important;
    padding: 14px !important;
    color: #00ff99 !important;
    stroke: #00ff99 !important;
    background: rgba(0, 255, 153, .12) !important;
    border: 1px solid rgba(0, 255, 153, .22) !important;
    box-shadow: 0 0 26px rgba(0, 255, 153, .12) !important;
    filter: none !important;
  }

  #training .delivery-card-copy {
    grid-column: 2 !important;
    padding: 0 22px 0 0 !important;
    min-width: 0 !important;
  }

  #training .delivery-card-copy h3,
  #training .delivery-track article h3 {
    margin: 0 0 10px !important;
    color: var(--tech-title) !important;
    font-size: clamp(24px, 1.6vw, 32px) !important;
    line-height: 1.18 !important;
  }

  #training .delivery-card-copy p,
  #training .delivery-track article p {
    color: var(--tech-body) !important;
    font-size: 15px !important;
    line-height: 1.58 !important;
    max-width: 980px !important;
  }

  #training .delivery-tags,
  #training .delivery-tags-blue,
  #training .delivery-tags-orange {
    margin-top: 14px !important;
    gap: 10px !important;
    max-width: calc(100% - 12px) !important;
  }

  #training .delivery-tags em,
  #training .delivery-tags-blue em,
  #training .delivery-tags-orange em {
    border-color: rgba(0, 255, 153, .32) !important;
    background: rgba(0, 255, 153, .16) !important;
    color: rgba(222, 255, 242, .94) !important;
  }

  #training .delivery-card-cta {
    grid-column: 3 !important;
    right: 24px !important;
    bottom: 50% !important;
  }
}

/* FINAL 2026-06-16: training section uses three clearer delivery cards. */
@media (min-width: 921px) {
  #training .delivery-stage {
    grid-template-columns: minmax(360px, 520px) minmax(720px, 1fr) !important;
    gap: clamp(56px, 6vw, 92px) !important;
  }

  #training .delivery-track {
    max-width: 920px !important;
    gap: 30px !important;
  }

  #training .delivery-track::before {
    left: 61px !important;
    top: 100px !important;
    bottom: 100px !important;
    opacity: .72 !important;
  }

  #training .delivery-track article,
  #training .delivery-track article:nth-child(1),
  #training .delivery-track article:nth-child(2),
  #training .delivery-track article:nth-child(3),
  #training .delivery-track article:nth-child(4) {
    min-height: 176px !important;
    grid-template-columns: 70px minmax(0, 1fr) 42px !important;
    gap: 26px !important;
    padding: 30px 34px !important;
    overflow: hidden !important;
  }

  #training .delivery-track > article > span {
    top: 24px !important;
    left: 34px !important;
    font-size: 17px !important;
  }

  #training .delivery-icon,
  #training .delivery-track article:nth-child(2) .delivery-icon,
  #training .delivery-track article:nth-child(3) .delivery-icon,
  #training .delivery-track article:nth-child(4) .delivery-icon {
    width: 60px !important;
    height: 60px !important;
    margin: 22px 0 0 !important;
    padding: 15px !important;
    background: rgba(0, 255, 153, .12) !important;
    border: 1px solid rgba(0, 255, 153, .22) !important;
    color: #00ff99 !important;
    stroke: #00ff99 !important;
  }

  #training .delivery-card-copy {
    padding: 0 18px 0 0 !important;
  }

  #training .delivery-card-copy h3,
  #training .delivery-track article h3 {
    font-size: clamp(25px, 1.7vw, 34px) !important;
    line-height: 1.18 !important;
    margin-bottom: 10px !important;
  }

  #training .delivery-card-copy p,
  #training .delivery-track article p {
    max-width: 760px !important;
    font-size: 15px !important;
    line-height: 1.6 !important;
  }

  #training .delivery-tags,
  #training .delivery-tags-blue,
  #training .delivery-tags-orange {
    margin-top: 14px !important;
    gap: 10px !important;
  }

  #training .delivery-tags em,
  #training .delivery-tags-blue em,
  #training .delivery-tags-orange em {
    min-height: 30px !important;
    padding: 0 14px !important;
    background: rgba(0, 255, 153, .16) !important;
    border: 1px solid rgba(0, 255, 153, .30) !important;
    color: rgba(222, 255, 242, .96) !important;
    font-size: 14px !important;
  }
}

/* FINAL 2026-06-16: keep scenario icons from covering card titles. */
@media (min-width: 1181px) {
  #scenarios .solution-card,
  #scenarios .solution-card:first-child,
  #scenarios .solution-card:nth-child(2),
  #scenarios .solution-card:nth-child(3),
  #scenarios .solution-card:nth-child(4),
  #scenarios .solution-card:nth-child(5),
  #scenarios .solution-card:nth-child(6) {
    padding: 26px 28px 72px !important;
  }

  #scenarios .solution-card .solution-visual,
  #scenarios .solution-card:first-child .solution-visual,
  #scenarios .solution-card:not(:first-child) .solution-visual {
    position: static !important;
    order: 0 !important;
    align-self: flex-end !important;
    width: 52px !important;
    height: 52px !important;
    margin: -2px 0 14px auto !important;
    opacity: .88 !important;
  }

  #scenarios .solution-card .solution-icon,
  #scenarios .solution-card:first-child .solution-icon,
  #scenarios .solution-card:not(:first-child) .solution-icon {
    width: 52px !important;
    height: 52px !important;
    min-width: 52px !important;
    min-height: 52px !important;
    max-width: 52px !important;
    max-height: 52px !important;
  }

  #scenarios .solution-card .solution-content,
  #scenarios .solution-card:first-child .solution-content,
  #scenarios .solution-card:not(:first-child) .solution-content {
    order: 1 !important;
    min-height: 0 !important;
    flex: 1 1 auto !important;
  }

  #scenarios .solution-card span {
    position: absolute !important;
    top: 28px !important;
    left: 28px !important;
    margin: 0 !important;
  }

  #scenarios .solution-card h3,
  #scenarios .solution-card:nth-child(6) h3 {
    width: 100% !important;
    max-width: 100% !important;
    margin-top: 0 !important;
    font-size: clamp(22px, 1.28vw, 27px) !important;
    line-height: 1.22 !important;
    word-break: keep-all !important;
    overflow-wrap: normal !important;
    line-break: strict !important;
  }

  #scenarios .solution-card p {
    margin-top: 4px !important;
  }
}

/* FINAL 2026-06-16: restore breathing room at the top of the three delivery cards. */
@media (min-width: 921px) {
  #training .delivery-track article,
  #training .delivery-track article:nth-child(1),
  #training .delivery-track article:nth-child(2),
  #training .delivery-track article:nth-child(3),
  #training .delivery-track article:nth-child(4) {
    min-height: 196px !important;
    padding: 42px 36px 30px !important;
    align-items: start !important;
  }

  #training .delivery-track > article > span {
    top: 30px !important;
    left: 36px !important;
  }

  #training .delivery-icon,
  #training .delivery-track article:nth-child(2) .delivery-icon,
  #training .delivery-track article:nth-child(3) .delivery-icon,
  #training .delivery-track article:nth-child(4) .delivery-icon {
    margin: 30px 0 0 !important;
  }

  #training .delivery-card-copy {
    padding-top: 8px !important;
  }

  #training .delivery-card-copy h3,
  #training .delivery-track article h3 {
    margin-top: 0 !important;
  }
}

/* FINAL 2026-06-16: first pass for consistent screen width and tighter section rhythm. */
@media (min-width: 1181px) {
  #services .infrastructure-section,
  #capability .capability-stage,
  #training .delivery-stage,
  #resources .resource-stage,
  #about .about-stage {
    width: min(1328px, calc(100vw - 112px)) !important;
    max-width: 1328px !important;
    margin-inline: auto !important;
  }

  #scenarios.ai-solutions {
    width: min(1328px, calc(100vw - 112px)) !important;
    max-width: 1328px !important;
    margin-inline: auto !important;
  }

  #capability.core-tech-section {
    min-height: auto !important;
    padding-bottom: clamp(46px, 5.5vh, 68px) !important;
  }

  #training.premium-delivery {
    min-height: auto !important;
    padding-top: clamp(54px, 6vh, 74px) !important;
    padding-bottom: clamp(58px, 6vh, 78px) !important;
  }

  #resources.premium-resources,
  #about.premium-about {
    min-height: auto !important;
    padding-top: clamp(58px, 6vh, 78px) !important;
    padding-bottom: clamp(58px, 6vh, 78px) !important;
  }
}

/* FINAL 2026-06-16: simplify delivery left rail and CTA hierarchy. */
#training .delivery-active-note,
#training .stage-head::before,
#training .stage-head::after,
#training .delivery-track article.is-selected::after,
#training .delivery-track article.is-selected h3::after {
  display: none !important;
  content: none !important;
}

#training .stage-head {
  justify-content: center !important;
}

#training .stage-head p {
  margin-bottom: 28px !important;
}

#training .delivery-actions {
  margin-top: 0 !important;
  gap: 14px !important;
}

#training .delivery-actions a {
  min-height: 56px !important;
  border-radius: 14px !important;
  transition: transform .24s ease, border-color .24s ease, background .24s ease, box-shadow .24s ease !important;
}

#training .delivery-actions a:first-child {
  border-color: rgba(0, 255, 153, .70) !important;
  background: linear-gradient(135deg, rgba(0, 255, 153, .95), rgba(35, 216, 255, .86)) !important;
  color: #00140f !important;
  box-shadow: 0 18px 42px rgba(0, 255, 153, .18) !important;
}

#training .delivery-actions a:last-child {
  border-color: rgba(0, 255, 153, .28) !important;
  background: rgba(6, 18, 31, .42) !important;
  color: rgba(210, 255, 241, .88) !important;
  box-shadow: inset 0 0 0 1px rgba(0, 255, 153, .08) !important;
}

#training .delivery-actions a:hover {
  transform: translateY(-2px) !important;
}

/* FINAL 2026-06-16: align core-tech and delivery width, restore delivery headline hierarchy. */
@media (min-width: 1181px) {
  #capability .capability-stage,
  #training .delivery-stage {
    width: min(1328px, calc(100vw - 112px)) !important;
    max-width: 1328px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
  }

  #training .stage-head h2,
  #training .stage-head h2 span {
    color: #fff !important;
    font-size: 52px !important;
    line-height: 1.12 !important;
    letter-spacing: 0 !important;
  }

  #training .stage-head h2 span {
    font-weight: 800 !important;
  }
}

@media (min-width: 921px) and (max-width: 1500px) {
  #training .stage-head h2,
  #training .stage-head h2 span {
    font-size: 34px !important;
    line-height: 1.18 !important;
  }
}

/* FINAL 2026-06-17: lock core-tech and delivery right edges to the same visual width. */
@media (min-width: 1181px) {
  #capability .capability-stage,
  #training .delivery-stage {
    width: min(1328px, calc(100vw - 112px)) !important;
    max-width: 1328px !important;
    margin-inline: auto !important;
    display: grid !important;
    grid-template-columns: minmax(360px, 460px) minmax(0, 1fr) !important;
    column-gap: 56px !important;
    overflow: visible !important;
  }

  #capability .tech-console.core-card-grid,
  #training .delivery-track {
    width: min(100%, 812px) !important;
    max-width: 812px !important;
    justify-self: end !important;
    box-sizing: border-box !important;
  }

  #capability .capability-copy,
  #training .stage-head {
    max-width: 460px !important;
  }
}

@media (min-width: 1501px) {
  #capability .capability-stage,
  #training .delivery-stage {
    grid-template-columns: minmax(420px, 500px) minmax(0, 1fr) !important;
    column-gap: 64px !important;
  }

  #capability .tech-console.core-card-grid,
  #training .delivery-track {
    width: min(100%, 764px) !important;
    max-width: 764px !important;
  }
}

/* FINAL 2026-06-17: remove core-tech wrapper frame and prevent delivery cards from exceeding the shared edge. */
@media (min-width: 1181px) {
  #capability .tech-console.core-card-grid,
  #capability.core-tech-section .tech-console.core-card-grid {
    width: min(100%, 764px) !important;
    max-width: 764px !important;
    justify-self: end !important;
    padding: 0 !important;
    border: 0 !important;
    outline: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    overflow: visible !important;
  }

  #capability .tech-console.core-card-grid::before,
  #capability.core-tech-section .tech-console.core-card-grid::before {
    display: none !important;
    content: none !important;
  }

  #training .delivery-track {
    width: min(100%, 764px) !important;
    max-width: 764px !important;
    justify-self: end !important;
  }

  #training .delivery-track article,
  #training .delivery-track article.is-selected,
  #training .delivery-track article.is-selected:hover,
  #training .delivery-track article[aria-selected="true"] {
    scale: 1 !important;
    transform-origin: center center !important;
  }
}

/* FINAL 2026-06-17: rebuild developer resources as row modules with UI mockups. */
@media (min-width: 921px) {
  #resources.premium-resources {
    background:
      radial-gradient(circle at 20% 28%, rgba(0, 255, 153, .08), transparent 30%),
      linear-gradient(180deg, #04101e 0%, #020711 100%) !important;
  }

  #resources.premium-resources::before,
  #resources.premium-resources::after,
  #resources .resource-main::before,
  #resources .resource-main::after,
  #resources .resource-stage::before,
  #resources .resource-stage::after {
    display: none !important;
    content: none !important;
  }

  #resources .resource-stage {
    width: min(1328px, calc(100vw - 112px)) !important;
    max-width: 1328px !important;
    margin-inline: auto !important;
    display: block !important;
    padding: 0 !important;
  }

  #resources .resource-main {
    max-width: 760px !important;
    margin: 0 0 34px !important;
    min-height: 0 !important;
  }

  #resources .resource-main h2 {
    margin: 24px 0 18px !important;
    color: #fff !important;
    font-size: clamp(36px, 3.2vw, 54px) !important;
    line-height: 1.14 !important;
    letter-spacing: 0 !important;
  }

  #resources .resource-main > p {
    max-width: 680px !important;
    color: rgba(176, 195, 206, .92) !important;
    font-size: 17px !important;
    line-height: 1.85 !important;
  }

  #resources .resource-tabs {
    display: none !important;
  }

  #resources .resource-panels {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 24px !important;
    width: 100% !important;
    max-width: none !important;
    min-height: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  #resources .resource-panels article,
  #resources .resource-panels article.is-active,
  #resources .resource-panels article:nth-child(1),
  #resources .resource-panels article:nth-child(2),
  #resources .resource-panels article:nth-child(3) {
    position: relative !important;
    display: grid !important;
    grid-template-columns: minmax(0, .95fr) minmax(420px, 1.05fr) !important;
    align-items: stretch !important;
    gap: 28px !important;
    width: 100% !important;
    min-height: 260px !important;
    height: auto !important;
    padding: 26px !important;
    overflow: hidden !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    border: 1px solid rgba(35, 216, 255, .18) !important;
    border-radius: 18px !important;
    background:
      linear-gradient(135deg, rgba(8, 24, 42, .86), rgba(4, 20, 28, .72)) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .045), 0 20px 58px rgba(0, 0, 0, .22) !important;
  }

  #resources .resource-panels article::before,
  #resources .resource-panels article::after {
    display: none !important;
    content: none !important;
  }

  #resources .resource-icon {
    display: none !important;
  }

  #resources .resource-copy-block {
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center !important;
    padding: 8px 8px 8px 10px !important;
  }

  #resources .resource-copy-block > span {
    display: inline-flex !important;
    margin: 0 0 18px !important;
    color: rgba(0, 255, 153, .72) !important;
    font-size: 15px !important;
    line-height: 1 !important;
    letter-spacing: .18em !important;
  }

  #resources .resource-copy-block h3,
  #resources .resource-panels h3 {
    margin: 0 0 14px !important;
    color: #fff !important;
    font-size: clamp(25px, 2vw, 34px) !important;
    line-height: 1.2 !important;
    font-weight: 760 !important;
    letter-spacing: 0 !important;
  }

  #resources .resource-copy-block p,
  #resources .resource-panels p {
    max-width: 520px !important;
    margin: 0 !important;
    color: rgba(176, 176, 176, .94) !important;
    font-size: 16px !important;
    line-height: 1.75 !important;
    font-weight: 500 !important;
  }

  #resources .resource-feature-list {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    margin: 22px 0 24px !important;
  }

  #resources .resource-feature-list em {
    display: inline-flex !important;
    align-items: center !important;
    min-height: 30px !important;
    padding: 0 13px !important;
    border: 1px solid rgba(0, 255, 153, .30) !important;
    border-radius: 999px !important;
    background: rgba(0, 255, 153, .16) !important;
    color: rgba(224, 255, 244, .96) !important;
    font-size: 13px !important;
    font-style: normal !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
  }

  #resources .resource-card-cta {
    position: static !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    height: 42px !important;
    min-width: 132px !important;
    padding: 0 18px !important;
    border: 1px solid rgba(0, 255, 153, .38) !important;
    border-radius: 999px !important;
    background: rgba(0, 255, 153, .12) !important;
    color: #dffff2 !important;
    text-decoration: none !important;
    font-size: 14px !important;
    font-weight: 760 !important;
    line-height: 1 !important;
  }

  #resources .resource-ui-mockup {
    min-width: 0 !important;
    min-height: 208px !important;
    border: 1px solid rgba(35, 216, 255, .18) !important;
    border-radius: 14px !important;
    background:
      radial-gradient(circle at 65% 35%, rgba(0, 255, 153, .18), transparent 42%),
      linear-gradient(135deg, rgba(5, 18, 32, .96), rgba(6, 34, 40, .84)) !important;
    box-shadow: inset 0 0 38px rgba(35, 216, 255, .06), 0 20px 52px rgba(0, 0, 0, .22) !important;
    overflow: hidden !important;
  }

  #resources .mockup-window {
    height: 100% !important;
    padding: 16px !important;
  }

  #resources .mockup-topbar {
    height: 28px !important;
    display: flex !important;
    align-items: center !important;
    gap: 7px !important;
    color: rgba(224, 255, 244, .78) !important;
    font-size: 12px !important;
  }

  #resources .mockup-topbar span {
    width: 8px !important;
    height: 8px !important;
    border-radius: 50% !important;
    background: rgba(0, 255, 153, .78) !important;
  }

  #resources .mockup-topbar strong {
    margin-left: 8px !important;
    font-weight: 700 !important;
  }

  #resources .mockup-dashboard {
    height: calc(100% - 28px) !important;
    display: grid !important;
    grid-template-columns: 54px 1fr !important;
    gap: 14px !important;
  }

  #resources .mockup-sidebar,
  #resources .mockup-main,
  #resources .mockup-flow,
  #resources .case-board {
    height: 100% !important;
  }

  #resources .mockup-sidebar {
    display: grid !important;
    gap: 10px !important;
    align-content: start !important;
    padding: 12px !important;
    border-radius: 12px !important;
    background: rgba(255, 255, 255, .045) !important;
  }

  #resources .mockup-sidebar i,
  #resources .mockup-table i {
    display: block !important;
    height: 12px !important;
    border-radius: 999px !important;
    background: rgba(176, 195, 206, .24) !important;
  }

  #resources .mockup-main {
    display: grid !important;
    grid-template-rows: 42px 1fr 48px !important;
    gap: 12px !important;
  }

  #resources .mockup-stats {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 10px !important;
  }

  #resources .mockup-stats b {
    display: flex !important;
    align-items: center !important;
    padding-left: 14px !important;
    border-radius: 10px !important;
    background: rgba(0, 255, 153, .12) !important;
    color: #fff !important;
    font-size: 16px !important;
  }

  #resources .mockup-chart {
    display: flex !important;
    align-items: end !important;
    gap: 12px !important;
    padding: 14px !important;
    border-radius: 12px !important;
    background: rgba(255, 255, 255, .045) !important;
  }

  #resources .mockup-chart span {
    flex: 1 !important;
    border-radius: 999px 999px 0 0 !important;
    background: linear-gradient(180deg, #00ff99, rgba(35, 216, 255, .50)) !important;
  }

  #resources .mockup-chart span:nth-child(1) { height: 38% !important; }
  #resources .mockup-chart span:nth-child(2) { height: 64% !important; }
  #resources .mockup-chart span:nth-child(3) { height: 48% !important; }
  #resources .mockup-chart span:nth-child(4) { height: 78% !important; }

  #resources .mockup-table {
    display: grid !important;
    gap: 8px !important;
  }

  #resources .mockup-flow {
    position: relative !important;
    display: grid !important;
    align-content: center !important;
    justify-items: center !important;
    gap: 18px !important;
    padding: 24px !important;
  }

  #resources .flow-node,
  #resources .flow-row span {
    border-radius: 12px !important;
    background: rgba(255, 255, 255, .88) !important;
    color: #12202b !important;
    font-size: 14px !important;
    font-weight: 760 !important;
    box-shadow: 0 10px 28px rgba(0, 0, 0, .16) !important;
  }

  #resources .flow-node {
    padding: 14px 26px !important;
  }

  #resources .flow-node-main {
    background: linear-gradient(135deg, rgba(0, 255, 153, .95), rgba(35, 216, 255, .85)) !important;
  }

  #resources .flow-row {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 12px !important;
    width: 100% !important;
  }

  #resources .flow-row span {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 48px !important;
  }

  #resources .case-board {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 14px !important;
    padding: 22px !important;
    align-items: stretch !important;
  }

  #resources .case-card {
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    min-height: 160px !important;
    padding: 18px !important;
    border: 1px solid rgba(0, 255, 153, .18) !important;
    border-radius: 14px !important;
    background: rgba(4, 20, 32, .76) !important;
  }

  #resources .case-card strong {
    color: #fff !important;
    font-size: 18px !important;
  }

  #resources .case-card span {
    color: rgba(176, 195, 206, .82) !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
  }
}

@media (max-width: 920px) {
  #resources .resource-tabs {
    display: none !important;
  }

  #resources .resource-panels {
    display: grid !important;
    gap: 18px !important;
  }

  #resources .resource-panels article,
  #resources .resource-panels article.is-active {
    display: grid !important;
    gap: 18px !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
}

/* FINAL 2026-06-17: clean Baidu-cloud-style resources showcase. */
body #resources.premium-resources {
  min-height: auto !important;
  padding: clamp(72px, 7vw, 108px) 0 !important;
  background:
    radial-gradient(circle at 80% 18%, rgba(35, 216, 255, .10), transparent 34%),
    radial-gradient(circle at 18% 52%, rgba(0, 255, 153, .08), transparent 36%),
    linear-gradient(180deg, #04101e 0%, #020711 100%) !important;
  overflow: hidden !important;
}

body #resources.premium-resources::before,
body #resources.premium-resources::after,
body #resources .resource-stage::before,
body #resources .resource-stage::after,
body #resources .resource-main::before,
body #resources .resource-main::after,
body #resources .resource-panels::before,
body #resources .resource-panels::after,
body #resources .resource-panels article::before,
body #resources .resource-panels article::after {
  display: none !important;
  content: none !important;
}

body #resources .resource-stage,
body #resources.premium-resources .resource-stage {
  width: min(1328px, calc(100vw - 112px)) !important;
  max-width: 1328px !important;
  min-height: 0 !important;
  height: auto !important;
  margin: 0 auto !important;
  padding: 0 !important;
  display: block !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
}

body #resources .resource-main {
  width: 100% !important;
  max-width: 900px !important;
  min-height: 0 !important;
  height: auto !important;
  margin: 0 0 38px !important;
  padding: 0 !important;
  display: block !important;
  text-align: left !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body #resources .resource-main .section-mark {
  margin: 0 0 24px !important;
}

body #resources .resource-main h2 {
  max-width: 780px !important;
  margin: 0 0 18px !important;
  color: #fff !important;
  font-size: clamp(38px, 3.6vw, 58px) !important;
  line-height: 1.12 !important;
  font-weight: 780 !important;
  letter-spacing: 0 !important;
}

body #resources .resource-main > p {
  max-width: 720px !important;
  margin: 0 !important;
  color: rgba(176, 195, 206, .92) !important;
  font-size: 17px !important;
  line-height: 1.8 !important;
}

body #resources .resource-tabs {
  display: none !important;
}

body #resources .resource-panels,
body #resources.premium-resources .resource-panels {
  width: 100% !important;
  max-width: 1180px !important;
  min-height: 0 !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 22px !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
}

body #resources .resource-panels article,
body #resources .resource-panels article.is-active,
body #resources .resource-panels article:nth-child(1),
body #resources .resource-panels article:nth-child(2),
body #resources .resource-panels article:nth-child(3),
body #resources.premium-resources .resource-panels article,
body #resources.premium-resources .resource-panels article.is-active,
body #resources.premium-resources .resource-panels article:nth-child(1),
body #resources.premium-resources .resource-panels article:nth-child(2),
body #resources.premium-resources .resource-panels article:nth-child(3) {
  width: 100% !important;
  max-width: none !important;
  min-height: 280px !important;
  height: auto !important;
  margin: 0 !important;
  padding: 30px !important;
  display: grid !important;
  grid-template-columns: minmax(0, .86fr) minmax(420px, 1.14fr) !important;
  gap: 30px !important;
  align-items: stretch !important;
  position: relative !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  border: 1px solid rgba(55, 121, 255, .20) !important;
  border-radius: 14px !important;
  background:
    linear-gradient(90deg, rgba(8, 22, 38, .96), rgba(7, 30, 45, .76)) !important;
  box-shadow: 0 22px 54px rgba(0, 0, 0, .20), inset 0 1px 0 rgba(255, 255, 255, .045) !important;
  overflow: hidden !important;
}

body #resources .resource-panels article:hover {
  border-color: rgba(0, 255, 153, .45) !important;
  box-shadow: 0 24px 62px rgba(0, 0, 0, .26), 0 0 32px rgba(0, 255, 153, .08) !important;
}

body #resources .resource-copy-block {
  min-width: 0 !important;
  height: 100% !important;
  padding: 6px 0 6px 4px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: flex-start !important;
  text-align: left !important;
}

body #resources .resource-copy-block > span {
  margin: 0 0 18px !important;
  color: rgba(0, 255, 153, .70) !important;
  font-size: 15px !important;
  line-height: 1 !important;
  letter-spacing: .18em !important;
}

body #resources .resource-copy-block h3,
body #resources .resource-panels h3 {
  max-width: 100% !important;
  margin: 0 0 14px !important;
  color: #fff !important;
  font-size: clamp(26px, 2vw, 34px) !important;
  line-height: 1.18 !important;
  font-weight: 780 !important;
  letter-spacing: 0 !important;
  word-break: keep-all !important;
}

body #resources .resource-copy-block p,
body #resources .resource-panels p {
  max-width: 500px !important;
  margin: 0 !important;
  color: rgba(176, 195, 206, .88) !important;
  font-size: 16px !important;
  line-height: 1.75 !important;
}

body #resources .resource-feature-list {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  margin: 22px 0 24px !important;
}

body #resources .resource-feature-list em {
  min-height: 30px !important;
  padding: 0 13px !important;
  display: inline-flex !important;
  align-items: center !important;
  border: 1px solid rgba(0, 255, 153, .30) !important;
  border-radius: 999px !important;
  background: rgba(0, 255, 153, .14) !important;
  color: rgba(226, 255, 245, .96) !important;
  font-size: 13px !important;
  font-style: normal !important;
  font-weight: 720 !important;
  white-space: nowrap !important;
}

body #resources .resource-card-cta {
  position: static !important;
  width: auto !important;
  min-width: 128px !important;
  height: 42px !important;
  padding: 0 18px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1px solid rgba(0, 255, 153, .40) !important;
  border-radius: 999px !important;
  background: rgba(0, 255, 153, .12) !important;
  color: #e3fff5 !important;
  text-decoration: none !important;
  font-size: 14px !important;
  font-weight: 760 !important;
  line-height: 1 !important;
}

body #resources .resource-icon {
  display: none !important;
}

body #resources .resource-ui-mockup {
  min-width: 0 !important;
  min-height: 220px !important;
  height: 100% !important;
  border: 1px solid rgba(35, 216, 255, .20) !important;
  border-radius: 12px !important;
  background:
    radial-gradient(circle at 76% 26%, rgba(0, 255, 153, .20), transparent 34%),
    linear-gradient(135deg, rgba(239, 247, 255, .96), rgba(206, 229, 255, .80)) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .40), 0 18px 46px rgba(0, 0, 0, .20) !important;
  overflow: hidden !important;
}

body #resources .mockup-window,
body #resources .mockup-flow,
body #resources .case-board {
  height: 100% !important;
}

body #resources .mockup-window {
  padding: 18px !important;
}

body #resources .mockup-topbar {
  height: 30px !important;
  display: flex !important;
  align-items: center !important;
  gap: 7px !important;
  color: rgba(15, 32, 54, .72) !important;
  font-size: 12px !important;
}

body #resources .mockup-topbar span {
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
  background: #3779ff !important;
}

body #resources .mockup-topbar strong {
  margin-left: 8px !important;
  color: rgba(15, 32, 54, .78) !important;
  font-weight: 760 !important;
}

body #resources .mockup-dashboard {
  height: calc(100% - 30px) !important;
  display: grid !important;
  grid-template-columns: 58px 1fr !important;
  gap: 14px !important;
}

body #resources .mockup-sidebar {
  display: grid !important;
  gap: 10px !important;
  align-content: start !important;
  padding: 12px !important;
  border-radius: 12px !important;
  background: rgba(15, 32, 54, .08) !important;
}

body #resources .mockup-sidebar i,
body #resources .mockup-table i {
  display: block !important;
  height: 12px !important;
  border-radius: 999px !important;
  background: rgba(15, 32, 54, .18) !important;
}

body #resources .mockup-main {
  display: grid !important;
  grid-template-rows: 42px 1fr 48px !important;
  gap: 12px !important;
}

body #resources .mockup-stats {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 10px !important;
}

body #resources .mockup-stats b {
  display: flex !important;
  align-items: center !important;
  padding-left: 14px !important;
  border-radius: 10px !important;
  background: rgba(55, 121, 255, .12) !important;
  color: #0f2036 !important;
  font-size: 16px !important;
}

body #resources .mockup-chart {
  display: flex !important;
  align-items: end !important;
  gap: 12px !important;
  padding: 14px !important;
  border-radius: 12px !important;
  background: rgba(15, 32, 54, .08) !important;
}

body #resources .mockup-chart span {
  flex: 1 !important;
  border-radius: 999px 999px 0 0 !important;
  background: linear-gradient(180deg, #3779ff, #00d59a) !important;
}

body #resources .mockup-chart span:nth-child(1) { height: 38% !important; }
body #resources .mockup-chart span:nth-child(2) { height: 64% !important; }
body #resources .mockup-chart span:nth-child(3) { height: 48% !important; }
body #resources .mockup-chart span:nth-child(4) { height: 78% !important; }

body #resources .mockup-table {
  display: grid !important;
  gap: 8px !important;
}

body #resources .mockup-flow {
  display: grid !important;
  align-content: center !important;
  justify-items: center !important;
  gap: 18px !important;
  padding: 24px !important;
}

body #resources .flow-row {
  width: 100% !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 12px !important;
}

body #resources .flow-node,
body #resources .flow-row span {
  min-height: 46px !important;
  padding: 0 14px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 12px !important;
  background: rgba(255, 255, 255, .92) !important;
  color: #0f2036 !important;
  font-size: 14px !important;
  font-weight: 760 !important;
  box-shadow: 0 10px 24px rgba(15, 32, 54, .12) !important;
}

body #resources .flow-node-main {
  background: linear-gradient(135deg, #3779ff, #00d59a) !important;
  color: #fff !important;
}

body #resources .case-board {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 14px !important;
  padding: 22px !important;
}

body #resources .case-card {
  min-height: 160px !important;
  padding: 18px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  border: 1px solid rgba(55, 121, 255, .16) !important;
  border-radius: 14px !important;
  background: rgba(255, 255, 255, .78) !important;
}

body #resources .case-card strong {
  color: #0f2036 !important;
  font-size: 18px !important;
}

body #resources .case-card span {
  color: rgba(15, 32, 54, .66) !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
}

@media (max-width: 1180px) {
  body #resources .resource-panels article,
  body #resources .resource-panels article.is-active,
  body #resources.premium-resources .resource-panels article,
  body #resources.premium-resources .resource-panels article.is-active {
    grid-template-columns: 1fr !important;
  }

  body #resources .resource-ui-mockup {
    min-height: 240px !important;
  }
}

/* FINAL 2026-06-17: shorten delivery cards so their borders do not exceed other sections. */
@media (min-width: 1181px) {
  body #training .delivery-stage {
    grid-template-columns: minmax(420px, 500px) minmax(0, 1fr) !important;
    column-gap: 64px !important;
  }

  body #training .delivery-track {
    width: min(100%, 720px) !important;
    max-width: 720px !important;
    justify-self: end !important;
    margin-left: auto !important;
    margin-right: 0 !important;
  }

  body #training .delivery-track article,
  body #training .delivery-track article.is-selected,
  body #training .delivery-track article[aria-selected="true"] {
    width: 100% !important;
    max-width: 720px !important;
    box-sizing: border-box !important;
  }
}

/* FINAL 2026-06-17: resource showcase active step, consistent spacing and tactile mockups. */
body #resources .resource-panels article,
body #resources.premium-resources .resource-panels article {
  gap: 32px !important;
  padding: 32px !important;
  transition:
    border-color .26s ease,
    box-shadow .26s ease,
    transform .26s ease,
    background .26s ease !important;
}

body #resources .resource-panels article:hover,
body #resources .resource-panels article:focus-within,
body #resources .resource-panels article.is-active {
  border-color: rgba(0, 255, 153, .46) !important;
}

body #resources .resource-copy-block {
  padding: 0 !important;
}

body #resources .resource-copy-block > span {
  position: relative !important;
  min-height: 28px !important;
  margin: 0 0 22px !important;
  padding-left: 22px !important;
  display: inline-flex !important;
  align-items: center !important;
  color: rgba(0, 255, 153, .86) !important;
  font-weight: 780 !important;
}

body #resources .resource-copy-block > span::before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  top: 50% !important;
  width: 8px !important;
  height: 8px !important;
  border-radius: 999px !important;
  background: rgba(0, 255, 153, .72) !important;
  transform: translateY(-50%) !important;
  box-shadow: 0 0 14px rgba(0, 255, 153, .38) !important;
}

body #resources .resource-copy-block > span::after {
  content: "" !important;
  position: absolute !important;
  left: 22px !important;
  bottom: -8px !important;
  width: 0 !important;
  height: 2px !important;
  border-radius: 999px !important;
  background: linear-gradient(90deg, #00ff99, rgba(35, 216, 255, .72)) !important;
  transition: width .26s ease !important;
}

body #resources .resource-panels article.is-active .resource-copy-block > span::after,
body #resources .resource-panels article:hover .resource-copy-block > span::after,
body #resources .resource-panels article:focus-within .resource-copy-block > span::after {
  width: 46px !important;
}

body #resources .resource-copy-block h3 {
  margin-bottom: 16px !important;
}

body #resources .resource-copy-block p {
  max-width: 500px !important;
}

body #resources .resource-feature-list {
  margin: 24px 0 24px !important;
}

body #resources .resource-ui-mockup {
  padding: 0 !important;
  transition:
    transform .26s ease,
    box-shadow .26s ease,
    border-color .26s ease !important;
}

body #resources .resource-panels article:hover .resource-ui-mockup,
body #resources .resource-panels article:focus-within .resource-ui-mockup {
  transform: translateY(-2px) !important;
  border-color: rgba(55, 121, 255, .32) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .48),
    0 22px 54px rgba(0, 0, 0, .24),
    0 0 28px rgba(55, 121, 255, .10) !important;
}

body #resources .mockup-stats b,
body #resources .mockup-sidebar i,
body #resources .mockup-table i,
body #resources .mockup-chart span,
body #resources .flow-node,
body #resources .flow-row span,
body #resources .case-card {
  transition:
    transform .22s ease,
    box-shadow .22s ease,
    background .22s ease,
    border-color .22s ease !important;
}

body #resources .mockup-stats b:hover,
body #resources .flow-node:hover,
body #resources .flow-row span:hover,
body #resources .case-card:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 14px 30px rgba(15, 32, 54, .18) !important;
}

body #resources .mockup-chart span:hover,
body #resources .mockup-sidebar i:hover,
body #resources .mockup-table i:hover {
  transform: translateY(-2px) !important;
}

@media (min-width: 1181px) {
  body #resources .resource-panels article,
  body #resources.premium-resources .resource-panels article {
    grid-template-columns: minmax(0, .86fr) minmax(420px, 1.14fr) !important;
    gap: 32px !important;
    padding: 32px !important;
  }
}

/* FINAL 2026-06-17: developer center layout based on uploaded reference. */
@media (min-width: 1181px) {
  body #resources.premium-resources {
    padding: clamp(78px, 7vw, 112px) 0 !important;
    background:
      radial-gradient(circle at 78% 10%, rgba(35, 216, 255, .12), transparent 32%),
      radial-gradient(circle at 34% 42%, rgba(0, 255, 153, .10), transparent 36%),
      linear-gradient(180deg, #03111c 0%, #04101e 50%, #020711 100%) !important;
  }

  body #resources .resource-stage,
  body #resources.premium-resources .resource-stage {
    width: min(1328px, calc(100vw - 112px)) !important;
    max-width: 1328px !important;
    display: grid !important;
    grid-template-columns: minmax(440px, .92fr) minmax(560px, 1.08fr) !important;
    grid-template-areas:
      "intro hero"
      "template template"
      "cases cases" !important;
    gap: 30px !important;
    align-items: stretch !important;
  }

  body #resources .resource-main {
    grid-area: intro !important;
    min-height: 360px !important;
    margin: 0 !important;
    padding: 10px 20px 10px 0 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
  }

  body #resources .resource-main .section-mark {
    width: max-content !important;
    margin: 0 0 24px !important;
  }

  body #resources .resource-main h2 {
    max-width: 600px !important;
    margin: 0 0 24px !important;
    font-size: clamp(42px, 4vw, 66px) !important;
    line-height: 1.12 !important;
  }

  body #resources .resource-main > p {
    max-width: 600px !important;
    font-size: 18px !important;
    line-height: 1.85 !important;
  }

  body #resources .resource-main::after {
    content: "⌄" !important;
    display: inline-flex !important;
    width: 34px !important;
    height: 34px !important;
    margin-top: 48px !important;
    align-items: center !important;
    justify-content: center !important;
    color: rgba(0, 255, 153, .70) !important;
    font-size: 34px !important;
    line-height: 1 !important;
  }

  body #resources .resource-panels,
  body #resources.premium-resources .resource-panels {
    display: contents !important;
  }

  body #resources .resource-panels article,
  body #resources .resource-panels article.is-active,
  body #resources .resource-panels article:nth-child(1),
  body #resources .resource-panels article:nth-child(2),
  body #resources .resource-panels article:nth-child(3),
  body #resources.premium-resources .resource-panels article,
  body #resources.premium-resources .resource-panels article.is-active,
  body #resources.premium-resources .resource-panels article:nth-child(1),
  body #resources.premium-resources .resource-panels article:nth-child(2),
  body #resources.premium-resources .resource-panels article:nth-child(3) {
    min-height: 260px !important;
    padding: 30px !important;
    gap: 34px !important;
    border: 1px solid rgba(0, 255, 153, .42) !important;
    border-radius: 18px !important;
    background:
      radial-gradient(circle at 24% 42%, rgba(0, 255, 153, .12), transparent 32%),
      linear-gradient(135deg, rgba(7, 27, 37, .92), rgba(5, 14, 28, .92)) !important;
    box-shadow:
      inset 0 0 0 1px rgba(255, 255, 255, .035),
      0 0 28px rgba(0, 255, 153, .10),
      0 26px 72px rgba(0, 0, 0, .28) !important;
  }

  body #resources .resource-panels article:nth-child(1) {
    grid-area: hero !important;
    min-height: 360px !important;
    grid-template-columns: 1fr !important;
    padding: 0 !important;
    overflow: visible !important;
    border-color: rgba(0, 255, 153, .34) !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  body #resources .resource-panels article:nth-child(1) .resource-copy-block {
    display: none !important;
  }

  body #resources .resource-panels article:nth-child(1) .resource-ui-mockup {
    min-height: 360px !important;
    height: 100% !important;
    border-radius: 16px !important;
    border-color: rgba(0, 255, 153, .55) !important;
    background:
      radial-gradient(circle at 68% 28%, rgba(0, 255, 153, .22), transparent 38%),
      linear-gradient(135deg, rgba(5, 18, 32, .98), rgba(7, 35, 42, .94)) !important;
    box-shadow:
      0 0 0 1px rgba(0, 255, 153, .20),
      0 0 34px rgba(0, 255, 153, .18),
      0 26px 72px rgba(0, 0, 0, .30) !important;
  }

  body #resources .resource-panels article:nth-child(2) {
    grid-area: template !important;
    grid-template-columns: minmax(500px, 1.05fr) minmax(420px, .95fr) !important;
    align-items: center !important;
  }

  body #resources .resource-panels article:nth-child(2) .resource-ui-mockup {
    order: 1 !important;
  }

  body #resources .resource-panels article:nth-child(2) .resource-copy-block {
    order: 2 !important;
    padding-right: 18px !important;
  }

  body #resources .resource-panels article:nth-child(3) {
    grid-area: cases !important;
    grid-template-columns: minmax(420px, .92fr) minmax(520px, 1.08fr) !important;
    align-items: center !important;
  }

  body #resources .resource-copy-block h3 {
    font-size: clamp(28px, 2.4vw, 42px) !important;
  }

  body #resources .resource-copy-block p {
    max-width: 560px !important;
    font-size: 17px !important;
    line-height: 1.8 !important;
  }

  body #resources .resource-ui-mockup {
    min-height: 230px !important;
    border-color: rgba(0, 255, 153, .28) !important;
    background:
      radial-gradient(circle at 52% 36%, rgba(0, 255, 153, .20), transparent 36%),
      linear-gradient(135deg, rgba(5, 28, 35, .96), rgba(3, 15, 28, .94)) !important;
  }

  body #resources .mockup-window {
    padding: 20px !important;
  }

  body #resources .mockup-topbar,
  body #resources .mockup-topbar strong {
    color: rgba(225, 255, 245, .74) !important;
  }

  body #resources .mockup-topbar span {
    background: rgba(0, 255, 153, .78) !important;
  }

  body #resources .mockup-sidebar,
  body #resources .mockup-chart,
  body #resources .case-card {
    background: rgba(255, 255, 255, .075) !important;
  }

  body #resources .mockup-stats b,
  body #resources .flow-node,
  body #resources .flow-row span {
    background: rgba(255, 255, 255, .88) !important;
    color: #0f2036 !important;
  }

  body #resources .flow-node-main {
    background: linear-gradient(135deg, rgba(0, 255, 153, .95), rgba(35, 216, 255, .82)) !important;
    color: #04101e !important;
  }

  body #resources .case-card strong {
    color: #fff !important;
  }

  body #resources .case-card span {
    color: rgba(215, 237, 242, .72) !important;
  }
}

@media (max-width: 1180px) {
  body #resources .resource-stage,
  body #resources.premium-resources .resource-stage {
    display: block !important;
  }

  body #resources .resource-main {
    margin-bottom: 28px !important;
  }
}

/* FINAL 2026-06-17: clean standalone developer resources section. */
body .developer-resources {
  position: relative !important;
  display: block !important;
  flex: 0 0 auto !important;
  height: auto !important;
  min-height: auto !important;
  padding: clamp(72px, 7vw, 108px) 0 !important;
  background:
    radial-gradient(circle at 74% 10%, rgba(35, 216, 255, .13), transparent 32%),
    radial-gradient(circle at 24% 42%, rgba(0, 255, 153, .13), transparent 36%),
    linear-gradient(180deg, #03111c 0%, #04101e 54%, #020711 100%) !important;
  overflow: hidden !important;
}

body section#resources.developer-resources {
  display: block !important;
  flex: 0 0 auto !important;
  height: auto !important;
  min-height: 0 !important;
}

body .developer-resources::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background-image:
    linear-gradient(rgba(92, 223, 255, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(92, 223, 255, .05) 1px, transparent 1px) !important;
  background-size: 72px 72px !important;
  opacity: .24 !important;
  pointer-events: none !important;
}

body .devres-stage {
  position: relative !important;
  z-index: 1 !important;
  width: min(1328px, calc(100vw - 112px)) !important;
  max-width: 1328px !important;
  margin: 0 auto !important;
  display: grid !important;
  gap: 30px !important;
}

body .devres-hero {
  min-height: 420px !important;
  display: grid !important;
  grid-template-columns: minmax(430px, .92fr) minmax(540px, 1.08fr) !important;
  gap: 56px !important;
  align-items: center !important;
}

body .devres-copy {
  max-width: 620px !important;
}

body .devres-kicker {
  display: inline-flex !important;
  margin-bottom: 22px !important;
  color: rgba(0, 255, 153, .82) !important;
  font-size: 15px !important;
  font-weight: 760 !important;
  letter-spacing: .02em !important;
  text-transform: uppercase !important;
}

body .devres-copy h2 {
  margin: 0 0 24px !important;
  color: #fff !important;
  font-size: clamp(44px, 4vw, 66px) !important;
  line-height: 1.12 !important;
  font-weight: 800 !important;
  letter-spacing: 0 !important;
}

body .devres-copy p {
  max-width: 560px !important;
  margin: 0 0 34px !important;
  color: rgba(176, 195, 206, .86) !important;
  font-size: 18px !important;
  line-height: 1.85 !important;
}

body .devres-primary,
body .devres-band-copy a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 44px !important;
  padding: 0 20px !important;
  border: 1px solid rgba(0, 255, 153, .42) !important;
  border-radius: 999px !important;
  background: rgba(0, 255, 153, .13) !important;
  color: #e6fff6 !important;
  text-decoration: none !important;
  font-size: 15px !important;
  font-weight: 760 !important;
  transition: transform .24s ease, border-color .24s ease, background .24s ease, box-shadow .24s ease !important;
}

body .devres-primary:hover,
body .devres-band-copy a:hover {
  transform: translateY(-2px) !important;
  border-color: rgba(0, 255, 153, .70) !important;
  background: rgba(0, 255, 153, .20) !important;
  box-shadow: 0 0 24px rgba(0, 255, 153, .14) !important;
}

body .devres-dashboard {
  position: relative !important;
  min-height: 360px !important;
  border: 1px solid rgba(0, 255, 153, .42) !important;
  border-radius: 18px !important;
  background:
    radial-gradient(circle at 66% 34%, rgba(0, 255, 153, .20), transparent 38%),
    linear-gradient(135deg, rgba(5, 20, 34, .96), rgba(6, 32, 40, .90)) !important;
  box-shadow: 0 0 0 1px rgba(0, 255, 153, .12), 0 28px 76px rgba(0, 0, 0, .32), 0 0 42px rgba(0, 255, 153, .13) !important;
  overflow: hidden !important;
}

body .devres-window {
  position: absolute !important;
  inset: 28px 34px 34px !important;
  border: 1px solid rgba(255, 255, 255, .10) !important;
  border-radius: 14px !important;
  background: rgba(3, 12, 24, .82) !important;
  overflow: hidden !important;
}

body .devres-windowbar {
  height: 38px !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 0 16px !important;
  color: rgba(225, 255, 245, .78) !important;
  background: rgba(255, 255, 255, .055) !important;
}

body .devres-windowbar strong {
  margin-right: auto !important;
  font-size: 13px !important;
}

body .devres-windowbar span {
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
  background: rgba(0, 255, 153, .70) !important;
}

body .devres-screen {
  height: calc(100% - 38px) !important;
  display: grid !important;
  grid-template-columns: 78px 1fr !important;
}

body .devres-screen aside {
  padding: 18px 14px !important;
  display: grid !important;
  gap: 14px !important;
  align-content: start !important;
  background: rgba(255, 255, 255, .035) !important;
}

body .devres-screen aside i,
body .devres-table i {
  display: block !important;
  height: 12px !important;
  border-radius: 999px !important;
  background: rgba(176, 195, 206, .22) !important;
}

body .devres-screen main {
  padding: 18px !important;
  display: grid !important;
  grid-template-rows: 56px 1fr 58px !important;
  gap: 16px !important;
}

body .devres-card-row {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 12px !important;
}

body .devres-card-row b {
  display: flex !important;
  align-items: center !important;
  padding-left: 14px !important;
  border-radius: 10px !important;
  background: rgba(255, 255, 255, .90) !important;
  color: #102034 !important;
  font-size: 13px !important;
}

body .devres-chart {
  display: flex !important;
  align-items: flex-end !important;
  gap: 14px !important;
  padding: 18px !important;
  border-radius: 12px !important;
  background: rgba(255, 255, 255, .055) !important;
}

body .devres-chart span {
  flex: 1 !important;
  border-radius: 999px 999px 0 0 !important;
  background: linear-gradient(180deg, #00ff99, rgba(35, 216, 255, .58)) !important;
}

body .devres-chart span:nth-child(1) { height: 36% !important; }
body .devres-chart span:nth-child(2) { height: 68% !important; }
body .devres-chart span:nth-child(3) { height: 48% !important; }
body .devres-chart span:nth-child(4) { height: 82% !important; }

body .devres-table {
  display: grid !important;
  gap: 8px !important;
}

body .devres-float {
  position: absolute !important;
  right: 24px !important;
  z-index: 2 !important;
  min-width: 168px !important;
  padding: 18px !important;
  border: 1px solid rgba(0, 255, 153, .36) !important;
  border-radius: 12px !important;
  background: rgba(245, 255, 252, .92) !important;
  color: #102034 !important;
  font-size: 13px !important;
  font-weight: 760 !important;
  box-shadow: 0 18px 38px rgba(0, 0, 0, .22) !important;
}

body .devres-float-a { top: 46% !important; }
body .devres-float-b { bottom: 24px !important; }

body .devres-band {
  min-height: 260px !important;
  padding: 34px !important;
  display: grid !important;
  gap: 42px !important;
  align-items: center !important;
  border: 1px solid rgba(0, 255, 153, .42) !important;
  border-radius: 18px !important;
  background:
    radial-gradient(circle at 26% 46%, rgba(0, 255, 153, .13), transparent 34%),
    linear-gradient(135deg, rgba(7, 28, 38, .92), rgba(4, 13, 26, .94)) !important;
  box-shadow: 0 0 36px rgba(0, 255, 153, .10), 0 26px 76px rgba(0, 0, 0, .28) !important;
}

body .devres-band-template {
  grid-template-columns: minmax(520px, 1.05fr) minmax(420px, .95fr) !important;
}

body .devres-band-cases {
  grid-template-columns: minmax(420px, .90fr) minmax(520px, 1.10fr) !important;
}

body .devres-band-copy h3 {
  margin: 0 0 16px !important;
  color: #fff !important;
  font-size: clamp(28px, 2.4vw, 42px) !important;
  line-height: 1.18 !important;
  font-weight: 800 !important;
}

body .devres-band-copy p {
  max-width: 560px !important;
  margin: 0 0 28px !important;
  color: rgba(176, 195, 206, .88) !important;
  font-size: 17px !important;
  line-height: 1.8 !important;
}

body .devres-visual {
  min-height: 210px !important;
  border-radius: 16px !important;
  background:
    radial-gradient(circle at 50% 46%, rgba(0, 255, 153, .22), transparent 34%),
    linear-gradient(135deg, rgba(5, 20, 34, .94), rgba(7, 35, 42, .86)) !important;
  border: 1px solid rgba(0, 255, 153, .22) !important;
  overflow: hidden !important;
}

body .devres-agent-map {
  height: 100% !important;
  min-height: 210px !important;
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 14px !important;
  align-items: center !important;
  padding: 26px !important;
}

body .devres-agent-map span,
body .devres-agent-map strong,
body .devres-stack span,
body .devres-stack strong {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 48px !important;
  padding: 0 14px !important;
  border-radius: 12px !important;
  background: rgba(255, 255, 255, .86) !important;
  color: #102034 !important;
  font-size: 14px !important;
  font-weight: 760 !important;
  box-shadow: 0 14px 32px rgba(0, 0, 0, .18) !important;
}

body .devres-agent-map strong,
body .devres-stack strong {
  min-height: 72px !important;
  background: linear-gradient(135deg, rgba(0, 255, 153, .96), rgba(35, 216, 255, .78)) !important;
  color: #04101e !important;
}

body .devres-stack {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 14px !important;
  align-content: center !important;
  padding: 28px !important;
}

body .devres-card-row b,
body .devres-agent-map span,
body .devres-agent-map strong,
body .devres-stack span,
body .devres-stack strong {
  transition: transform .24s ease, box-shadow .24s ease !important;
}

body .devres-card-row b:hover,
body .devres-agent-map span:hover,
body .devres-agent-map strong:hover,
body .devres-stack span:hover,
body .devres-stack strong:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 18px 38px rgba(0, 0, 0, .22) !important;
}

@media (max-width: 1180px) {
  body .devres-stage,
  body .devres-hero,
  body .devres-band,
  body .devres-band-template,
  body .devres-band-cases {
    grid-template-columns: 1fr !important;
  }

  body .devres-stage {
    width: min(100% - 36px, 760px) !important;
  }

  body .devres-dashboard {
    min-height: 320px !important;
  }

  body .devres-float {
    right: 18px !important;
  }
}

/* FINAL 2026-06-17: developer resources visual language and row layout. */
body section#resources.developer-resources {
  height: auto !important;
  min-height: 0 !important;
  display: block !important;
  padding: clamp(72px, 7vw, 110px) 0 !important;
  background:
    radial-gradient(circle at 72% 15%, rgba(0, 255, 153, .10), transparent 28%),
    radial-gradient(circle at 14% 38%, rgba(35, 216, 255, .08), transparent 34%),
    linear-gradient(180deg, #050505 0%, #050505 100%) !important;
  color: #fff !important;
}

body section#resources.developer-resources::before {
  opacity: .12 !important;
  background-size: 96px 96px !important;
}

body section#resources .devres-stage {
  width: min(1280px, calc(100vw - 112px)) !important;
  max-width: 1280px !important;
  gap: 34px !important;
}

body section#resources .devres-hero,
body section#resources .devres-band {
  border: 1px solid rgba(0, 255, 153, .42) !important;
  border-radius: 16px !important;
  background:
    radial-gradient(circle at 78% 28%, rgba(0, 255, 153, .14), transparent 32%),
    linear-gradient(135deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .018)) !important;
  box-shadow:
    inset 0 0 28px rgba(0, 255, 153, .07),
    0 24px 80px rgba(0, 0, 0, .34) !important;
  backdrop-filter: blur(16px) !important;
}

body section#resources .devres-hero {
  min-height: 430px !important;
  padding: clamp(34px, 4vw, 54px) !important;
  grid-template-columns: minmax(420px, 1fr) minmax(500px, 1fr) !important;
  gap: clamp(44px, 6vw, 86px) !important;
}

body section#resources .devres-copy {
  max-width: 560px !important;
  align-self: center !important;
}

body section#resources .devres-kicker {
  margin-bottom: 18px !important;
  color: rgba(0, 255, 153, .72) !important;
  font-size: 14px !important;
  letter-spacing: .06em !important;
}

body section#resources .devres-copy h2 {
  margin-bottom: 22px !important;
  padding-bottom: 8px !important;
  color: #fff !important;
  font-size: clamp(42px, 4.1vw, 64px) !important;
  line-height: 1.2 !important;
}

body section#resources .devres-copy p {
  max-width: 540px !important;
  margin: 0 !important;
  color: rgba(225, 235, 238, .78) !important;
  font-size: 18px !important;
  line-height: 1.6 !important;
}

body section#resources .devres-dashboard,
body section#resources .devres-visual {
  border: 1px solid rgba(0, 255, 153, .46) !important;
  border-radius: 16px !important;
  background:
    radial-gradient(circle at 58% 44%, rgba(0, 255, 153, .18), transparent 34%),
    linear-gradient(135deg, rgba(6, 20, 24, .78), rgba(7, 12, 18, .72)) !important;
  box-shadow:
    inset 0 0 34px rgba(0, 255, 153, .08),
    0 22px 70px rgba(0, 0, 0, .38),
    0 0 22px rgba(0, 255, 153, .10) !important;
  transition: transform .24s ease, border-color .24s ease, box-shadow .24s ease !important;
}

body section#resources .devres-dashboard:hover,
body section#resources .devres-visual:hover {
  transform: translateY(-3px) !important;
  border-color: rgba(0, 255, 153, .78) !important;
  box-shadow:
    inset 0 0 40px rgba(0, 255, 153, .11),
    0 28px 82px rgba(0, 0, 0, .42),
    0 0 30px rgba(0, 255, 153, .16) !important;
}

body section#resources .devres-dashboard {
  min-height: 330px !important;
}

body section#resources .devres-window {
  inset: 24px !important;
  border-radius: 14px !important;
  border-color: rgba(0, 255, 153, .18) !important;
  background: rgba(5, 5, 5, .64) !important;
}

body section#resources .devres-float {
  background: rgba(5, 18, 18, .78) !important;
  color: #eafff7 !important;
  border-color: rgba(0, 255, 153, .44) !important;
  backdrop-filter: blur(12px) !important;
}

body section#resources .devres-band {
  min-height: 280px !important;
  padding: clamp(30px, 3.5vw, 46px) !important;
  gap: clamp(34px, 5vw, 70px) !important;
}

body section#resources .devres-band-template,
body section#resources .devres-band-cases {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
}

body section#resources .devres-band-copy h3 {
  margin-bottom: 14px !important;
  color: #fff !important;
  font-size: clamp(30px, 2.5vw, 42px) !important;
  line-height: 1.18 !important;
}

body section#resources .devres-band-copy p {
  max-width: 520px !important;
  margin-bottom: 24px !important;
  color: rgba(225, 235, 238, .76) !important;
  font-size: 17px !important;
  line-height: 1.6 !important;
}

body section#resources .devres-band-copy a {
  min-height: 44px !important;
  padding: 0 22px !important;
  border-radius: 999px !important;
  border-color: rgba(0, 255, 153, .58) !important;
  background: rgba(0, 255, 153, .16) !important;
  color: #f3fff9 !important;
  font-size: 15px !important;
}

body section#resources .devres-agent-map {
  position: relative !important;
  min-height: 240px !important;
  padding: 34px !important;
  perspective: 900px !important;
  background:
    linear-gradient(90deg, transparent 49%, rgba(0, 255, 153, .22) 50%, transparent 51%),
    linear-gradient(0deg, transparent 49%, rgba(0, 255, 153, .18) 50%, transparent 51%) !important;
  background-size: 100% 100%, 100% 100% !important;
}

body section#resources .devres-agent-map::before {
  content: "" !important;
  position: absolute !important;
  inset: 50% auto auto 50% !important;
  width: 128px !important;
  height: 128px !important;
  transform: translate(-50%, -50%) rotateX(58deg) rotateZ(45deg) !important;
  border: 1px solid rgba(0, 255, 153, .58) !important;
  border-radius: 18px !important;
  background: rgba(0, 255, 153, .15) !important;
  box-shadow: 0 0 48px rgba(0, 255, 153, .24) !important;
}

body section#resources .devres-agent-map span,
body section#resources .devres-agent-map strong {
  position: relative !important;
  z-index: 1 !important;
  min-height: 44px !important;
  border: 1px solid rgba(0, 255, 153, .30) !important;
  background: rgba(5, 5, 5, .48) !important;
  color: rgba(244, 255, 250, .86) !important;
}

body section#resources .devres-agent-map strong {
  min-height: 64px !important;
  background: rgba(0, 255, 153, .22) !important;
  color: #fff !important;
}

body section#resources .devres-stack {
  min-height: 240px !important;
  padding: 34px !important;
  display: grid !important;
  grid-template-columns: repeat(5, 1fr) !important;
  align-items: center !important;
  perspective: 1000px !important;
}

body section#resources .devres-stack span,
body section#resources .devres-stack strong {
  min-height: 76px !important;
  border: 1px solid rgba(0, 255, 153, .28) !important;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, .10), rgba(0, 255, 153, .08)) !important;
  color: rgba(244, 255, 250, .88) !important;
  transform: rotateX(58deg) rotateZ(-34deg) translateY(0) !important;
  box-shadow: 0 22px 38px rgba(0, 0, 0, .34) !important;
}

body section#resources .devres-stack strong {
  min-height: 100px !important;
  background: rgba(0, 255, 153, .20) !important;
  color: #fff !important;
}

@media (max-width: 1180px) {
  body section#resources .devres-stage {
    width: min(100% - 36px, 760px) !important;
  }

  body section#resources .devres-hero,
  body section#resources .devres-band,
  body section#resources .devres-band-template,
  body section#resources .devres-band-cases {
    grid-template-columns: 1fr !important;
  }
}

/* FINAL 2026-06-17: compact developer resources rows, placed last. */
body section#resources.developer-resources {
  padding: clamp(30px, 3.4vw, 44px) 0 !important;
}

body section#resources .devres-stage {
  width: min(1120px, calc(100vw - 104px)) !important;
  max-width: 1120px !important;
  gap: 14px !important;
}

body section#resources .devres-hero {
  min-height: 252px !important;
  padding: clamp(20px, 2.5vw, 28px) !important;
  grid-template-columns: minmax(360px, .96fr) minmax(430px, 1.04fr) !important;
  gap: clamp(24px, 3.4vw, 40px) !important;
}

body section#resources .devres-kicker {
  margin-bottom: 10px !important;
  font-size: 13px !important;
}

body section#resources .devres-copy h2 {
  margin-bottom: 12px !important;
  padding-bottom: 4px !important;
  font-size: clamp(30px, 3vw, 42px) !important;
  line-height: 1.18 !important;
}

body section#resources .devres-copy p {
  max-width: 460px !important;
  font-size: 14px !important;
  line-height: 1.55 !important;
}

body section#resources .devres-dashboard {
  min-height: 204px !important;
}

body section#resources .devres-window {
  inset: 14px !important;
}

body section#resources .devres-screen {
  grid-template-columns: 48px 1fr !important;
}

body section#resources .devres-screen aside {
  padding: 14px 10px !important;
  gap: 10px !important;
}

body section#resources .devres-screen main {
  padding: 10px !important;
  grid-template-rows: 36px 1fr 32px !important;
  gap: 8px !important;
}

body section#resources .devres-card-row b {
  font-size: 12px !important;
  padding-left: 10px !important;
}

body section#resources .devres-chart {
  padding: 12px !important;
  gap: 10px !important;
}

body section#resources .devres-float {
  min-width: 118px !important;
  padding: 10px 12px !important;
  font-size: 12px !important;
  right: 14px !important;
}

body section#resources .devres-float-b {
  bottom: 14px !important;
}

body section#resources .devres-band {
  min-height: 170px !important;
  padding: clamp(18px, 2.1vw, 24px) !important;
  gap: clamp(20px, 2.8vw, 32px) !important;
}

body section#resources .devres-band-copy h3 {
  margin-bottom: 8px !important;
  font-size: clamp(22px, 1.8vw, 30px) !important;
}

body section#resources .devres-band-copy p {
  max-width: 460px !important;
  margin-bottom: 14px !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
}

body section#resources .devres-band-copy a {
  min-height: 34px !important;
  padding: 0 16px !important;
  font-size: 14px !important;
}

body section#resources .devres-visual,
body section#resources .devres-agent-map,
body section#resources .devres-stack {
  min-height: 128px !important;
}

body section#resources .devres-agent-map,
body section#resources .devres-stack {
  padding: 16px !important;
  gap: 8px !important;
}

body section#resources .devres-agent-map::before {
  width: 72px !important;
  height: 72px !important;
}

body section#resources .devres-agent-map span,
body section#resources .devres-agent-map strong {
  min-height: 30px !important;
  padding: 0 8px !important;
  font-size: 12px !important;
}

body section#resources .devres-agent-map strong {
  min-height: 42px !important;
}

body section#resources .devres-stack span,
body section#resources .devres-stack strong {
  min-height: 42px !important;
  padding: 0 8px !important;
  font-size: 12px !important;
}

body section#resources .devres-stack strong {
  min-height: 56px !important;
}

/* FINAL 2026-06-17 EOF-2: force site-wide 1190px width and breathing gaps. */
@media (min-width: 1181px) {
  body .ai-home {
    display: grid !important;
    gap: clamp(28px, 3vw, 42px) !important;
    background: #050505 !important;
  }

  body .hero-stage,
  body #services .infrastructure-section,
  body #scenarios.ai-solutions,
  body #capability .capability-stage,
  body #training .delivery-stage,
  body #resources .devres-stage,
  body #about .about-stage,
  body .footer-mega,
  body .footer-brandbar,
  body .footer-legal {
    width: min(1190px, calc(100vw - 104px)) !important;
    max-width: 1190px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
  }

  body .ai-home > .ai-section,
  body #services.ai-origin,
  body #scenarios.ai-solutions,
  body #capability.core-tech-section,
  body #training.premium-delivery,
  body #resources.developer-resources,
  body #about.premium-about {
    height: auto !important;
    min-height: 0 !important;
    padding-top: clamp(68px, 7vw, 86px) !important;
    padding-bottom: clamp(68px, 7vw, 86px) !important;
    box-sizing: border-box !important;
  }

  body #scenarios.ai-solutions {
    justify-self: center !important;
  }

  body #capability .capability-stage,
  body #training .delivery-stage {
    grid-template-columns: minmax(340px, 410px) minmax(0, 1fr) !important;
    column-gap: 48px !important;
    overflow: visible !important;
  }

  body #capability .tech-console.core-card-grid,
  body #training .delivery-track {
    width: 100% !important;
    max-width: none !important;
    justify-self: stretch !important;
  }

  body #training .delivery-track article,
  body #training .delivery-track article.is-selected,
  body #training .delivery-track article[aria-selected="true"] {
    max-width: none !important;
  }

  body #resources .devres-stage {
    gap: 18px !important;
  }
}

/* FINAL 2026-06-17 EOF-3: align scenarios screen to the same 1190px inner rhythm. */
@media (min-width: 1181px) {
  body .ai-home > section#scenarios.ai-solutions,
  body section#scenarios.ai-solutions {
    width: min(1190px, calc(100vw - 104px)) !important;
    max-width: 1190px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    grid-template-columns: minmax(340px, 410px) minmax(0, 1fr) !important;
    column-gap: 48px !important;
    box-sizing: border-box !important;
    overflow: visible !important;
  }

  body section#scenarios.ai-solutions .solution-hero,
  body section#scenarios.ai-solutions .solution-board {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  body section#scenarios.ai-solutions .solution-board {
    justify-self: stretch !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 24px !important;
  }
}

/* FINAL 2026-06-17 EOF-4: tighten desktop vertical rhythm so sections sit visually centered. */
@media (min-width: 1181px) {
  body .ai-home > .ai-section,
  body #services.ai-origin,
  body #scenarios.ai-solutions,
  body #capability.core-tech-section,
  body #training.premium-delivery,
  body #resources.developer-resources,
  body #resources.premium-resources,
  body #about.premium-about {
    padding-top: clamp(46px, 4.7vw, 56px) !important;
    padding-bottom: clamp(46px, 4.7vw, 56px) !important;
  }

  body #capability .capability-stage,
  body #training .delivery-stage,
  body #resources .devres-stage,
  body #about .about-stage {
    align-items: center !important;
  }
}

/* FINAL 2026-06-17 EOF-5: high-specificity resource vertical rhythm override. */
@media (min-width: 1181px) {
  html body main.ai-home > section#resources.ai-section.developer-resources,
  html body section#resources.ai-section.developer-resources {
    padding-top: clamp(46px, 4.7vw, 56px) !important;
    padding-bottom: clamp(46px, 4.7vw, 56px) !important;
  }
}

/* FINAL 2026-06-17 EOF-6: modestly tighten homepage section gaps without redesigning layouts. */
@media (min-width: 1181px) {
  body .ai-home {
    gap: clamp(18px, 1.9vw, 24px) !important;
  }

  body .ai-home > .ai-section,
  body #services.ai-origin,
  body #scenarios.ai-solutions,
  body #capability.core-tech-section,
  body #training.premium-delivery,
  body #resources.developer-resources,
  body #resources.premium-resources,
  body #about.premium-about,
  html body main.ai-home > section#resources.ai-section.developer-resources,
  html body section#resources.ai-section.developer-resources {
    padding-top: clamp(36px, 3.4vw, 42px) !important;
    padding-bottom: clamp(36px, 3.4vw, 42px) !important;
  }
}

/* FINAL 2026-06-17 EOF-7: remove leftover internal vertical slack in delivery and developer screens. */
@media (min-width: 1181px) {
  body #training .delivery-stage {
    padding-top: 18px !important;
    padding-bottom: 18px !important;
    row-gap: 28px !important;
  }

  body #resources .devres-stage {
    row-gap: 12px !important;
    gap: 12px !important;
  }

  body #resources .devres-hero {
    min-height: 220px !important;
    height: auto !important;
    padding-top: 22px !important;
    padding-bottom: 22px !important;
    align-items: center !important;
  }

  body #resources .devres-dashboard {
    min-height: 184px !important;
  }

  body #resources .devres-band {
    min-height: 164px !important;
  }
}

/* FINAL 2026-06-17 EOF-8: high-specificity cleanup for delivery/resources internal slack. */
@media (min-width: 1181px) {
  html body section#training.ai-section.premium-delivery .delivery-stage {
    min-height: 0 !important;
    height: auto !important;
    padding-top: 18px !important;
    padding-bottom: 18px !important;
    row-gap: 28px !important;
  }

  html body section#resources.ai-section.developer-resources .devres-stage {
    row-gap: 12px !important;
    gap: 12px !important;
  }

  html body section#resources.ai-section.developer-resources .devres-hero {
    min-height: 220px !important;
    height: auto !important;
    padding-top: 22px !important;
    padding-bottom: 22px !important;
    align-items: center !important;
  }

  html body section#resources.ai-section.developer-resources .devres-dashboard {
    min-height: 184px !important;
  }

  html body section#resources.ai-section.developer-resources .devres-band {
    min-height: 164px !important;
  }
}

/* FINAL 2026-06-17 EOF-9: rebuild developer center as clean row-based visual modules. */
@media (min-width: 1181px) {
  html body section#resources.ai-section.developer-resources {
    padding-top: 48px !important;
    padding-bottom: 54px !important;
    scroll-margin-top: 92px !important;
    background:
      radial-gradient(circle at 78% 18%, rgba(0, 255, 153, .10), transparent 32%),
      radial-gradient(circle at 18% 44%, rgba(35, 216, 255, .08), transparent 36%),
      linear-gradient(180deg, #050708 0%, #071016 46%, #050708 100%) !important;
    overflow: hidden !important;
  }

  html body section#resources.ai-section.developer-resources::before {
    opacity: .10 !important;
    background-size: 92px 92px !important;
  }

  html body section#resources.ai-section.developer-resources .devres-stage {
    width: min(1190px, calc(100vw - 104px)) !important;
    max-width: 1190px !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 30px !important;
    align-items: stretch !important;
  }

  html body section#resources.ai-section.developer-resources .devres-hero {
    min-height: 316px !important;
    padding: 0 !important;
    display: grid !important;
    grid-template-columns: minmax(0, .42fr) minmax(0, .58fr) !important;
    gap: 56px !important;
    align-items: center !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
  }

  html body section#resources.ai-section.developer-resources .devres-copy {
    max-width: 500px !important;
    align-self: center !important;
  }

  html body section#resources.ai-section.developer-resources .devres-kicker {
    display: inline-flex !important;
    margin: 0 0 16px !important;
    color: rgba(0, 255, 153, .68) !important;
    font-size: 14px !important;
    line-height: 1 !important;
    font-weight: 760 !important;
    letter-spacing: .04em !important;
    text-transform: uppercase !important;
  }

  html body section#resources.ai-section.developer-resources .devres-copy h2 {
    margin: 0 0 20px !important;
    padding: 0 !important;
    color: #fff !important;
    font-size: clamp(42px, 4vw, 58px) !important;
    line-height: 1.16 !important;
    font-weight: 820 !important;
    letter-spacing: 0 !important;
  }

  html body section#resources.ai-section.developer-resources .devres-copy p {
    max-width: 480px !important;
    margin: 0 !important;
    color: rgba(221, 235, 237, .72) !important;
    font-size: 17px !important;
    line-height: 1.72 !important;
  }

  html body section#resources.ai-section.developer-resources .devres-dashboard,
  html body section#resources.ai-section.developer-resources .devres-visual {
    border: 1px solid rgba(0, 255, 153, .50) !important;
    border-radius: 16px !important;
    background:
      radial-gradient(circle at 62% 42%, rgba(0, 255, 153, .16), transparent 34%),
      linear-gradient(135deg, rgba(8, 25, 34, .82), rgba(5, 10, 16, .78)) !important;
    box-shadow:
      inset 0 0 34px rgba(0, 255, 153, .08),
      0 26px 72px rgba(0, 0, 0, .36),
      0 0 24px rgba(0, 255, 153, .10) !important;
    overflow: hidden !important;
    transition: transform .24s ease, border-color .24s ease, box-shadow .24s ease !important;
  }

  html body section#resources.ai-section.developer-resources .devres-dashboard:hover,
  html body section#resources.ai-section.developer-resources .devres-visual:hover {
    transform: translateY(-3px) !important;
    border-color: rgba(0, 255, 153, .82) !important;
    box-shadow:
      inset 0 0 42px rgba(0, 255, 153, .12),
      0 32px 84px rgba(0, 0, 0, .42),
      0 0 34px rgba(0, 255, 153, .18) !important;
  }

  html body section#resources.ai-section.developer-resources .devres-dashboard {
    min-height: 284px !important;
    height: 284px !important;
    justify-self: stretch !important;
  }

  html body section#resources.ai-section.developer-resources .devres-window {
    inset: 18px !important;
    border-radius: 14px !important;
    border-color: rgba(0, 255, 153, .18) !important;
    background: rgba(4, 8, 12, .76) !important;
  }

  html body section#resources.ai-section.developer-resources .devres-windowbar {
    height: 36px !important;
  }

  html body section#resources.ai-section.developer-resources .devres-screen {
    grid-template-columns: 58px 1fr !important;
  }

  html body section#resources.ai-section.developer-resources .devres-screen main {
    grid-template-rows: 48px 1fr 48px !important;
    gap: 12px !important;
    padding: 14px !important;
  }

  html body section#resources.ai-section.developer-resources .devres-card-row {
    gap: 12px !important;
  }

  html body section#resources.ai-section.developer-resources .devres-card-row b {
    min-height: 42px !important;
    padding-left: 14px !important;
    font-size: 13px !important;
    border-radius: 10px !important;
  }

  html body section#resources.ai-section.developer-resources .devres-chart {
    min-height: 84px !important;
    padding: 14px !important;
  }

  html body section#resources.ai-section.developer-resources .devres-float {
    min-width: 128px !important;
    padding: 12px 14px !important;
    color: #eafff8 !important;
    background: rgba(6, 24, 24, .86) !important;
    border-color: rgba(0, 255, 153, .52) !important;
    border-radius: 12px !important;
    font-size: 12px !important;
  }

  html body section#resources.ai-section.developer-resources .devres-float-a {
    top: 50% !important;
    transform: translateY(-50%) !important;
  }

  html body section#resources.ai-section.developer-resources .devres-float-b {
    bottom: 16px !important;
  }

  html body section#resources.ai-section.developer-resources .devres-band {
    min-height: 238px !important;
    padding: 28px 34px !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    gap: 48px !important;
    align-items: center !important;
    border: 1px solid rgba(0, 255, 153, .46) !important;
    border-radius: 16px !important;
    background:
      radial-gradient(circle at 74% 38%, rgba(0, 255, 153, .12), transparent 33%),
      linear-gradient(135deg, rgba(9, 27, 34, .74), rgba(7, 12, 18, .80)) !important;
    box-shadow:
      inset 0 0 30px rgba(0, 255, 153, .07),
      0 22px 70px rgba(0, 0, 0, .34) !important;
    backdrop-filter: blur(14px) !important;
  }

  html body section#resources.ai-section.developer-resources .devres-band-copy h3 {
    margin: 0 0 12px !important;
    color: #fff !important;
    font-size: clamp(26px, 2.2vw, 34px) !important;
    line-height: 1.18 !important;
    font-weight: 820 !important;
  }

  html body section#resources.ai-section.developer-resources .devres-band-copy p {
    max-width: 470px !important;
    margin: 0 0 18px !important;
    color: rgba(221, 235, 237, .72) !important;
    font-size: 15px !important;
    line-height: 1.68 !important;
  }

  html body section#resources.ai-section.developer-resources .devres-band-copy a {
    min-height: 40px !important;
    padding: 0 18px !important;
    border-radius: 999px !important;
    color: #f2fff9 !important;
    background: rgba(0, 255, 153, .16) !important;
    border-color: rgba(0, 255, 153, .56) !important;
    font-size: 14px !important;
  }

  html body section#resources.ai-section.developer-resources .devres-visual,
  html body section#resources.ai-section.developer-resources .devres-agent-map,
  html body section#resources.ai-section.developer-resources .devres-stack {
    min-height: 178px !important;
    height: 178px !important;
  }

  html body section#resources.ai-section.developer-resources .devres-agent-map {
    position: relative !important;
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 12px !important;
    padding: 22px !important;
    background:
      linear-gradient(90deg, transparent 49.5%, rgba(0, 255, 153, .22) 50%, transparent 50.5%),
      linear-gradient(0deg, transparent 49.5%, rgba(0, 255, 153, .16) 50%, transparent 50.5%) !important;
  }

  html body section#resources.ai-section.developer-resources .devres-agent-map::before {
    width: 86px !important;
    height: 86px !important;
    border-radius: 14px !important;
    background: rgba(0, 255, 153, .14) !important;
  }

  html body section#resources.ai-section.developer-resources .devres-agent-map span,
  html body section#resources.ai-section.developer-resources .devres-agent-map strong {
    position: relative !important;
    z-index: 1 !important;
    min-height: 34px !important;
    padding: 0 10px !important;
    border: 1px solid rgba(0, 255, 153, .30) !important;
    border-radius: 12px !important;
    background: rgba(6, 13, 16, .72) !important;
    color: rgba(242, 255, 249, .88) !important;
    font-size: 12px !important;
    line-height: 1.2 !important;
    box-shadow: 0 12px 28px rgba(0, 0, 0, .24) !important;
  }

  html body section#resources.ai-section.developer-resources .devres-agent-map strong {
    min-height: 48px !important;
    background: rgba(0, 255, 153, .18) !important;
    color: #fff !important;
  }

  html body section#resources.ai-section.developer-resources .devres-stack {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 10px !important;
    align-items: center !important;
    padding: 20px 24px !important;
    perspective: 900px !important;
  }

  html body section#resources.ai-section.developer-resources .devres-stack span,
  html body section#resources.ai-section.developer-resources .devres-stack strong {
    min-height: 74px !important;
    padding: 8px !important;
    border: 1px solid rgba(0, 255, 153, .30) !important;
    border-radius: 14px !important;
    background:
      linear-gradient(160deg, rgba(255, 255, 255, .10), rgba(0, 255, 153, .10)) !important;
    color: rgba(244, 255, 250, .90) !important;
    font-size: 11px !important;
    line-height: 1.24 !important;
    text-align: center !important;
    transform: rotateX(54deg) rotateZ(-28deg) !important;
    box-shadow: 0 18px 34px rgba(0, 0, 0, .34) !important;
  }

  html body section#resources.ai-section.developer-resources .devres-stack strong {
    min-height: 94px !important;
    background: rgba(0, 255, 153, .20) !important;
    color: #fff !important;
  }
}

/* FINAL 2026-06-17 EOF-10: use uploaded developer center composition directly. */
@media (min-width: 1181px) {
  html body section#resources.ai-section.developer-resources {
    padding-top: 42px !important;
    padding-bottom: 42px !important;
    scroll-margin-top: 92px !important;
    background:
      radial-gradient(circle at 74% 18%, rgba(0, 255, 153, .08), transparent 30%),
      linear-gradient(180deg, #050708 0%, #050708 100%) !important;
    overflow: hidden !important;
  }

  html body section#resources.ai-section.developer-resources .devres-reference-stage {
    position: relative !important;
    z-index: 1 !important;
    width: min(1190px, calc(100vw - 104px)) !important;
    max-width: 1190px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    display: block !important;
  }

  html body section#resources.ai-section.developer-resources .devres-reference-image {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    margin: 0 auto !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    object-fit: contain !important;
  }
}

@media (max-width: 1180px) {
  html body section#resources.ai-section.developer-resources {
    padding: 30px 0 !important;
  }

  html body section#resources.ai-section.developer-resources .devres-reference-stage {
    width: min(100% - 28px, 760px) !important;
    margin: 0 auto !important;
  }

  html body section#resources.ai-section.developer-resources .devres-reference-image {
    display: block !important;
    width: 100% !important;
    height: auto !important;
  }
}

/* FINAL 2026-06-17 EOF-11: rebuild developer center from the reference as real sharp UI, not a stretched screenshot. */
@media (min-width: 1181px) {
  html body section#resources.ai-section.developer-resources {
    padding: 48px 0 54px !important;
    scroll-margin-top: 92px !important;
    background:
      radial-gradient(circle at 73% 14%, rgba(0, 255, 153, .12), transparent 30%),
      radial-gradient(circle at 28% 35%, rgba(0, 255, 153, .08), transparent 36%),
      linear-gradient(180deg, #061517 0%, #07161b 48%, #050b0d 100%) !important;
    overflow: hidden !important;
  }

  html body section#resources.ai-section.developer-resources::before {
    opacity: .13 !important;
    background-size: 72px 72px !important;
  }

  html body section#resources.ai-section.developer-resources .devres-stage {
    position: relative !important;
    z-index: 1 !important;
    width: min(1190px, calc(100vw - 104px)) !important;
    max-width: 1190px !important;
    margin: 0 auto !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }

  html body section#resources.ai-section.developer-resources .devres-hero {
    min-height: 310px !important;
    padding: 0 !important;
    display: grid !important;
    grid-template-columns: minmax(0, .43fr) minmax(0, .57fr) !important;
    gap: 56px !important;
    align-items: center !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
  }

  html body section#resources.ai-section.developer-resources .devres-copy {
    max-width: 520px !important;
  }

  html body section#resources.ai-section.developer-resources .devres-kicker {
    display: inline-flex !important;
    margin: 0 0 16px !important;
    color: rgba(0, 255, 153, .68) !important;
    font-size: 13px !important;
    line-height: 1 !important;
    font-weight: 760 !important;
    letter-spacing: .05em !important;
  }

  html body section#resources.ai-section.developer-resources .devres-copy h2 {
    margin: 0 0 18px !important;
    padding: 0 !important;
    color: #fff !important;
    font-size: clamp(40px, 3.85vw, 58px) !important;
    line-height: 1.16 !important;
    font-weight: 820 !important;
    letter-spacing: 0 !important;
    text-shadow: 0 0 22px rgba(255, 255, 255, .10) !important;
  }

  html body section#resources.ai-section.developer-resources .devres-copy p {
    max-width: 500px !important;
    margin: 0 !important;
    color: rgba(220, 232, 232, .70) !important;
    font-size: 17px !important;
    line-height: 1.72 !important;
  }

  html body section#resources.ai-section.developer-resources .devres-dashboard,
  html body section#resources.ai-section.developer-resources .devres-visual {
    border: 1px solid rgba(106, 255, 199, .42) !important;
    border-radius: 16px !important;
    background:
      radial-gradient(circle at 66% 44%, rgba(0, 255, 153, .18), transparent 35%),
      linear-gradient(135deg, rgba(9, 29, 36, .88), rgba(5, 13, 20, .80)) !important;
    box-shadow:
      inset 0 0 28px rgba(0, 255, 153, .08),
      0 24px 70px rgba(0, 0, 0, .34),
      0 0 20px rgba(0, 255, 153, .10) !important;
    overflow: hidden !important;
    transition: transform .24s ease, border-color .24s ease, box-shadow .24s ease !important;
  }

  html body section#resources.ai-section.developer-resources .devres-dashboard:hover,
  html body section#resources.ai-section.developer-resources .devres-visual:hover {
    transform: translateY(-3px) !important;
    border-color: rgba(0, 255, 153, .78) !important;
    box-shadow:
      inset 0 0 38px rgba(0, 255, 153, .12),
      0 30px 82px rgba(0, 0, 0, .42),
      0 0 34px rgba(0, 255, 153, .16) !important;
  }

  html body section#resources.ai-section.developer-resources .devres-dashboard {
    height: 276px !important;
    min-height: 276px !important;
    align-self: center !important;
  }

  html body section#resources.ai-section.developer-resources .devres-window {
    inset: 16px !important;
    border: 1px solid rgba(0, 255, 153, .18) !important;
    border-radius: 14px !important;
    background: rgba(3, 10, 14, .78) !important;
  }

  html body section#resources.ai-section.developer-resources .devres-windowbar {
    height: 34px !important;
    padding: 0 14px !important;
  }

  html body section#resources.ai-section.developer-resources .devres-screen {
    grid-template-columns: 56px 1fr !important;
  }

  html body section#resources.ai-section.developer-resources .devres-screen aside {
    padding: 14px 10px !important;
    gap: 10px !important;
  }

  html body section#resources.ai-section.developer-resources .devres-screen main {
    grid-template-rows: 46px 1fr 44px !important;
    gap: 12px !important;
    padding: 14px !important;
  }

  html body section#resources.ai-section.developer-resources .devres-card-row {
    gap: 12px !important;
  }

  html body section#resources.ai-section.developer-resources .devres-card-row b {
    min-height: 40px !important;
    padding: 0 12px !important;
    border-radius: 9px !important;
    background: rgba(255, 255, 255, .92) !important;
    color: #102034 !important;
    font-size: 12px !important;
  }

  html body section#resources.ai-section.developer-resources .devres-chart {
    padding: 14px !important;
    gap: 12px !important;
  }

  html body section#resources.ai-section.developer-resources .devres-float {
    min-width: 126px !important;
    padding: 11px 14px !important;
    border-radius: 12px !important;
    color: #eafff7 !important;
    background: rgba(7, 31, 29, .88) !important;
    border-color: rgba(0, 255, 153, .48) !important;
    font-size: 12px !important;
  }

  html body section#resources.ai-section.developer-resources .devres-float-a {
    top: 50% !important;
    transform: translateY(-50%) !important;
  }

  html body section#resources.ai-section.developer-resources .devres-float-b {
    bottom: 16px !important;
  }

  html body section#resources.ai-section.developer-resources .devres-band {
    min-height: 238px !important;
    padding: 28px 34px !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    gap: 54px !important;
    align-items: center !important;
    border: 1px solid rgba(106, 255, 199, .38) !important;
    border-radius: 16px !important;
    background:
      radial-gradient(circle at 24% 44%, rgba(0, 255, 153, .13), transparent 34%),
      linear-gradient(135deg, rgba(9, 29, 36, .74), rgba(6, 16, 23, .84)) !important;
    box-shadow:
      inset 0 0 30px rgba(0, 255, 153, .07),
      0 22px 70px rgba(0, 0, 0, .32) !important;
    backdrop-filter: blur(14px) !important;
  }

  html body section#resources.ai-section.developer-resources .devres-band-copy h3 {
    margin: 0 0 12px !important;
    color: #fff !important;
    font-size: clamp(26px, 2.15vw, 34px) !important;
    line-height: 1.18 !important;
    font-weight: 820 !important;
    text-shadow: 0 0 18px rgba(255, 255, 255, .10) !important;
  }

  html body section#resources.ai-section.developer-resources .devres-band-copy p {
    max-width: 500px !important;
    margin: 0 0 18px !important;
    color: rgba(220, 232, 232, .70) !important;
    font-size: 15px !important;
    line-height: 1.66 !important;
  }

  html body section#resources.ai-section.developer-resources .devres-band-copy a {
    min-height: 40px !important;
    padding: 0 18px !important;
    border-radius: 999px !important;
    color: #f4fff9 !important;
    background: rgba(255, 255, 255, .08) !important;
    border-color: rgba(106, 255, 199, .46) !important;
    font-size: 14px !important;
  }

  html body section#resources.ai-section.developer-resources .devres-visual,
  html body section#resources.ai-section.developer-resources .devres-agent-map,
  html body section#resources.ai-section.developer-resources .devres-stack {
    min-height: 176px !important;
    height: 176px !important;
  }

  html body section#resources.ai-section.developer-resources .devres-agent-map {
    position: relative !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 12px !important;
    padding: 22px !important;
    background:
      linear-gradient(90deg, transparent 49.5%, rgba(0, 255, 153, .18) 50%, transparent 50.5%),
      linear-gradient(0deg, transparent 49.5%, rgba(0, 255, 153, .14) 50%, transparent 50.5%) !important;
  }

  html body section#resources.ai-section.developer-resources .devres-agent-map::before {
    content: "" !important;
    position: absolute !important;
    inset: 50% auto auto 50% !important;
    width: 88px !important;
    height: 88px !important;
    transform: translate(-50%, -50%) rotateX(58deg) rotateZ(45deg) !important;
    border: 1px solid rgba(0, 255, 153, .52) !important;
    border-radius: 14px !important;
    background: rgba(0, 255, 153, .14) !important;
    box-shadow: 0 0 44px rgba(0, 255, 153, .22) !important;
  }

  html body section#resources.ai-section.developer-resources .devres-agent-map span,
  html body section#resources.ai-section.developer-resources .devres-agent-map strong {
    position: relative !important;
    z-index: 1 !important;
    min-height: 34px !important;
    padding: 0 10px !important;
    border: 1px solid rgba(0, 255, 153, .28) !important;
    border-radius: 12px !important;
    background: rgba(5, 15, 18, .78) !important;
    color: rgba(240, 255, 248, .88) !important;
    font-size: 12px !important;
    line-height: 1.2 !important;
    box-shadow: 0 12px 28px rgba(0, 0, 0, .24) !important;
  }

  html body section#resources.ai-section.developer-resources .devres-agent-map strong {
    min-height: 48px !important;
    background: rgba(0, 255, 153, .18) !important;
    color: #fff !important;
  }

  html body section#resources.ai-section.developer-resources .devres-stack {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 10px !important;
    align-items: center !important;
    padding: 20px 24px !important;
    perspective: 900px !important;
  }

  html body section#resources.ai-section.developer-resources .devres-stack span,
  html body section#resources.ai-section.developer-resources .devres-stack strong {
    min-height: 72px !important;
    padding: 8px !important;
    border: 1px solid rgba(0, 255, 153, .30) !important;
    border-radius: 14px !important;
    background:
      linear-gradient(160deg, rgba(255, 255, 255, .10), rgba(0, 255, 153, .09)) !important;
    color: rgba(244, 255, 250, .90) !important;
    font-size: 11px !important;
    line-height: 1.24 !important;
    text-align: center !important;
    transform: rotateX(54deg) rotateZ(-28deg) !important;
    box-shadow: 0 18px 34px rgba(0, 0, 0, .34) !important;
  }

  html body section#resources.ai-section.developer-resources .devres-stack strong {
    min-height: 92px !important;
    background: rgba(0, 255, 153, .20) !important;
    color: #fff !important;
  }

  html body section#resources.ai-section.developer-resources .devres-reference-stage,
  html body section#resources.ai-section.developer-resources .devres-reference-image {
    display: none !important;
  }
}

/* FINAL 2026-06-18 EOF-12: developer center polish after visual review. */
@media (min-width: 1181px) {
  html body section#resources.ai-section.developer-resources .devres-stage {
    width: min(1190px, calc(100vw - 112px)) !important;
  }

  html body section#resources.ai-section.developer-resources .devres-hero {
    grid-template-columns: minmax(0, .46fr) minmax(0, .54fr) !important;
    gap: 34px !important;
    min-height: 292px !important;
  }

  html body section#resources.ai-section.developer-resources .devres-copy {
    min-width: 0 !important;
    max-width: 560px !important;
  }

  html body section#resources.ai-section.developer-resources .devres-copy::before {
    content: "开发者与资源" !important;
    display: inline-flex !important;
    align-items: center !important;
    height: 34px !important;
    margin: 0 0 18px !important;
    padding: 0 18px !important;
    border: 1px solid rgba(0, 255, 153, .55) !important;
    border-radius: 999px !important;
    color: #18f0a5 !important;
    background: rgba(0, 255, 153, .08) !important;
    box-shadow: inset 0 0 16px rgba(0, 255, 153, .08) !important;
    font-size: 14px !important;
    font-weight: 760 !important;
    line-height: 1 !important;
  }

  html body section#resources.ai-section.developer-resources .devres-copy::after {
    content: "" !important;
    display: none !important;
  }

  html body section#resources.ai-section.developer-resources .devres-copy h2 {
    max-width: 560px !important;
    font-size: clamp(36px, 3.25vw, 48px) !important;
    line-height: 1.22 !important;
    word-break: keep-all !important;
    overflow-wrap: normal !important;
  }

  html body section#resources.ai-section.developer-resources .devres-copy p {
    max-width: 520px !important;
    font-size: 16px !important;
    line-height: 1.68 !important;
  }

  html body section#resources.ai-section.developer-resources .devres-dashboard {
    width: 100% !important;
    min-width: 0 !important;
    height: 252px !important;
    min-height: 252px !important;
  }

  html body section#resources.ai-section.developer-resources .devres-window {
    inset: 14px !important;
    border-color: rgba(0, 255, 153, .26) !important;
    background: rgba(2, 11, 13, .86) !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
  }

  html body section#resources.ai-section.developer-resources .devres-screen {
    grid-template-columns: 48px minmax(0, 1fr) !important;
    flex: 1 1 auto !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  html body section#resources.ai-section.developer-resources .devres-screen aside {
    padding: 16px 9px !important;
    gap: 9px !important;
    background: rgba(0, 0, 0, .30) !important;
  }

  html body section#resources.ai-section.developer-resources .devres-screen aside i {
    height: 10px !important;
    background: rgba(176, 195, 206, .24) !important;
  }

  html body section#resources.ai-section.developer-resources .devres-screen main {
    grid-template-rows: 38px minmax(0, 1fr) 32px !important;
    gap: 8px !important;
    padding: 12px !important;
    min-width: 0 !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  html body section#resources.ai-section.developer-resources .devres-card-row {
    gap: 10px !important;
  }

  html body section#resources.ai-section.developer-resources .devres-card-row b {
    min-height: 34px !important;
    border-radius: 9px !important;
    background: linear-gradient(180deg, rgba(255,255,255,.94), rgba(238,246,244,.90)) !important;
    color: #102034 !important;
    font-size: 12px !important;
    white-space: nowrap !important;
  }

  html body section#resources.ai-section.developer-resources .devres-chart {
    min-height: 0 !important;
    padding: 12px 16px !important;
    gap: 12px !important;
    background: rgba(255, 255, 255, .045) !important;
  }

  html body section#resources.ai-section.developer-resources .devres-table {
    gap: 6px !important;
    overflow: hidden !important;
  }

  html body section#resources.ai-section.developer-resources .devres-table i {
    height: 9px !important;
    background: rgba(176, 195, 206, .22) !important;
  }

  html body section#resources.ai-section.developer-resources .devres-float {
    right: 14px !important;
    min-width: 112px !important;
    padding: 10px 12px !important;
    font-size: 12px !important;
  }

  html body section#resources.ai-section.developer-resources .devres-float-a {
    top: 47% !important;
  }

  html body section#resources.ai-section.developer-resources .devres-float-b {
    bottom: 14px !important;
  }

  html body section#resources.ai-section.developer-resources .devres-band-copy h3 {
    line-height: 1.28 !important;
    padding-bottom: 2px !important;
  }
}

/* FINAL 2026-06-18 EOF-13: make developer dashboard preview readable and meaningful. */
@media (min-width: 1181px) {
  html body section#resources.ai-section.developer-resources .devres-windowbar strong {
    color: rgba(232, 255, 247, .82) !important;
    font-size: 13px !important;
    font-weight: 760 !important;
  }

  html body section#resources.ai-section.developer-resources .devres-screen {
    grid-template-columns: 46px minmax(0, 1fr) !important;
    background:
      linear-gradient(90deg, rgba(0,0,0,.30), transparent 18%),
      radial-gradient(circle at 66% 58%, rgba(0, 255, 153, .12), transparent 36%) !important;
  }

  html body section#resources.ai-section.developer-resources .devres-screen aside {
    border-right: 1px solid rgba(0, 255, 153, .10) !important;
  }

  html body section#resources.ai-section.developer-resources .devres-screen aside i {
    width: 24px !important;
    height: 7px !important;
    margin: 0 auto !important;
  }

  html body section#resources.ai-section.developer-resources .devres-card-row {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  html body section#resources.ai-section.developer-resources .devres-card-row b {
    min-height: 44px !important;
    padding: 8px 10px !important;
    display: grid !important;
    align-content: center !important;
    gap: 4px !important;
    border: 1px solid rgba(0, 255, 153, .22) !important;
    border-radius: 10px !important;
    background: linear-gradient(180deg, rgba(12, 40, 42, .92), rgba(8, 22, 27, .88)) !important;
    color: #fff !important;
    box-shadow: inset 0 0 16px rgba(0, 255, 153, .07) !important;
  }

  html body section#resources.ai-section.developer-resources .devres-card-row small,
  html body section#resources.ai-section.developer-resources .devres-card-row em {
    display: block !important;
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    font-style: normal !important;
    letter-spacing: 0 !important;
  }

  html body section#resources.ai-section.developer-resources .devres-card-row small {
    color: #f6fffb !important;
    font-size: 12px !important;
    font-weight: 820 !important;
  }

  html body section#resources.ai-section.developer-resources .devres-card-row em {
    color: rgba(188, 218, 212, .76) !important;
    font-size: 10px !important;
    font-weight: 600 !important;
  }

  html body section#resources.ai-section.developer-resources .devres-chart {
    position: relative !important;
    align-items: end !important;
    border: 1px solid rgba(0, 255, 153, .12) !important;
    border-radius: 12px !important;
    background:
      linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.015)),
      linear-gradient(90deg, rgba(0,255,153,.08) 1px, transparent 1px) 0 0 / 25% 100% !important;
  }

  html body section#resources.ai-section.developer-resources .devres-chart::before {
    content: "交付状态分布" !important;
    position: absolute !important;
    top: 9px !important;
    left: 14px !important;
    color: rgba(230, 255, 247, .72) !important;
    font-size: 11px !important;
    font-weight: 760 !important;
  }

  html body section#resources.ai-section.developer-resources .devres-chart span {
    max-width: 88px !important;
    border-radius: 12px 12px 0 0 !important;
    background: linear-gradient(180deg, #00ff99 0%, rgba(35, 216, 255, .70) 62%, rgba(0, 255, 153, .26) 100%) !important;
  }

  html body section#resources.ai-section.developer-resources .devres-table i {
    position: relative !important;
    height: 8px !important;
    border-radius: 999px !important;
    background: rgba(190, 210, 210, .18) !important;
  }

  html body section#resources.ai-section.developer-resources .devres-table i::after {
    content: "" !important;
    position: absolute !important;
    inset: 0 auto 0 0 !important;
    width: 58% !important;
    border-radius: inherit !important;
    background: linear-gradient(90deg, rgba(0, 255, 153, .72), rgba(35, 216, 255, .50)) !important;
  }

  html body section#resources.ai-section.developer-resources .devres-table i:nth-child(2)::after {
    width: 72% !important;
  }

  html body section#resources.ai-section.developer-resources .devres-table i:nth-child(3)::after {
    width: 46% !important;
  }

  html body section#resources.ai-section.developer-resources .devres-float {
    min-width: 104px !important;
    border-radius: 12px !important;
    background: rgba(5, 31, 28, .92) !important;
    box-shadow: 0 14px 34px rgba(0, 0, 0, .30), inset 0 0 18px rgba(0, 255, 153, .08) !important;
  }
}

/* FINAL 2026-06-18 EOF-14: compact developer resources so the three modules do not dominate the viewport. */
@media (min-width: 1181px) {
  html body section#resources.ai-section.developer-resources {
    padding: 34px 0 38px !important;
  }

  html body section#resources.ai-section.developer-resources .devres-stage {
    gap: 18px !important;
  }

  html body section#resources.ai-section.developer-resources .devres-hero {
    min-height: 238px !important;
    grid-template-columns: minmax(0, .43fr) minmax(0, .57fr) !important;
    gap: 36px !important;
  }

  html body section#resources.ai-section.developer-resources .devres-copy::before {
    height: 30px !important;
    margin-bottom: 14px !important;
    padding: 0 16px !important;
    font-size: 13px !important;
  }

  html body section#resources.ai-section.developer-resources .devres-copy h2 {
    max-width: 520px !important;
    margin-bottom: 14px !important;
    font-size: clamp(34px, 2.72vw, 42px) !important;
    line-height: 1.16 !important;
  }

  html body section#resources.ai-section.developer-resources .devres-copy p {
    max-width: 520px !important;
    font-size: 15px !important;
    line-height: 1.62 !important;
  }

  html body section#resources.ai-section.developer-resources .devres-dashboard {
    height: 206px !important;
    min-height: 206px !important;
    border-radius: 14px !important;
  }

  html body section#resources.ai-section.developer-resources .devres-window {
    inset: 12px !important;
    border-radius: 12px !important;
  }

  html body section#resources.ai-section.developer-resources .devres-windowbar {
    height: 30px !important;
    padding: 0 12px !important;
  }

  html body section#resources.ai-section.developer-resources .devres-screen {
    grid-template-columns: 40px minmax(0, 1fr) !important;
  }

  html body section#resources.ai-section.developer-resources .devres-screen aside {
    padding: 12px 7px !important;
    gap: 7px !important;
  }

  html body section#resources.ai-section.developer-resources .devres-screen aside i {
    width: 20px !important;
    height: 6px !important;
  }

  html body section#resources.ai-section.developer-resources .devres-screen main {
    grid-template-rows: 34px minmax(0, 1fr) 26px !important;
    gap: 7px !important;
    padding: 10px !important;
  }

  html body section#resources.ai-section.developer-resources .devres-card-row {
    gap: 8px !important;
  }

  html body section#resources.ai-section.developer-resources .devres-card-row b {
    min-height: 34px !important;
    padding: 6px 8px !important;
    gap: 2px !important;
    border-radius: 8px !important;
  }

  html body section#resources.ai-section.developer-resources .devres-card-row small {
    font-size: 11px !important;
  }

  html body section#resources.ai-section.developer-resources .devres-card-row em {
    font-size: 9px !important;
  }

  html body section#resources.ai-section.developer-resources .devres-chart {
    padding: 10px 14px !important;
    gap: 10px !important;
    border-radius: 10px !important;
  }

  html body section#resources.ai-section.developer-resources .devres-chart::before {
    top: 7px !important;
    left: 12px !important;
    font-size: 10px !important;
  }

  html body section#resources.ai-section.developer-resources .devres-table {
    gap: 5px !important;
  }

  html body section#resources.ai-section.developer-resources .devres-table i {
    height: 7px !important;
  }

  html body section#resources.ai-section.developer-resources .devres-float {
    right: 10px !important;
    min-width: 92px !important;
    padding: 8px 10px !important;
    font-size: 11px !important;
  }

  html body section#resources.ai-section.developer-resources .devres-band {
    min-height: 174px !important;
    padding: 20px 28px !important;
    gap: 40px !important;
    border-radius: 14px !important;
  }

  html body section#resources.ai-section.developer-resources .devres-visual,
  html body section#resources.ai-section.developer-resources .devres-agent-map,
  html body section#resources.ai-section.developer-resources .devres-stack {
    min-height: 132px !important;
    height: 132px !important;
  }

  html body section#resources.ai-section.developer-resources .devres-agent-map {
    padding: 16px !important;
    gap: 9px !important;
  }

  html body section#resources.ai-section.developer-resources .devres-agent-map::before {
    width: 66px !important;
    height: 66px !important;
  }

  html body section#resources.ai-section.developer-resources .devres-agent-map span,
  html body section#resources.ai-section.developer-resources .devres-agent-map strong {
    min-height: 28px !important;
    padding: 0 8px !important;
    border-radius: 10px !important;
    font-size: 11px !important;
  }

  html body section#resources.ai-section.developer-resources .devres-agent-map strong {
    min-height: 38px !important;
  }

  html body section#resources.ai-section.developer-resources .devres-band-copy h3 {
    margin-bottom: 8px !important;
    font-size: clamp(23px, 1.65vw, 28px) !important;
  }

  html body section#resources.ai-section.developer-resources .devres-band-copy p {
    max-width: 520px !important;
    margin-bottom: 14px !important;
    font-size: 14px !important;
    line-height: 1.56 !important;
  }

  html body section#resources.ai-section.developer-resources .devres-band-copy a {
    min-height: 34px !important;
    padding: 0 16px !important;
    font-size: 13px !important;
  }

  html body section#resources.ai-section.developer-resources .devres-stack {
    gap: 8px !important;
    padding: 16px 18px !important;
  }

  html body section#resources.ai-section.developer-resources .devres-stack span,
  html body section#resources.ai-section.developer-resources .devres-stack strong {
    min-height: 54px !important;
    border-radius: 12px !important;
    font-size: 10px !important;
  }

  html body section#resources.ai-section.developer-resources .devres-stack strong {
    min-height: 68px !important;
  }
}

/* FINAL 2026-06-18 EOF-15: unified vertical rhythm for all homepage sections. */
@media (min-width: 1181px) {
  html body .ai-home {
    gap: 20px !important;
    row-gap: 20px !important;
  }

  html body .ai-home > section.ai-section,
  html body .ai-home > section#services.ai-section,
  html body .ai-home > section#scenarios.ai-section,
  html body .ai-home > section#capability.ai-section,
  html body .ai-home > section#training.ai-section,
  html body .ai-home > section#resources.ai-section,
  html body .ai-home > section#about.ai-section {
    padding-top: 36px !important;
    padding-bottom: 36px !important;
    scroll-margin-top: 92px !important;
  }

  html body section#resources.ai-section.developer-resources {
    padding-top: 36px !important;
    padding-bottom: 36px !important;
  }
}

/* FINAL 2026-06-18 EOF-16: keep core-tech CTA inside its own screen. */
@media (min-width: 1181px) {
  html body section#capability.core-tech-section .capability-copy {
    align-self: center !important;
    max-height: none !important;
    overflow: visible !important;
  }

  html body section#capability.core-tech-section .core-badge {
    margin-bottom: 14px !important;
  }

  html body section#capability.core-tech-section .capability-copy h2 {
    margin-top: 12px !important;
    margin-bottom: 16px !important;
    font-size: clamp(30px, 2.55vw, 36px) !important;
    line-height: 1.16 !important;
  }

  html body section#capability.core-tech-section .capability-copy > p {
    margin: 0 0 16px !important;
    font-size: 15px !important;
    line-height: 1.68 !important;
  }

  html body section#capability.core-tech-section .core-metrics {
    margin-top: 18px !important;
    margin-bottom: 18px !important;
    padding-top: 16px !important;
    gap: 14px !important;
  }

  html body section#capability.core-tech-section .core-metrics span {
    gap: 6px !important;
    font-size: 12px !important;
    line-height: 1.25 !important;
  }

  html body section#capability.core-tech-section .core-metrics strong {
    font-size: 26px !important;
  }

  html body section#capability.core-tech-section .core-cta {
    margin-top: 10px !important;
    height: 42px !important;
    min-height: 42px !important;
    padding: 0 22px !important;
  }
}

/* 2026-06-24: Siweishu digital employee section, adapted from product references. */
.digital-employee-section {
  position: relative !important;
  overflow: hidden !important;
  background:
    radial-gradient(circle at 16% 30%, rgba(0, 255, 153, .11), transparent 34%),
    radial-gradient(circle at 82% 44%, rgba(32, 118, 255, .12), transparent 38%),
    linear-gradient(180deg, #041016 0%, #02080d 100%) !important;
}

.digital-employee-section::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  opacity: .34 !important;
  background-image:
    linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px) !important;
  background-size: 72px 72px !important;
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent) !important;
  pointer-events: none !important;
}

.digital-employee-stage {
  position: relative !important;
  z-index: 1 !important;
  width: min(1680px, calc(100vw - 64px)) !important;
  min-height: min(720px, calc(100svh - 104px)) !important;
  margin: 0 auto !important;
  display: grid !important;
  grid-template-columns: minmax(420px, .36fr) minmax(0, .64fr) !important;
  align-items: center !important;
  gap: 48px !important;
}

.digital-employee-head {
  min-width: 0 !important;
}

.digital-employee-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  height: 34px !important;
  padding: 0 18px !important;
  border: 1px solid rgba(0, 255, 153, .48) !important;
  border-radius: 999px !important;
  color: rgba(158, 232, 204, .92) !important;
  background: rgba(0, 255, 153, .045) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
}

.digital-employee-badge i {
  width: 9px !important;
  height: 9px !important;
  border-radius: 999px !important;
  background: #21f6ad !important;
  box-shadow: 0 0 18px rgba(0, 255, 153, .78) !important;
}

.digital-employee-head h2 {
  margin: 26px 0 22px !important;
  color: #f5fff9 !important;
  font-size: clamp(36px, 4.1vw, 58px) !important;
  line-height: 1.12 !important;
  font-weight: 800 !important;
}

.digital-employee-head p {
  max-width: 520px !important;
  margin: 0 !important;
  color: rgba(193, 214, 211, .82) !important;
  font-size: 17px !important;
  line-height: 1.85 !important;
}

.digital-employee-content {
  display: grid !important;
  grid-template-columns: minmax(360px, .42fr) minmax(520px, .58fr) !important;
  gap: 28px !important;
  align-items: stretch !important;
  min-width: 0 !important;
}

.digital-employee-list {
  display: grid !important;
  gap: 16px !important;
}

.digital-employee-item {
  display: grid !important;
  grid-template-columns: 38px minmax(0, 1fr) !important;
  gap: 14px !important;
  padding: 18px !important;
  min-height: 132px !important;
  border-radius: 16px !important;
  border: 1px solid rgba(148, 167, 184, .20) !important;
  background: rgba(255, 255, 255, .035) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05) !important;
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease !important;
}

.digital-employee-item:hover,
.digital-employee-item.is-active {
  transform: translateY(-3px) !important;
  border-color: rgba(0, 255, 153, .70) !important;
  box-shadow: inset 0 0 28px rgba(0, 255, 153, .08), 0 18px 42px rgba(0, 0, 0, .24) !important;
}

.digital-employee-item > span {
  display: grid !important;
  place-items: center !important;
  width: 38px !important;
  height: 38px !important;
  border-radius: 999px !important;
  color: #23f2a7 !important;
  background: rgba(0, 255, 153, .12) !important;
  font-size: 14px !important;
  font-weight: 800 !important;
}

.digital-employee-item h3 {
  margin: 0 0 10px !important;
  color: #fff !important;
  font-size: 22px !important;
  line-height: 1.18 !important;
}

.digital-employee-item p {
  margin: 0 0 14px !important;
  color: rgba(190, 213, 209, .78) !important;
  font-size: 13px !important;
  line-height: 1.65 !important;
}

.digital-employee-item em {
  display: inline-flex !important;
  align-items: center !important;
  min-height: 26px !important;
  margin: 0 8px 6px 0 !important;
  padding: 0 10px !important;
  border-radius: 999px !important;
  color: #1ff0a6 !important;
  background: rgba(0, 255, 153, .12) !important;
  border: 1px solid rgba(0, 255, 153, .24) !important;
  font-size: 12px !important;
  font-style: normal !important;
  white-space: nowrap !important;
}

.digital-employee-flow {
  position: relative !important;
  min-height: 520px !important;
  border: 1px solid rgba(0, 255, 153, .26) !important;
  border-radius: 22px !important;
  background:
    linear-gradient(145deg, rgba(255,255,255,.07), rgba(0,255,153,.045) 52%, rgba(255,255,255,.025)),
    rgba(3, 17, 24, .82) !important;
  box-shadow: inset 0 0 44px rgba(0, 255, 153, .075), 0 24px 70px rgba(0,0,0,.30) !important;
  overflow: hidden !important;
}

.digital-employee-flow::before {
  content: "" !important;
  position: absolute !important;
  inset: 50% 12% auto 12% !important;
  height: 2px !important;
  background: linear-gradient(90deg, transparent, rgba(0, 255, 153, .74), rgba(48, 132, 255, .72), transparent) !important;
}

.flow-panel,
.flow-agent,
.flow-result {
  position: absolute !important;
  border: 1px solid rgba(0, 255, 153, .22) !important;
  background: rgba(5, 18, 24, .88) !important;
  box-shadow: 0 20px 48px rgba(0,0,0,.26), inset 0 0 24px rgba(0,255,153,.055) !important;
}

.flow-panel {
  width: 210px !important;
  min-height: 202px !important;
  padding: 16px !important;
  border-radius: 16px !important;
}

.flow-panel strong,
.flow-result strong {
  display: block !important;
  color: #fff !important;
  font-size: 18px !important;
  margin-bottom: 14px !important;
}

.flow-profile {
  top: 122px !important;
  left: 42px !important;
}

.avatar-row {
  display: flex !important;
  margin-bottom: 14px !important;
}

.avatar-row i {
  width: 24px !important;
  height: 24px !important;
  margin-right: -5px !important;
  border-radius: 50% !important;
  border: 2px solid rgba(255,255,255,.8) !important;
  background: linear-gradient(135deg, #e7fff5, #23f2a7) !important;
}

.flow-panel span {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: calc(50% - 5px) !important;
  min-height: 28px !important;
  margin: 0 5px 8px 0 !important;
  border-radius: 8px !important;
  color: rgba(210, 231, 228, .84) !important;
  background: rgba(255,255,255,.055) !important;
  font-size: 12px !important;
}

.flow-agent {
  top: 176px !important;
  left: 286px !important;
  width: 64px !important;
  height: 142px !important;
  border-radius: 999px !important;
  display: grid !important;
  place-items: center !important;
  text-align: center !important;
}

.flow-agent b {
  width: 34px !important;
  height: 34px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 50% !important;
  color: #001510 !important;
  background: #23f2a7 !important;
  font-size: 15px !important;
}

.flow-agent span {
  writing-mode: vertical-rl !important;
  color: #e9fff7 !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  letter-spacing: 2px !important;
}

.flow-strategy {
  top: 88px !important;
  right: 116px !important;
  width: 150px !important;
  min-height: 322px !important;
}

.flow-strategy span {
  width: 100% !important;
  min-height: 44px !important;
  margin-bottom: 12px !important;
  color: #dffcf3 !important;
  background: rgba(32, 119, 255, .12) !important;
  border: 1px solid rgba(32, 119, 255, .18) !important;
}

.flow-result {
  top: 168px !important;
  right: 28px !important;
  width: 72px !important;
  min-height: 176px !important;
  padding: 16px 12px !important;
  border-radius: 18px !important;
  background: linear-gradient(160deg, rgba(0, 255, 153, .22), rgba(45, 101, 255, .46)) !important;
}

.flow-result small {
  display: block !important;
  color: rgba(255,255,255,.78) !important;
  font-size: 12px !important;
  line-height: 1.4 !important;
}

.flow-result strong {
  margin: 8px 0 18px !important;
  font-size: 17px !important;
  line-height: 1.25 !important;
}

.flow-result i {
  display: block !important;
  height: 54px !important;
  border-left: 3px solid rgba(255,255,255,.72) !important;
  border-bottom: 3px solid rgba(255,255,255,.72) !important;
  border-radius: 0 0 0 36px !important;
  transform: skewX(-14deg) !important;
}

@media (max-width: 1180px) {
  .digital-employee-stage {
    width: min(100%, calc(100vw - 32px)) !important;
    min-height: auto !important;
    grid-template-columns: 1fr !important;
    gap: 28px !important;
    padding: 40px 0 !important;
  }

  .digital-employee-content {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 760px) {
  .digital-employee-head h2 {
    font-size: 34px !important;
  }

  .digital-employee-flow {
    min-height: 620px !important;
  }

  .flow-profile,
  .flow-agent,
  .flow-strategy,
  .flow-result {
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
  }

  .flow-profile { top: 24px !important; }
  .flow-agent { top: 258px !important; }
  .flow-strategy { top: 426px !important; width: min(260px, calc(100% - 40px)) !important; min-height: 150px !important; }
  .flow-result { display: none !important; }
}

/* 2026-06-24: restore the approved digital-employee three-column homepage layout. */
body section#digital-employee .digital-employee-stage.container {
  width: min(1680px, calc(100vw - 64px)) !important;
  min-width: min(1680px, calc(100vw - 64px)) !important;
  max-width: 1680px !important;
  min-height: min(720px, calc(100svh - 104px)) !important;
  grid-template-columns: minmax(420px, .36fr) minmax(0, .64fr) !important;
  gap: 48px !important;
}

body section#digital-employee .digital-employee-content {
  grid-template-columns: minmax(360px, .42fr) minmax(520px, .58fr) !important;
  gap: 28px !important;
}

body section#digital-employee .digital-employee-flow {
  min-height: 520px !important;
}

body section#digital-employee .flow-panel {
  width: 210px !important;
}

body section#digital-employee .flow-profile {
  top: 122px !important;
  left: 42px !important;
}

body section#digital-employee .flow-agent {
  top: 176px !important;
  left: 286px !important;
  width: 64px !important;
}

body section#digital-employee .flow-strategy {
  top: 88px !important;
  right: 116px !important;
  width: 150px !important;
  min-height: 322px !important;
}

body section#digital-employee .flow-result {
  top: 168px !important;
  right: 28px !important;
  width: 72px !important;
  min-height: 176px !important;
}

@media (max-width: 1280px) {
  body section#digital-employee .digital-employee-stage.container {
    width: min(1190px, calc(100vw - 64px)) !important;
    min-width: min(1190px, calc(100vw - 64px)) !important;
    max-width: 1190px !important;
    grid-template-columns: minmax(360px, .36fr) minmax(0, .64fr) !important;
    gap: 42px !important;
  }

  body section#digital-employee .digital-employee-content {
    grid-template-columns: minmax(300px, .42fr) minmax(430px, .58fr) !important;
    gap: 24px !important;
  }

  body section#digital-employee .digital-employee-flow {
    min-height: 500px !important;
  }

  body section#digital-employee .flow-panel {
    width: 176px !important;
  }

  body section#digital-employee .flow-profile {
    left: 26px !important;
  }

  body section#digital-employee .flow-agent {
    left: 214px !important;
  }

  body section#digital-employee .flow-strategy {
    right: 86px !important;
    width: 132px !important;
  }

  body section#digital-employee .flow-result {
    right: 16px !important;
    width: 64px !important;
  }
}

@media (max-width: 1180px) {
  body section#digital-employee .digital-employee-stage.container {
    min-width: 0 !important;
    width: min(100%, calc(100vw - 32px)) !important;
  }

  body section#digital-employee .digital-employee-stage.container,
  body section#digital-employee .digital-employee-content {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 760px) {
  body section#digital-employee .digital-employee-flow {
    min-height: 620px !important;
    height: 620px !important;
  }

  body section#digital-employee .flow-profile,
  body section#digital-employee .flow-agent,
  body section#digital-employee .flow-strategy,
  body section#digital-employee .flow-result {
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
  }

  body section#digital-employee .flow-profile {
    top: 24px !important;
    width: min(240px, calc(100% - 40px)) !important;
  }

  body section#digital-employee .flow-agent {
    top: 258px !important;
    width: 58px !important;
  }

  body section#digital-employee .flow-strategy {
    top: 414px !important;
    width: min(260px, calc(100% - 40px)) !important;
    min-height: 150px !important;
    height: 150px !important;
  }

  body section#digital-employee .flow-result {
    display: none !important;
  }
}