/* ============================================================================
   GO4AI — TRANG "ỨNG DỤNG THỰC TẾ"
   High-Tech Enterprise AI × Cinematic Case Study Experience
   ----------------------------------------------------------------------------
   Visual + motion presentation layer. Loaded ONLY on ung-dung-thuc-te.html,
   after assets/css/go4ai.css and after the page's inline layout <style>.

   This file changes presentation only. It does not touch case content, numbers,
   video URLs, CTA text, case order or business logic.

   Motion language:  01 REVEAL · 02 FLOW · 03 DATA · 04 VERIFY
   ========================================================================= */

/* ── 0. SYSTEM TOKENS ───────────────────────────────────────────────────── */
:root {
  --acs-emerald:      #08906c;
  --acs-emerald-lt:   #34d399;
  --acs-emerald-dk:   #06694f;
  --acs-emerald-ink:  #05503c;

  --acs-dark-1:       #06110e;
  --acs-dark-2:       #091411;
  --acs-dark-3:       #0a1613;

  --acs-grid-lt:      rgba(8, 144, 108, 0.055);
  --acs-grid-dk:      rgba(52, 211, 153, 0.055);
  --acs-line-lt:      rgba(8, 144, 108, 0.16);
  --acs-line-dk:      rgba(52, 211, 153, 0.24);

  --acs-ease:         cubic-bezier(.22, .61, .36, 1);
  --acs-ease-out:     cubic-bezier(.16, 1, .3, 1);

  --acs-rail-w:       30px;
  --acs-rail-left:    max(6px, calc((100vw - 85rem) / 2 - 46px));
}

/* ── 1. HEADER — DARK SYSTEM SYNC ───────────────────────────────────────── */
/* Header styles for ung-dung-thuc-te are handled in go4ai.css */



/* ============================================================================
   2. HERO — DARK CINEMATIC AI SYSTEM
   ========================================================================= */
.app-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  align-items: center;
  min-height: min(84svh, 720px);
  padding: clamp(52px, 7vw, 96px) 0 clamp(44px, 5.5vw, 76px);
  background: var(--acs-dark-1);
  border-bottom: 1px solid rgba(52, 211, 153, 0.16);
  color: #e8f5f0;
}

/* depth layer 1 — technical grid + radial emerald glow (background) */
.acs-hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.acs-hero-bg__grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--acs-grid-dk) 1px, transparent 1px),
    linear-gradient(90deg, var(--acs-grid-dk) 1px, transparent 1px);
  background-size: 52px 52px;
  -webkit-mask-image: radial-gradient(ellipse 92% 78% at 50% 42%, #000 20%, transparent 82%);
  mask-image: radial-gradient(ellipse 92% 78% at 50% 42%, #000 20%, transparent 82%);
}
.acs-hero-bg__glow {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 62% 52% at 50% 30%, rgba(8, 144, 108, 0.24) 0%, transparent 66%),
    radial-gradient(ellipse 48% 42% at 12% 84%, rgba(6, 105, 79, 0.2) 0%, transparent 62%),
    radial-gradient(ellipse 44% 38% at 88% 74%, rgba(8, 144, 108, 0.14) 0%, transparent 64%);
}
.acs-hero-bg__beam {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(52, 211, 153, 0.22) 34%, rgba(52, 211, 153, 0.07) 70%, transparent);
}
.acs-hero-bg__vignette {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(3, 9, 7, 0.5) 0%, transparent 22%, transparent 74%, rgba(3, 9, 7, 0.72) 100%);
}

/* depth layer 2 — data lines (midground) */
.acs-hero-bg__lines {
  position: absolute;
  inset: 0;
  opacity: 0.85;
}
.acs-hero-bg__lines svg {
  width: 100%;
  height: 100%;
  display: block;
}
.acs-dataline {
  stroke: rgba(52, 211, 153, 0.2);
  stroke-width: 1;
  fill: none;
  stroke-dasharray: 3 7;
}
.acs-dataline--solid { stroke-dasharray: none; stroke: rgba(52, 211, 153, 0.1); }
.acs-dataline__node {
  fill: rgba(52, 211, 153, 0.55);
  animation: acsNodePulse 4.5s ease-in-out infinite;
}
.acs-dataline__node:nth-of-type(2) { animation-delay: 1.1s; }
.acs-dataline__node:nth-of-type(3) { animation-delay: 2.2s; }

@keyframes acsNodePulse {
  0%, 100% { opacity: 0.35; r: 2; }
  50%      { opacity: 0.95; r: 3.2; }
}

/* depth layer 3 — coordinate marks + faint system labels (foreground) */
.acs-coord,
.acs-syslabel {
  position: absolute;
  font-family: var(--font-mono);
  font-size: 0.5rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  white-space: nowrap;
  color: rgba(52, 211, 153, 0.4);
  z-index: 1;
}
.acs-syslabel { color: rgba(52, 211, 153, 0.5); letter-spacing: 0.24em; }

.acs-coord--tl { top: 26px; left: clamp(16px, 3vw, 40px); }
.acs-coord--tr { top: 26px; right: clamp(16px, 3vw, 40px); }
.acs-coord--bl { bottom: 18px; left: clamp(16px, 3vw, 40px); }
.acs-coord--br { bottom: 18px; right: clamp(16px, 3vw, 40px); }

.acs-syslabel--tl { top: 48px; left: clamp(16px, 3vw, 40px); }
.acs-syslabel--tr { top: 48px; right: clamp(16px, 3vw, 40px); }
.acs-syslabel--bl { bottom: 40px; left: clamp(16px, 3vw, 40px); }
.acs-syslabel--br { bottom: 40px; right: clamp(16px, 3vw, 40px); }

.acs-syslabel--br { color: rgba(110, 231, 183, 0.62); }

/* corner brackets */
.acs-hero-bg__brackets span {
  position: absolute;
  width: 22px;
  height: 22px;
  border: 1px solid rgba(52, 211, 153, 0.22);
}
.acs-hero-bg__brackets span:nth-child(1) { top: 26px; left: 26px; border-right: 0; border-bottom: 0; }
.acs-hero-bg__brackets span:nth-child(2) { top: 26px; right: 26px; border-left: 0; border-bottom: 0; }
.acs-hero-bg__brackets span:nth-child(3) { bottom: 26px; left: 26px; border-right: 0; border-top: 0; }
.acs-hero-bg__brackets span:nth-child(4) { bottom: 26px; right: 26px; border-left: 0; border-top: 0; }

/* ── Hero content ──────────────────────────────────────────────────────── */
.app-hero__inner {
  position: relative;
  z-index: 2;
  max-width: 940px;
}

.app-hero__eyebrow {
  background: rgba(8, 144, 108, 0.16);
  border: 1px solid rgba(52, 211, 153, 0.34);
  color: #a7f3d0;
  letter-spacing: 0.14em;
  padding: 6px 16px;
  margin-bottom: 22px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.app-hero__eyebrow .app-hero__dot {
  background: var(--acs-emerald-lt);
  box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.55);
  animation: acsStatusPulse 2.4s ease-out infinite;
}
@keyframes acsStatusPulse {
  0%   { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.5); }
  70%  { box-shadow: 0 0 0 8px rgba(52, 211, 153, 0); }
  100% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0); }
}

.app-hero__title {
  font-size: clamp(2rem, 4.6vw, 4rem);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.035em;
  color: #f4faf8;
  margin: 0 0 22px;
  text-wrap: balance;
}

.acs-line {
  display: block;
  overflow: hidden;
  padding: 0.14em 0.06em 0.2em;
  margin: -0.14em -0.06em -0.2em;
}
.acs-line__i {
  display: block;
  will-change: transform;
}
.acs-line--grad .acs-line__i {
  background: linear-gradient(112deg, #6ee7b7 0%, #34d399 32%, #08906c 72%, #059669 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  position: relative;
  padding-right: 0.06em;
}
.acs-line--grad .acs-line__i::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(105deg, transparent 26%, rgba(255, 255, 255, 0.34) 50%, transparent 74%);
  transform: translateX(-160%);
}
.acs-line--grad .acs-line__i.is--sweep::after {
  animation: acsHeadlineSweep 0.9s ease-out forwards;
}
@keyframes acsHeadlineSweep {
  0%   { transform: translateX(-160%); }
  100% { transform: translateX(160%); }
}

.app-hero__desc {
  color: rgba(226, 240, 236, 0.76);
  font-size: clamp(0.9688rem, 1.15vw, 1.125rem);
  line-height: 1.62;
  max-width: 760px;
  margin: 0 0 34px;
}

/* ============================================================================
   3. HERO DEPLOYMENT PIPELINE — AUTO ACTIVE
   ========================================================================= */
.app-flow-bar {
  position: relative;
  background: rgba(5, 18, 14, 0.72);
  border: 1px solid rgba(52, 211, 153, 0.22);
  border-radius: 12px;
  padding: 12px 18px;
  gap: 6px 8px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.app-flow-step {
  position: relative;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(52, 211, 153, 0.14);
  border-radius: 7px;
  color: rgba(226, 240, 236, 0.7);
  padding: 5px 11px;
  transition:
    background-color 0.35s var(--acs-ease),
    border-color 0.35s var(--acs-ease),
    color 0.35s var(--acs-ease),
    box-shadow 0.35s var(--acs-ease),
    transform 0.35s var(--acs-ease-out);
}
.app-flow-step__num {
  color: rgba(52, 211, 153, 0.62);
  transition: color 0.35s var(--acs-ease), text-shadow 0.35s var(--acs-ease);
}

.app-flow-step.is--active {
  background: rgba(8, 144, 108, 0.42);
  border-color: rgba(52, 211, 153, 0.85);
  color: #ffffff;
  transform: translateY(-1.5px);
  box-shadow:
    0 0 16px rgba(52, 211, 153, 0.3),
    inset 0 0 12px rgba(52, 211, 153, 0.16);
}
.app-flow-step.is--active .app-flow-step__num {
  color: #ffffff;
  text-shadow: 0 0 10px rgba(52, 211, 153, 0.85);
}

.app-flow-step--accent { color: rgba(167, 243, 208, 0.92); }
.app-flow-step--accent.is--active {
  border-color: #34d399;
  background: rgba(8, 144, 108, 0.56);
  box-shadow:
    0 0 26px rgba(52, 211, 153, 0.45),
    inset 0 0 16px rgba(52, 211, 153, 0.24);
}

.app-flow-sep {
  position: relative;
  display: inline-flex;
  align-items: center;
  color: rgba(52, 211, 153, 0.32);
  transition: color 0.3s var(--acs-ease), transform 0.3s var(--acs-ease-out), text-shadow 0.3s var(--acs-ease);
}
.app-flow-sep::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 4px;
  height: 4px;
  margin-top: -2px;
  border-radius: 50%;
  background: var(--acs-emerald-lt);
  box-shadow: 0 0 7px rgba(52, 211, 153, 0.9);
  opacity: 0;
  pointer-events: none;
}
.app-flow-sep.is--pulse {
  color: var(--acs-emerald-lt);
  transform: scale(1.22);
  text-shadow: 0 0 9px rgba(52, 211, 153, 0.9);
}
.app-flow-sep.is--pulse::before {
  animation: acsDataPulse 0.62s var(--acs-ease-out);
}
@keyframes acsDataPulse {
  0%   { opacity: 0; transform: translateX(-5px) scale(0.6); }
  24%  { opacity: 1; transform: translateX(0) scale(1); }
  100% { opacity: 0; transform: translateX(16px) scale(0.7); }
}

/* ============================================================================
   4. CASE INDEX RAIL — DESKTOP ONLY
   ========================================================================= */
.acs-rail {
  position: fixed;
  top: 50%;
  left: var(--acs-rail-left);
  transform: translateY(-50%);
  z-index: 60;
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: var(--acs-rail-w);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.45s var(--acs-ease), visibility 0.45s var(--acs-ease);
  pointer-events: none;
}
@media (min-width: 1200px) {
  .acs-rail { display: flex; }
  .acs-rail.is--visible { opacity: 1; visibility: visible; pointer-events: auto; }
}

.acs-rail__list {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 13px;
  margin: 0;
  padding: 6px 0;
  list-style: none;
}
.acs-rail__list::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 1px;
  margin-left: -0.5px;
  background: linear-gradient(180deg, transparent, rgba(8, 144, 108, 0.3) 14%, rgba(8, 144, 108, 0.3) 86%, transparent);
}
.acs-rail__fill {
  display: none;
}
.acs-rail__list::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 0;
  width: 1px;
  height: 100%;
  margin-left: -0.5px;
  background: linear-gradient(180deg, #34d399, #08906c);
  transform: scaleY(var(--acs-rail-fill, 0));
  transform-origin: top center;
  box-shadow: 0 0 8px rgba(52, 211, 153, 0.6);
  pointer-events: none;
}

.acs-rail__item {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 23px;
  height: 23px;
  border-radius: 50%;
  font-family: var(--font-mono);
  font-size: 0.5625rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-decoration: none;
  color: rgba(8, 144, 108, 0.62);
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(8, 144, 108, 0.2);
  box-shadow: 0 1px 5px rgba(6, 17, 14, 0.1);
  transition:
    background-color 0.35s var(--acs-ease),
    border-color 0.35s var(--acs-ease),
    color 0.35s var(--acs-ease),
    transform 0.35s var(--acs-ease-out),
    box-shadow 0.35s var(--acs-ease);
}
.acs-rail__item:hover {
  color: var(--acs-emerald-dk);
  border-color: rgba(8, 144, 108, 0.5);
  transform: scale(1.1);
}
.acs-rail__item.is--active {
  color: #ffffff;
  background: var(--acs-emerald-dk);
  border-color: var(--acs-emerald-lt);
  transform: scale(1.18);
  box-shadow: 0 0 14px rgba(52, 211, 153, 0.55);
}

.acs-rail__meta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  padding: 11px 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(8, 144, 108, 0.2);
  box-shadow: 0 1px 5px rgba(6, 17, 14, 0.1);
}
.acs-rail__dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--acs-emerald);
  animation: acsStatusPulse 2.4s ease-out infinite;
}
.acs-rail__count,
.acs-rail__status {
  writing-mode: vertical-rl;
  font-family: var(--font-mono);
  font-size: 0.5625rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  white-space: nowrap;
  color: var(--acs-emerald-dk);
}
.acs-rail__status { color: rgba(8, 144, 108, 0.8); }

/* 17.0 The rail now indexes 3 stages, so `__count` carries a short code
   ("TRAIN" / "DESIGN" / "ARCHITECT") instead of "CASE 01 / 07". In vertical
   writing mode the code and the status read as one run-on sentence, so the
   code gets its own tinted chip to separate the two labels. */
.acs-rail__meta { gap: 12px; }
.acs-rail__count {
  padding: 6px 3px;
  border-radius: 999px;
  background: rgba(8, 144, 108, 0.1);
  color: var(--acs-emerald-dk);
}
.acs-rail__status { color: rgba(8, 144, 108, 0.62); }

/* ============================================================================
   5. CASE LIBRARY — SCENE RHYTHM & DIVIDERS
   ========================================================================= */
.cs-library {
  position: relative;
  padding: 64px 0 88px;
}

/* thin emerald divider between cases */
.acs-divider {
  position: relative;
  display: grid;
  place-items: center;
  height: 34px;
}
.acs-divider span {
  display: block;
  width: 1px;
  height: 100%;
  background: linear-gradient(180deg, transparent, rgba(8, 144, 108, 0.34) 30%, rgba(8, 144, 108, 0.34) 70%, transparent);
}
.acs-divider::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 5px;
  height: 5px;
  margin: -2.5px 0 0 -2.5px;
  border-radius: 50%;
  background: rgba(8, 144, 108, 0.55);
  box-shadow: 0 0 0 3px rgba(8, 144, 108, 0.1);
}
@media (min-width: 992px) {
  .acs-divider { height: 58px; }
}

.cs-library .cs-case { margin-bottom: 0; }

/* ============================================================================
   6. CASE MODULE TREATMENT
   ========================================================================= */
.cs-case {
  --acs-case-tone: 0; /* 0 = light/pale, 1 = dark */
  position: relative;
  border-radius: var(--radius-card);
  isolation: auto;
}

/* subtle technical grid inside every case */
.cs-case::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-image:
    linear-gradient(var(--acs-grid-lt) 1px, transparent 1px),
    linear-gradient(90deg, var(--acs-grid-lt) 1px, transparent 1px);
  background-size: 46px 46px;
  -webkit-mask-image: radial-gradient(ellipse 88% 80% at 50% 44%, #000 18%, transparent 80%);
  mask-image: radial-gradient(ellipse 88% 80% at 50% 44%, #000 18%, transparent 80%);
  pointer-events: none;
  z-index: 0;
  opacity: 0.75;
}
.cs-case--dark::before,
.cs-case--dark-close::before {
  background-image:
    linear-gradient(var(--acs-grid-dk) 1px, transparent 1px),
    linear-gradient(90deg, var(--acs-grid-dk) 1px, transparent 1px);
  opacity: 1;
}

/* active trace line — draws once, top edge */
.cs-case::after {
  content: '';
  position: absolute;
  top: 0;
  left: 26px;
  right: 26px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--acs-emerald-lt), rgba(52, 211, 153, 0.24) 42%, transparent 88%);
  transform: scaleX(0);
  transform-origin: left center;
  pointer-events: none;
  z-index: 3;
}
.cs-case.is--active::after {
  transform: scaleX(0.3);
  transition: transform 1.1s var(--acs-ease-out) 0.15s;
}
.cs-case--dark::after,
.cs-case--dark-close::after {
  background: linear-gradient(90deg, #6ee7b7, rgba(52, 211, 153, 0.3) 42%, transparent 88%);
}

/* corner marks */
.acs-corners {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
}
.acs-corners i {
  position: absolute;
  width: 16px;
  height: 16px;
  border: 1px solid rgba(8, 144, 108, 0.24);
  opacity: 0;
  transition: opacity 0.7s var(--acs-ease) 0.25s;
}
.acs-corners i:nth-child(1) { top: 14px; left: 14px; border-right: 0; border-bottom: 0; }
.acs-corners i:nth-child(2) { top: 14px; right: 14px; border-left: 0; border-bottom: 0; }
.acs-corners i:nth-child(3) { bottom: 14px; left: 14px; border-right: 0; border-top: 0; }
.acs-corners i:nth-child(4) { bottom: 14px; right: 14px; border-left: 0; border-top: 0; }
.cs-case.is--active .acs-corners i { opacity: 1; }
.cs-case--dark .acs-corners i,
.cs-case--dark-close .acs-corners i { border-color: rgba(52, 211, 153, 0.34); }

/* system strip — CASE / 0X + deployment status */
.acs-case-meta {
  position: absolute;
  top: 20px;
  left: 28px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 0.5625rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(8, 144, 108, 0.7);
  pointer-events: none;
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 0.6s var(--acs-ease), transform 0.6s var(--acs-ease-out);
}
.cs-case.is--active .acs-case-meta { opacity: 1; transform: translateY(0); }
.acs-case-meta__sep {
  width: 14px;
  height: 1px;
  background: rgba(8, 144, 108, 0.4);
}
.acs-case-meta__status { color: rgba(8, 144, 108, 0.48); }
.cs-case--dark .acs-case-meta,
.cs-case--dark-close .acs-case-meta { color: rgba(110, 231, 183, 0.82); }
.cs-case--dark .acs-case-meta__sep,
.cs-case--dark-close .acs-case-meta__sep { background: rgba(52, 211, 153, 0.45); }
.cs-case--dark .acs-case-meta__status,
.cs-case--dark-close .acs-case-meta__status { color: rgba(110, 231, 183, 0.56); }

/* oversized decorative system index */
.cs-case__num-badge {
  top: -6px;
  right: clamp(14px, 2.4%, 42px);
  font-size: clamp(3.25rem, 8.5vw, 8.5rem);
  font-weight: 800;
  line-height: 0.82;
  letter-spacing: -0.07em;
  color: rgba(8, 144, 108, 0.07);
  z-index: 0;
  will-change: transform;
}
.cs-case--dark .cs-case__num-badge,
.cs-case--dark-close .cs-case__num-badge { color: rgba(52, 211, 153, 0.11); }

/* ── dark case = visual highlight ──────────────────────────────────────── */
.cs-case--dark {
  background:
    radial-gradient(ellipse 66% 58% at 80% 10%, rgba(8, 144, 108, 0.26) 0%, transparent 62%),
    radial-gradient(ellipse 58% 50% at 6% 90%, rgba(6, 105, 79, 0.2) 0%, transparent 60%),
    linear-gradient(150deg, #031e17 0%, #063428 55%, #021a14 100%);
  border: 1.5px solid rgba(8, 144, 108, 0.42);
  box-shadow: 0 24px 56px rgba(2, 30, 23, 0.34);
}
.cs-case--dark-close {
  background:
    radial-gradient(ellipse 62% 56% at 78% 12%, rgba(8, 144, 108, 0.2) 0%, transparent 62%),
    radial-gradient(ellipse 54% 48% at 10% 88%, rgba(6, 105, 79, 0.16) 0%, transparent 60%),
    linear-gradient(150deg, #071310 0%, #0c1a16 58%, #060f0c 100%);
  border: 1px solid rgba(8, 144, 108, 0.3);
  box-shadow: 0 24px 56px rgba(0, 0, 0, 0.34);
}

/* ============================================================================
   7. CASE TYPOGRAPHY — KINETIC REVEAL
   ========================================================================= */
.cs-case__header { position: relative; }

.acs-title-rule {
  position: absolute;
  left: 0;
  top: calc(100% + 3px);
  width: 104px;
  max-width: 44%;
  height: 2px;
  border-radius: 1px;
  background: linear-gradient(90deg, var(--acs-emerald-lt), rgba(52, 211, 153, 0.16) 72%, transparent);
  transform: scaleX(0);
  transform-origin: left center;
  pointer-events: none;
}
.cs-case--dark .acs-title-rule,
.cs-case--dark-close .acs-title-rule {
  background: linear-gradient(90deg, #6ee7b7, rgba(52, 211, 153, 0.2) 72%, transparent);
}

.cs-case__title {
  font-size: clamp(1.375rem, 1.95vw, 1.875rem) !important;
  line-height: 1.24 !important;
  letter-spacing: -0.025em;
  will-change: transform;
}

.case__tag {
  letter-spacing: 0.03em;
  transition: background-color 0.4s var(--acs-ease), border-color 0.4s var(--acs-ease), color 0.4s var(--acs-ease);
}
.cs-case--light .case__tag,
.cs-case--pale .case__tag {
  background-color: rgba(8, 144, 108, 0.09);
  border: 1px solid rgba(8, 144, 108, 0.22);
  color: var(--acs-emerald-dk);
}
.cs-case--dark .case__tag,
.cs-case--dark-close .case__tag {
  background-color: rgba(52, 211, 153, 0.12);
  border: 1px solid rgba(52, 211, 153, 0.34);
  color: #a7f3d0;
}

/* ============================================================================
   8. TIMELINE — SCROLL-ACTIVATED PROCESSING
   ========================================================================= */
.case-timeline { position: relative; }
.case-timeline::before { background-color: rgba(8, 144, 108, 0.16); }
.case-timeline--dark::before { background-color: rgba(52, 211, 153, 0.18); }

.acs-tl-fill {
  position: absolute;
  left: 4px;
  top: 8px;
  bottom: 12px;
  width: 2px;
  border-radius: 1px;
  background: linear-gradient(180deg, var(--acs-emerald-lt), var(--acs-emerald));
  transform: scaleY(0);
  transform-origin: top center;
  box-shadow: 0 0 8px rgba(8, 144, 108, 0.45);
  pointer-events: none;
  z-index: 0;
}
.case-timeline--dark .acs-tl-fill,
.cs-case--dark-close .acs-tl-fill {
  background: linear-gradient(180deg, #6ee7b7, var(--acs-emerald-lt));
  box-shadow: 0 0 10px rgba(52, 211, 153, 0.55);
}

.case-timeline__marker { z-index: 2; }

.case-timeline__item {
  transition: opacity 0.5s var(--acs-ease);
}
.case-timeline__item.is--past   { opacity: 0.62; }
.case-timeline__item.is--next   { opacity: 0.8; }
.case-timeline__item.is--active { opacity: 1; }

.case-timeline__item.is--active .case-timeline__dot {
  transform: scale(1.4);
  box-shadow:
    0 0 0 4px rgba(8, 144, 108, 0.16),
    0 0 14px rgba(8, 144, 108, 0.5);
}
.case-timeline--dark .case-timeline__item.is--active .case-timeline__dot,
.cs-case--dark-close .case-timeline__item.is--active .case-timeline__dot {
  box-shadow:
    0 0 0 4px rgba(52, 211, 153, 0.22),
    0 0 16px rgba(52, 211, 153, 0.65);
}
.case-timeline__item.is--active .case-timeline__label { color: var(--acs-emerald-ink); }
.case-timeline--dark .case-timeline__item.is--active .case-timeline__label,
.cs-case--dark-close .case-timeline__item.is--active .case-timeline__label { color: #a7f3d0; }

.case-timeline__item.is--active .case-timeline__text { color: var(--gray-800); }
.cs-case--dark .case-timeline__item.is--active .case-timeline__text,
.cs-case--dark-close .case-timeline__item.is--active .case-timeline__text { color: rgba(240, 245, 243, 0.95); }

/* ============================================================================
   9. WORKFLOW CHIPS — DATA FLOW SEQUENCE
   ========================================================================= */
.cs-flow-chip {
  transition:
    background-color 0.4s var(--acs-ease),
    border-color 0.4s var(--acs-ease),
    color 0.4s var(--acs-ease),
    box-shadow 0.4s var(--acs-ease),
    transform 0.4s var(--acs-ease-out) !important;
}
.cs-case--light .cs-flow-chip.is--active,
.cs-case--pale .cs-flow-chip.is--active {
  background: rgba(8, 144, 108, 0.24) !important;
  border-color: rgba(8, 144, 108, 0.7) !important;
  color: var(--acs-emerald-ink) !important;
  transform: translateY(-1.5px) !important;
  box-shadow: 0 0 14px rgba(8, 144, 108, 0.26) !important;
}
.cs-case--dark .cs-flow-chip.is--active,
.cs-case--dark-close .cs-flow-chip.is--active {
  background: rgba(52, 211, 153, 0.32) !important;
  border-color: var(--acs-emerald-lt) !important;
  color: #ffffff !important;
  transform: translateY(-1.5px) !important;
  box-shadow: 0 0 18px rgba(52, 211, 153, 0.42), inset 0 0 10px rgba(52, 211, 153, 0.16) !important;
}
.cs-case--light .cs-flow-chip.is--done,
.cs-case--pale .cs-flow-chip.is--done {
  background: rgba(8, 144, 108, 0.1) !important;
  border-color: rgba(8, 144, 108, 0.32) !important;
  color: var(--acs-emerald-dk) !important;
}
.cs-case--dark .cs-flow-chip.is--done,
.cs-case--dark-close .cs-flow-chip.is--done {
  background: rgba(52, 211, 153, 0.14) !important;
  border-color: rgba(52, 211, 153, 0.36) !important;
  color: #d1fae5 !important;
}

.cs-flow-arrow {
  transition: color 0.3s var(--acs-ease), transform 0.3s var(--acs-ease-out), text-shadow 0.3s var(--acs-ease);
}
.cs-flow-arrow.is--pulse {
  color: var(--acs-emerald-lt) !important;
  transform: scale(1.3);
  text-shadow: 0 0 9px rgba(52, 211, 153, 0.9);
}
.cs-case--light .cs-flow-arrow.is--pulse,
.cs-case--pale .cs-flow-arrow.is--pulse {
  color: var(--acs-emerald) !important;
  text-shadow: 0 0 9px rgba(8, 144, 108, 0.6);
}

/* ============================================================================
   10. DATA MOMENTS — METRICS
   ========================================================================= */
.cs-metric-chip {
  position: relative;
  overflow: hidden;
  background: rgba(8, 144, 108, 0.06) !important;
  border: 1px solid rgba(8, 144, 108, 0.2) !important;
  transition: border-color 0.4s var(--acs-ease), box-shadow 0.4s var(--acs-ease), transform 0.4s var(--acs-ease-out);
}
.cs-metric-chip::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 30%, rgba(52, 211, 153, 0.16) 50%, transparent 70%);
  transform: translateX(-130%);
  pointer-events: none;
}
.cs-metric-chip.is--scan::after { animation: acsChipScan 0.95s var(--acs-ease-out); }
@keyframes acsChipScan {
  0%   { transform: translateX(-130%); }
  100% { transform: translateX(130%); }
}
.cs-metric-chip.is--active {
  border-color: rgba(8, 144, 108, 0.5) !important;
  box-shadow: 0 0 18px rgba(8, 144, 108, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.6) !important;
  transform: translateY(-2px);
}
.cs-metric-chip__num {
  display: inline-block;
  font-variant-numeric: tabular-nums;
  will-change: transform;
}
.cs-metric-chip.is--active .cs-metric-chip__num {
  color: var(--acs-emerald-ink);
  text-shadow: 0 0 16px rgba(8, 144, 108, 0.28);
}

/* Case 03 — old → arrow → target */
.cs-sales-metric-card__from,
.cs-sales-metric-card__arrow,
.cs-sales-metric-card__to {
  display: inline-block;
  will-change: transform;
}
.cs-sales-metric-card__arrow.is--pulse {
  text-shadow: 0 0 12px rgba(52, 211, 153, 0.85);
}
.cs-sales-metric-card__to.is--pulsed {
  animation: acsTargetPulse 0.95s var(--acs-ease-out);
}
@keyframes acsTargetPulse {
  0%   { transform: scale(1); text-shadow: 0 0 0 rgba(52, 211, 153, 0); }
  45%  { transform: scale(1.09); text-shadow: 0 0 22px rgba(52, 211, 153, 0.85); }
  100% { transform: scale(1); text-shadow: 0 0 14px rgba(52, 211, 153, 0.35); }
}
.cs-sales-metric-card.is--active {
  border-color: rgba(52, 211, 153, 0.5);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 0 20px rgba(52, 211, 153, 0.14);
}

/* pipeline strip / hub flow — processing nodes */
.cs-pipeline__node,
.cs-hub-flow .cs-pipeline__node,
.cs-auto-flow__node {
  transition:
    background-color 0.4s var(--acs-ease),
    border-color 0.4s var(--acs-ease),
    color 0.4s var(--acs-ease),
    box-shadow 0.4s var(--acs-ease),
    transform 0.4s var(--acs-ease-out);
}
.cs-case--light .cs-pipeline__node.is--active,
.cs-case--pale .cs-pipeline__node.is--active {
  border-color: rgba(8, 144, 108, 0.5);
  color: var(--acs-emerald-ink);
  box-shadow: 0 0 14px rgba(8, 144, 108, 0.18);
  transform: translateY(-1.5px);
}
.cs-case--dark .cs-pipeline__node.is--active,
.cs-case--dark-close .cs-pipeline__node.is--active {
  border-color: rgba(52, 211, 153, 0.6);
  color: #ffffff;
  box-shadow: 0 0 16px rgba(52, 211, 153, 0.28);
  transform: translateY(-1.5px);
}
.cs-auto-flow__node.is--active {
  border-color: rgba(52, 211, 153, 0.65);
  color: #ffffff;
  background: rgba(52, 211, 153, 0.14);
  box-shadow: 0 0 16px rgba(52, 211, 153, 0.3);
}
.cs-auto-flow__node.is--active .cs-auto-flow__icon { opacity: 1; color: var(--acs-emerald-lt); }

/* ============================================================================
   11. MEDIA — STICKY PRESERVED, VISUAL ENHANCEMENT ONLY
   ========================================================================= */
.cs-case__media {
  /* sticky behaviour intentionally untouched (set by the page inline style) */
  z-index: 2;
}
.cs-case__media::before,
.cs-case__media::after {
  content: '';
  position: absolute;
  width: 14px;
  height: 14px;
  border: 1px solid rgba(8, 144, 108, 0.3);
  opacity: 0;
  transition: opacity 0.8s var(--acs-ease) 0.4s;
  pointer-events: none;
  z-index: 4;
}
.cs-case__media::before { top: -8px; left: -8px; border-right: 0; border-bottom: 0; }
.cs-case__media::after { bottom: -8px; right: -8px; border-left: 0; border-top: 0; }
.cs-case.is--active .cs-case__media::before,
.cs-case.is--active .cs-case__media::after { opacity: 1; }
.cs-case--dark .cs-case__media::before,
.cs-case--dark .cs-case__media::after,
.cs-case--dark-close .cs-case__media::before,
.cs-case--dark-close .cs-case__media::after { border-color: rgba(52, 211, 153, 0.42); }

.case-video-embed,
.case-video-card,
.case-image-card {
  box-shadow: 0 12px 34px rgba(6, 17, 14, 0.14);
}
.cs-case--light:hover .case-video-embed,
.cs-case--pale:hover .case-video-embed,
.cs-case--pale:hover .case-image-card {
  border-color: rgba(8, 144, 108, 0.42);
  box-shadow: 0 18px 42px rgba(8, 144, 108, 0.16);
}
.cs-case--dark .case-video-embed,
.cs-case--dark-close .case-video-embed,
.cs-case--dark-close:hover .case-image-card {
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.5);
}
.cs-case--dark .case-video-embed { border-color: rgba(52, 211, 153, 0.4); }

/* ============================================================================
   12. CTA — REVEAL LAST + INTERACTION
   ========================================================================= */
.case__action { padding-top: 10px; }

.case__action .link-arrow {
  position: relative;
  transform: translateY(0);
  transition:
    color 0.3s var(--acs-ease),
    gap 0.3s var(--acs-ease),
    border-color 0.3s var(--acs-ease),
    transform 0.35s var(--acs-ease-out);
}
.case__action .link-arrow::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, var(--acs-emerald-lt), rgba(52, 211, 153, 0.2) 70%, transparent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.4s var(--acs-ease);
}
.case__action .link-arrow svg { transition: transform 0.35s var(--acs-ease-out); }
.case__action .link-arrow:hover {
  color: var(--acs-emerald-dk);
  border-color: rgba(8, 144, 108, 0.3);
  transform: translateY(-2px);
}
.case__action .link-arrow:hover::after { transform: scaleX(1); }
.case__action .link-arrow:hover svg { transform: translateX(4px); }

.case__action .link-arrow--dark { color: #d1fae5; }
.case__action .link-arrow--dark:hover {
  color: #ffffff;
  border-color: rgba(52, 211, 153, 0.5);
}

/* CTA band — system finish */
.app-cta-band {
  position: relative;
  overflow: hidden;
  margin-top: 76px;
  background:
    radial-gradient(ellipse 60% 80% at 88% 12%, rgba(8, 144, 108, 0.24) 0%, transparent 62%),
    linear-gradient(150deg, #04120e 0%, #0a1a16 60%, #04100d 100%);
  border: 1px solid rgba(8, 144, 108, 0.34);
  border-radius: 16px;
}
.app-cta-band::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--acs-grid-dk) 1px, transparent 1px),
    linear-gradient(90deg, var(--acs-grid-dk) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: radial-gradient(ellipse 80% 90% at 70% 40%, #000 10%, transparent 78%);
  mask-image: radial-gradient(ellipse 80% 90% at 70% 40%, #000 10%, transparent 78%);
  pointer-events: none;
}
.app-cta-band__content,
.app-cta-band__action { position: relative; z-index: 1; }

/* ============================================================================
   13. MOTION GATE — initial states only when the motion layer is live
   `html.app-motion` is added in <head> and removed by the motion script when
   GSAP is unavailable or the user prefers reduced motion, so content is never
   trapped in a hidden state.
   ========================================================================= */
html.app-motion .acs-hero-bg__grid,
html.app-motion .acs-hero-bg__lines,
html.app-motion .acs-hero-bg__beam { opacity: 0; }

html.app-motion .acs-hero-seq,
html.app-motion .acs-line__i { opacity: 0; }

html.app-motion .app-flow-step,
html.app-motion .app-flow-sep { opacity: 0; }

html.app-motion .acs-corners i,
html.app-motion .acs-case-meta,
html.app-motion .acs-title-rule { opacity: 0; }

html.app-motion .cs-case:not(.is--revealed) .cs-case__media .case-video-embed,
html.app-motion .cs-case:not(.is--revealed) .cs-case__media .case-video-card,
html.app-motion .cs-case:not(.is--revealed) .cs-case__media .case-image-card {
  clip-path: inset(0 0 100% 0);
}

html.app-motion .cs-case:not(.is--revealed) .case-timeline,
html.app-motion .cs-case:not(.is--revealed) .case__action,
html.app-motion .cs-case:not(.is--revealed) .cs-case__metric-row,
html.app-motion .cs-case:not(.is--revealed) .cs-sales-impact,
html.app-motion .cs-case:not(.is--revealed) .cs-pipeline-strip,
html.app-motion .cs-case:not(.is--revealed) .cs-hub-impact,
html.app-motion .cs-case:not(.is--revealed) .cs-auto-flow {
  opacity: 0;
}

/* ============================================================================
   14. REDUCED MOTION — FINAL STATE, NO CYCLE
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
  html.app-motion .acs-hero-bg__grid,
  html.app-motion .acs-hero-bg__lines,
  html.app-motion .acs-hero-bg__beam,
  html.app-motion .acs-hero-seq,
  html.app-motion .acs-line__i,
  html.app-motion .app-flow-step,
  html.app-motion .app-flow-sep,
  html.app-motion .acs-corners i,
  html.app-motion .acs-case-meta,
  html.app-motion .acs-title-rule,
  html.app-motion .cs-case:not(.is--revealed) .case-timeline,
  html.app-motion .cs-case:not(.is--revealed) .case__action,
  html.app-motion .cs-case:not(.is--revealed) .cs-case__metric-row,
  html.app-motion .cs-case:not(.is--revealed) .cs-sales-impact,
  html.app-motion .cs-case:not(.is--revealed) .cs-pipeline-strip,
  html.app-motion .cs-case:not(.is--revealed) .cs-hub-impact,
  html.app-motion .cs-case:not(.is--revealed) .cs-auto-flow {
    opacity: 1;
  }
  html.app-motion .cs-case:not(.is--revealed) .cs-case__media .case-video-embed,
  html.app-motion .cs-case:not(.is--revealed) .cs-case__media .case-video-card,
  html.app-motion .cs-case:not(.is--revealed) .cs-case__media .case-image-card { clip-path: none; }
  html.app-motion .acs-title-rule { transform: scaleX(1); }
  html.app-motion .acs-tl-fill { opacity: 1; transform: scaleY(1); }

  .acs-rail__dot,
  .app-hero__eyebrow .app-hero__dot,
  .acs-dataline__node { animation: none !important; }
  .acs-hero-bg__lines { opacity: 0.85; }

  .case-timeline__item { opacity: 1 !important; }
  .acs-tl-fill { transform: scaleY(1); }
  .app-flow-sep { color: rgba(52, 211, 153, 0.55); }
}

/* ============================================================================
   15. RESPONSIVE
   ========================================================================= */

/* Tablet 992–1199 */
@media (min-width: 992px) and (max-width: 1199px) {
  .app-hero__title { font-size: clamp(2rem, 4.2vw, 3rem); }
  .acs-coord--tr,
  .acs-syslabel--tr { display: none; }
}

/* Tablet ≤ 991 */
@media (max-width: 991px) {
  .acs-rail { display: none !important; }

  .app-hero {
    min-height: auto;
    padding: 56px 0 60px;
  }
  .app-hero__title { font-size: clamp(1.875rem, 5.4vw, 2.75rem); }
  .app-hero__desc { margin-bottom: 28px; }

  .acs-coord,
  .acs-syslabel { font-size: 0.4375rem; letter-spacing: 0.16em; }
  .acs-coord--tr,
  .acs-coord--bl,
  .acs-syslabel--tr,
  .acs-syslabel--bl { display: none; }
  .acs-hero-bg__brackets span { width: 16px; height: 16px; }
  .acs-hero-bg__brackets span:nth-child(1) { top: 18px; left: 18px; }
  .acs-hero-bg__brackets span:nth-child(2) { top: 18px; right: 18px; }
  .acs-hero-bg__brackets span:nth-child(3) { bottom: 18px; left: 18px; }
  .acs-hero-bg__brackets span:nth-child(4) { bottom: 18px; right: 18px; }

  .cs-case__num-badge { font-size: clamp(3rem, 9vw, 5rem); top: -4px; right: 16px; }

  .acs-case-meta { top: 16px; left: 20px; font-size: 0.5rem; letter-spacing: 0.12em; }
  .acs-case-meta__status { display: none; }
  .acs-case-meta__sep { display: none; }

  .cs-case::after { left: 18px; right: 18px; }
  .acs-corners i { width: 12px; height: 12px; }
  .acs-corners i:nth-child(1) { top: 10px; left: 10px; }
  .acs-corners i:nth-child(2) { top: 10px; right: 10px; }
  .acs-corners i:nth-child(3) { bottom: 10px; left: 10px; }
  .acs-corners i:nth-child(4) { bottom: 10px; right: 10px; }

  .acs-divider { height: 34px; }

  .cs-case__media::before,
  .cs-case__media::after { display: none; }
}

/* Mobile ≤ 640 */
@media (max-width: 640px) {
  /* keep the system micro-labels clear of the eyebrow pill */
  .app-hero { padding: 70px 0 56px; }
  .app-hero__title { font-size: clamp(1.625rem, 7.6vw, 2.125rem); letter-spacing: -0.028em; }
  .app-hero__desc { font-size: 0.9375rem; line-height: 1.6; }

  .app-flow-bar {
    justify-content: flex-start;
    padding: 12px 14px;
    gap: 6px;
    border-radius: 12px;
  }
  .app-flow-step { font-size: 0.75rem; padding: 4px 9px; }
  .app-flow-step__num { font-size: 0.625rem; }
  .app-flow-sep { font-size: 0.6875rem; }

  .cs-library { padding: 44px 0 64px; }

  .cs-case__num-badge { font-size: clamp(2.5rem, 12vw, 3.5rem); right: 14px; }
  .acs-case-meta { top: 14px; left: 16px; font-size: 0.4375rem; letter-spacing: 0.1em; }
  .acs-title-rule { width: 78px; }

  .app-cta-band { margin-top: 52px; }
}

/* Very narrow — keep the system strip from colliding with the index */
@media (max-width: 420px) {
  .acs-case-meta { font-size: 0.40625rem; letter-spacing: 0.08em; }
  .cs-case__num-badge { font-size: 2.25rem; }
}

/* JS disabled — never leave anything hidden */
html:not(.has-js) .acs-case-meta,
html:not(.has-js) .acs-title-rule,
html:not(.has-js) .case__action,
html:not(.has-js) .case-timeline {
  opacity: 1;
}
html:not(.has-js) .acs-title-rule { transform: scaleX(1); }
html:not(.has-js) .acs-corners i { opacity: 1; }

/* ============================================================================
   16. FAIL-SAFE — STATIC FINAL STATE
   ----------------------------------------------------------------------------
   `html.app-motion-fallback` is set by the inline watchdog in <head> (and by
   app-case-system.js) whenever the motion layer is missing, blocked, errored or
   simply did not finish. It forces every motion element back to its final,
   visible form and uses !important so it also beats any inline style a
   half-finished GSAP timeline may have left behind.

   MOTION FAILURE ≠ PAGE FAILURE — no content element may stay at opacity 0.
   ========================================================================= */

/* 16a. Background depth layers */
html.app-motion-fallback .acs-hero-bg__grid,
html.app-motion-fallback .acs-hero-bg__glow,
html.app-motion-fallback .acs-hero-bg__beam {
  opacity: 1 !important;
  visibility: visible !important;
}
html.app-motion-fallback .acs-hero-bg__lines { opacity: 0.85 !important; visibility: visible !important; }

/* 16b. Hero sequence + case system chrome + case body blocks
       (opacity / visibility / transform / filter / clip-path all reset) */
html.app-motion-fallback .app-hero,
html.app-motion-fallback .acs-hero-seq,
html.app-motion-fallback .acs-line__i,
html.app-motion-fallback .app-hero__desc,
html.app-motion-fallback .app-flow-bar,
html.app-motion-fallback .acs-corners i,
html.app-motion-fallback .acs-case-meta,
html.app-motion-fallback .acs-title-rule,
html.app-motion-fallback .cs-case,
html.app-motion-fallback .cs-case__header,
html.app-motion-fallback .cs-case__title,
html.app-motion-fallback .cs-case__media,
html.app-motion-fallback .cs-case__media > *,
html.app-motion-fallback .cs-case__num-badge,
html.app-motion-fallback .case__tag,
html.app-motion-fallback .case-timeline,
html.app-motion-fallback .case-timeline__item,
html.app-motion-fallback .cs-flow-chip,
html.app-motion-fallback .cs-case__metric-row,
html.app-motion-fallback .cs-metric-chip,
html.app-motion-fallback .cs-metric-chip__num,
html.app-motion-fallback .cs-sales-impact,
html.app-motion-fallback .cs-sales-metric-card__from,
html.app-motion-fallback .cs-sales-metric-card__arrow,
html.app-motion-fallback .cs-sales-metric-card__to,
html.app-motion-fallback .cs-pipeline-strip,
html.app-motion-fallback .cs-hub-impact,
html.app-motion-fallback .cs-hub-impact-box,
html.app-motion-fallback .cs-sales-sync-badge,
html.app-motion-fallback .app-case-disclaimer,
html.app-motion-fallback .cs-auto-flow,
html.app-motion-fallback .acs-divider,
html.app-motion-fallback .case__action {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  filter: none !important;
  clip-path: none !important;
  -webkit-clip-path: none !important;
}

/* 16c. Pipeline steps — only ever opacity-gated, keep their active lift */
html.app-motion-fallback .app-flow-step,
html.app-motion-fallback .app-flow-sep {
  opacity: 1 !important;
  visibility: visible !important;
}

/* 16d. Timeline progress line — show the completed track */
html.app-motion-fallback .acs-tl-fill {
  opacity: 1 !important;
  visibility: visible !important;
  transform: scaleY(1) !important;
}

/* 16e. Case index rail — opacity/visibility only.
       Its translateY(-50%) centring must survive, so no transform reset. */
html.app-motion-fallback .acs-rail {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}
html.app-motion-fallback .acs-rail__list { --acs-rail-fill: 1; }
html.app-motion-fallback .acs-rail__item { opacity: 1 !important; visibility: visible !important; }

/* ============================================================================
   17. ENTERPRISE AI JOURNEY — JOURNEY OPENER + 3 STAGE SYSTEMS
   ----------------------------------------------------------------------------
   Presentation + motion only. Structure now shipped by the page:
     .jp-journey  →  .cs-stage--train  →  .cs-stage--design  →  .cs-stage--architect
   Each stage = __band (mood: light / deep emerald / near-black) + __cases
   (the existing case articles, byte-identical apart from removed numbering).

   Motion contract: every element below is visible in its final form with no
   JS and with no motion gate. `--jp-p` / `--cs-p` are progress values 0→1 that
   only the motion layer writes; at 0 the rail simply reads as "not started",
   nothing is hidden, nothing shifts.
   ========================================================================= */

/* the case library is a plain wrapper now — stages carry their own rhythm */
.cs-library { padding: 0; }

/* ── 17.1 JOURNEY OPENER — AI MATURITY MAP ─────────────────────────────── */
.jp-journey {
  --jp-p: 0;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(60px, 7.2vw, 104px) 0 clamp(52px, 5.8vw, 82px);
  background: linear-gradient(180deg, #f8fbfa 0%, #eef5f2 56%, var(--gray-50) 100%);
  border-bottom: 1px solid rgba(8, 144, 108, 0.14);
}
.jp-journey__bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.jp-journey__grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(8, 144, 108, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(8, 144, 108, 0.055) 1px, transparent 1px);
  background-size: 52px 52px;
  -webkit-mask-image: radial-gradient(ellipse 86% 76% at 20% 22%, #000 10%, transparent 80%);
  mask-image: radial-gradient(ellipse 86% 76% at 20% 22%, #000 10%, transparent 80%);
}
.jp-journey__glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 44% 50% at 10% 8%, rgba(8, 144, 108, 0.1) 0%, transparent 70%);
}
.jp-journey__head { position: relative; z-index: 1; max-width: 60rem; }
.jp-journey__title {
  margin: 0;
  font-family: var(--font-sans);
  font-size: clamp(1.875rem, 4.4vw, 3.125rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.035em;
  color: var(--black);
}
.jp-journey__desc {
  margin: 18px 0 0;
  max-width: 62ch;
  font-size: clamp(0.9375rem, 1.1vw, 1.0625rem);
  line-height: 1.62;
  color: var(--gray-600);
}

.jp-map {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 1.7vw, 22px);
  margin-top: clamp(34px, 4.2vw, 56px);
  padding-top: 44px;
}
.jp-map__rail { position: absolute; left: 0; right: 0; top: 21px; height: 2px; pointer-events: none; }
.jp-map__track {
  position: absolute;
  inset: 0;
  border-radius: 2px;
  background: linear-gradient(90deg,
    rgba(8, 144, 108, 0.08) 0%,
    rgba(8, 144, 108, 0.3) 14%,
    rgba(8, 144, 108, 0.3) 86%,
    rgba(8, 144, 108, 0.08) 100%);
}
.jp-map__fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 100%;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--acs-emerald), var(--acs-emerald-lt));
  box-shadow: 0 0 10px rgba(52, 211, 153, 0.45);
  transform: scaleX(var(--jp-p));
  transform-origin: left center;
}
.jp-map__packet {
  position: absolute;
  top: 50%;
  left: calc(var(--jp-p) * 100%);
  width: 8px;
  height: 8px;
  margin: -4px 0 0 -4px;
  border-radius: 50%;
  background: #fff;
  border: 1.5px solid var(--acs-emerald);
  box-shadow: 0 0 0 4px rgba(8, 144, 108, 0.16), 0 0 14px rgba(52, 211, 153, 0.7);
  opacity: 0;
  transition: opacity 0.35s var(--acs-ease);
}
.jp-journey.is--running .jp-map__packet,
.jp-journey.is--done .jp-map__packet { opacity: 1; }

.jp-node {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-width: 0;
  padding: 20px 22px 22px;
  border-radius: 0;
  background: none;
  border: 0;
  border-top: 1px solid rgba(8, 144, 108, 0.2);
  transition: border-color 0.5s var(--acs-ease);
}
.jp-node__port {
  position: absolute;
  left: 50%;
  top: -4px;
  width: 7px;
  height: 7px;
  margin-left: -3.5px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid rgba(8, 144, 108, 0.4);
  transition:
    background-color 0.45s var(--acs-ease),
    border-color 0.45s var(--acs-ease),
    box-shadow 0.45s var(--acs-ease);
}
.jp-node__port::before {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 100%;
  width: 1px;
  height: 40px;
  margin-left: -0.5px;
  background: linear-gradient(180deg, rgba(8, 144, 108, 0.05), rgba(8, 144, 108, 0.4));
}
.jp-node__top { display: flex; align-items: baseline; gap: 10px; }
.jp-node__idx {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--gray-600);
  transition: color 0.45s var(--acs-ease);
}
.jp-node__code {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--gray-600);
  transition: color 0.45s var(--acs-ease);
}
.jp-node.is--active .jp-node__code { color: var(--green-700); }
.jp-node__label {
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.02em;
  color: var(--black);
  overflow-wrap: anywhere;
}
.jp-node__scope {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.12em;
  color: var(--gray-600);
}
.jp-node.is--active { border-top-color: var(--acs-emerald); }
.jp-node.is--active .jp-node__idx { color: var(--green-700); }
.jp-node.is--active .jp-node__port {
  background: var(--acs-emerald);
  border-color: var(--acs-emerald-lt);
  box-shadow: 0 0 10px rgba(52, 211, 153, 0.7);
}
.jp-node:focus-visible { outline: 2px solid var(--acs-emerald); outline-offset: 3px; }

/* ── 17.2 STAGE BAND — one mood per stage ──────────────────────────────── */
.cs-stage {
  --cs-p: 0;
  --cs-stub: 34px;
  position: relative;
  isolation: isolate;
}
.cs-stage__band {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(52px, 6.2vw, 88px) 0 clamp(46px, 5.4vw, 74px);
}
.cs-stage__bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.cs-stage__grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--cs-grid-c, rgba(8, 144, 108, 0.055)) 1px, transparent 1px),
    linear-gradient(90deg, var(--cs-grid-c, rgba(8, 144, 108, 0.055)) 1px, transparent 1px);
  background-size: 52px 52px;
  -webkit-mask-image: radial-gradient(ellipse 88% 92% at 50% 0%, #000 8%, transparent 84%);
  mask-image: radial-gradient(ellipse 88% 92% at 50% 0%, #000 8%, transparent 84%);
}
.cs-stage__band > .padding-global { position: relative; z-index: 1; }

/* STAGE 01 — light / technical */
.cs-stage--train .cs-stage__band {
  background: linear-gradient(180deg, #ffffff 0%, #f4faf7 54%, #edf4f1 100%);
}
/* STAGE 02 — dark / deep emerald */
.cs-stage--design .cs-stage__band {
  --cs-grid-c: rgba(52, 211, 153, 0.055);
  --cs-track: rgba(52, 211, 153, 0.2);
  background:
    radial-gradient(ellipse 68% 58% at 78% 6%, rgba(8, 144, 108, 0.3) 0%, transparent 62%),
    radial-gradient(ellipse 58% 50% at 4% 92%, rgba(6, 105, 79, 0.24) 0%, transparent 60%),
    linear-gradient(155deg, #03170f 0%, #06301f 52%, #04190f 100%);
  color: #e8f5f0;
}
/* STAGE 03 — near-black */
.cs-stage--architect .cs-stage__band {
  --cs-grid-c: rgba(52, 211, 153, 0.05);
  --cs-track: rgba(52, 211, 153, 0.18);
  background:
    radial-gradient(ellipse 64% 56% at 50% 0%, rgba(8, 144, 108, 0.22) 0%, transparent 64%),
    linear-gradient(180deg, #050f0c 0%, #081613 56%, #030c09 100%);
  color: #e8f5f0;
}

/* ── 17.3 STAGE HEAD ───────────────────────────────────────────────────── */
.cs-stage__head {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: clamp(26px, 3.2vw, 58px);
  align-items: start;
}
.cs-stage__headmain {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(14px, 1.9vw, 28px);
  align-items: start;
}
.cs-stage__num {
  font-family: var(--font-sans);
  font-size: clamp(2.25rem, 3.5vw, 3.125rem);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--acs-emerald);
}
.cs-stage--design .cs-stage__num,
.cs-stage--architect .cs-stage__num { color: var(--acs-emerald-lt); }
.cs-stage__headtext { display: flex; flex-direction: column; gap: 9px; min-width: 0; }
.cs-stage__eyebrow {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  color: var(--acs-emerald-dk);
}
.cs-stage--design .cs-stage__eyebrow,
.cs-stage--architect .cs-stage__eyebrow { color: #6ee7b7; }
.cs-stage__title {
  margin: 0;
  font-family: var(--font-sans);
  font-size: clamp(1.5rem, 2.45vw, 2.125rem);
  font-weight: 700;
  line-height: 1.16;
  letter-spacing: -0.03em;
  color: var(--black);
}
.cs-stage--design .cs-stage__title,
.cs-stage--architect .cs-stage__title { color: #e8f5f0; }
.cs-stage__desc {
  margin: 1px 0 0;
  max-width: 60ch;
  font-size: clamp(0.9375rem, 1.02vw, 1.03125rem);
  line-height: 1.62;
  color: var(--gray-600);
}
.cs-stage--design .cs-stage__desc,
.cs-stage--architect .cs-stage__desc { color: rgba(232, 245, 240, 0.74); }

/* ── 17.4 STAGE PANEL — CẤP ĐỘ AI / ĐI TỪ / CA THỰC TẾ ─────────────────── */
.cs-stage__panel {
  display: grid;
  gap: 15px;
  padding: 21px 22px 23px;
  border-radius: 16px;
  background: #fff;
  border: 1px solid rgba(8, 144, 108, 0.18);
  box-shadow: 0 1px 2px rgba(6, 17, 14, 0.04);
}
.cs-stage--design .cs-stage__panel,
.cs-stage--architect .cs-stage__panel {
  background: rgba(4, 20, 15, 0.62);
  border-color: rgba(52, 211, 153, 0.24);
  box-shadow: none;
}
.cs-stage__panel-row { display: grid; gap: 5px; min-width: 0; }
.cs-stage__panel-key {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  color: var(--green-700);
}
.cs-stage--design .cs-stage__panel-key,
.cs-stage--architect .cs-stage__panel-key { color: rgba(110, 231, 183, 0.78); }
.cs-stage__panel-val {
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--black);
  overflow-wrap: anywhere;
}
.cs-stage--design .cs-stage__panel-val,
.cs-stage--architect .cs-stage__panel-val { color: #e8f5f0; }
.cs-stage__panel-link {
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--green-700);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color 0.3s var(--acs-ease);
}
.cs-stage__panel-link:hover { color: var(--acs-emerald); }
.cs-stage--design .cs-stage__panel-link,
.cs-stage--architect .cs-stage__panel-link { color: #6ee7b7; }
.cs-stage--design .cs-stage__panel-link:hover,
.cs-stage--architect .cs-stage__panel-link:hover { color: #a7f3d0; }
.cs-stage__panel-link:focus-visible { outline: 2px solid var(--acs-emerald-lt); outline-offset: 3px; }

/* ── 17.5 STAGE SYSTEM — visual + shared rail + modules ────────────────── */
.cs-stage__system { position: relative; margin-top: clamp(30px, 3.4vw, 46px); }

.cs-visual { position: relative; }
.cs-visual--train { display: flex; align-items: center; gap: 12px; }
.cs-visual__tag {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--green-700);
}
.cs-visual__rule {
  flex: 1 1 auto;
  height: 1px;
  background: linear-gradient(90deg, rgba(8, 144, 108, 0.34), rgba(8, 144, 108, 0.04));
}
.cs-visual__note {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.12em;
  color: var(--gray-600);
}
.cs-visual--design .cs-flow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
}
/* on desktop the six steps span the same width as the rail below them, so the
   process reads as one system rather than a cluster on the left */
@media (min-width: 992px) {
  .cs-visual--design .cs-flow {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 10px;
  }
  .cs-flowstep { justify-self: stretch; text-align: center; }
}
.cs-flowstep {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  line-height: 1.35;
  padding: 0;
  border-radius: 0;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: rgba(167, 243, 208, 0.75);
  background: none;
  border: 0;
  transition: color 0.45s var(--acs-ease);
}
/* node marker, same language as the module labels */
.cs-flowstep::before {
  content: '';
  flex: 0 0 auto;
  width: 5px;
  height: 5px;
  background: rgba(52, 211, 153, 0.4);
  transition: background-color 0.45s var(--acs-ease), box-shadow 0.45s var(--acs-ease);
}
.cs-flowstep.is--on { color: #ffffff; }
.cs-flowstep.is--on::before {
  background: var(--acs-emerald-lt);
  box-shadow: 0 0 8px rgba(52, 211, 153, 0.8);
}
/* the QC gate is the only step that keeps a pulse — it is the human checkpoint */
.cs-flowstep--qc.is--on::before { animation: csQcPulse 1.9s var(--acs-ease) infinite; }
@keyframes csQcPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.55), 0 0 8px rgba(52, 211, 153, 0.6); }
  55%      { box-shadow: 0 0 0 8px rgba(52, 211, 153, 0), 0 0 8px rgba(52, 211, 153, 0.6); }
}
.cs-visual--architect { display: grid; place-items: center; }
.cs-core {
  position: relative;
  display: grid;
  place-items: center;
  width: 84px;
  height: 84px;
  border-radius: 50%;
  border: 1px solid rgba(52, 211, 153, 0.3);
  background: radial-gradient(circle at 50% 42%, rgba(8, 144, 108, 0.34) 0%, rgba(4, 20, 15, 0.24) 62%, transparent 100%);
}
.cs-core__label {
  font-family: var(--font-mono);
  font-size: 0.5625rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: #6ee7b7;
}
.cs-core__ring {
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 1px solid rgba(52, 211, 153, 0.32);
  opacity: 0;
  transform: scale(0.72);
}
.cs-stage.is--running .cs-core__ring,
.cs-stage.is--done .cs-core__ring { animation: csCoreRing 3.6s var(--acs-ease) infinite; }
.cs-stage.is--running .cs-core__ring--b,
.cs-stage.is--done .cs-core__ring--b { animation-delay: 1.8s; }
@keyframes csCoreRing {
  0%   { opacity: 0.5; transform: scale(0.72); }
  70%  { opacity: 0;   transform: scale(1.16); }
  100% { opacity: 0;   transform: scale(1.16); }
}
.cs-core__stem {
  position: absolute;
  left: 50%;
  top: 100%;
  width: 1px;
  height: 22px;
  margin-left: -0.5px;
  background: linear-gradient(180deg, rgba(52, 211, 153, 0.5), rgba(52, 211, 153, 0.06));
}

/* shared rail — horizontal line above the module row on desktop */
.cs-rail {
  position: relative;
  height: 2px;
  margin-top: 22px;
}
.cs-rail__track {
  position: absolute;
  inset: 0;
  border-radius: 2px;
  background: var(--cs-track, rgba(8, 144, 108, 0.14));
}
.cs-rail__fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 100%;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--acs-emerald), var(--acs-emerald-lt));
  box-shadow: 0 0 10px rgba(52, 211, 153, 0.4);
  transform: scaleX(var(--cs-p));
  transform-origin: left center;
}
.cs-rail__packet {
  position: absolute;
  top: 50%;
  left: calc(var(--cs-p) * 100%);
  width: 8px;
  height: 8px;
  margin: -4px 0 0 -4px;
  border-radius: 50%;
  background: #fff;
  border: 1.5px solid var(--acs-emerald);
  box-shadow: 0 0 0 4px rgba(8, 144, 108, 0.14), 0 0 14px rgba(52, 211, 153, 0.65);
  opacity: 0;
  transition: opacity 0.35s var(--acs-ease);
}
.cs-stage.is--running .cs-rail__packet,
.cs-stage.is--done .cs-rail__packet { opacity: 1; }
.cs-stage--design .cs-rail__packet,
.cs-stage--architect .cs-rail__packet {
  background: #06231a;
  border-color: var(--acs-emerald-lt);
  box-shadow: 0 0 0 4px rgba(52, 211, 153, 0.16), 0 0 14px rgba(52, 211, 153, 0.7);
}
.cs-stage--architect .cs-rail::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 7px;
  height: 7px;
  margin: -3.5px 0 0 -3.5px;
  border-radius: 50%;
  background: #6ee7b7;
  box-shadow: 0 0 12px rgba(52, 211, 153, 0.7);
}

/* ── 17.6 PROGRAM MODULES ──────────────────────────────────────────────── */
.cs-mods {
  display: grid;
  grid-template-columns: repeat(var(--cs-mod-cols, 3), minmax(0, 1fr));
  gap: clamp(12px, 1.3vw, 18px);
  margin-top: var(--cs-stub);
}
.cs-stage--train     { --cs-mod-cols: 5; }
.cs-stage--design    { --cs-mod-cols: 3; }
.cs-stage--architect { --cs-mod-cols: 2; }

/* Modules are SYSTEM NODES on the bus, not cards. The brief rules out the
   screenshot's card layout and "excessive rectangular cards", so the panel
   chrome is gone: what remains is a hairline top rule that the rail's stub
   drops onto, plus the port dot as the node marker. Markup and content order
   are untouched — only the chrome. */
.cs-mod {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  padding: 22px 20px 20px;
  border-radius: 0;
  background: none;
  border: 0;
  border-top: 1px solid rgba(8, 144, 108, 0.2);
  transition: border-color 0.5s var(--acs-ease);
}
.cs-stage--design .cs-mod,
.cs-stage--architect .cs-mod {
  background: none;
  border-top-color: rgba(52, 211, 153, 0.22);
}
.cs-mod.is--on { border-top-color: var(--acs-emerald); }
.cs-stage--design .cs-mod.is--on,
.cs-stage--architect .cs-mod.is--on { border-top-color: var(--acs-emerald-lt); }
.cs-mod__port {
  position: absolute;
  left: 50%;
  top: -4px;
  width: 7px;
  height: 7px;
  margin-left: -3.5px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid rgba(8, 144, 108, 0.4);
  z-index: 3;
  transition:
    background-color 0.45s var(--acs-ease),
    border-color 0.45s var(--acs-ease),
    box-shadow 0.45s var(--acs-ease);
}
.cs-mod__port::before {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 100%;
  width: 1px;
  height: var(--cs-stub);
  margin-left: -0.5px;
  background: linear-gradient(180deg, rgba(8, 144, 108, 0.05), rgba(8, 144, 108, 0.42));
}
.cs-stage--design .cs-mod__port,
.cs-stage--architect .cs-mod__port { background: #05130f; border-color: rgba(52, 211, 153, 0.4); }
.cs-stage--design .cs-mod__port::before,
.cs-stage--architect .cs-mod__port::before {
  background: linear-gradient(180deg, rgba(52, 211, 153, 0.04), rgba(52, 211, 153, 0.45));
}
.cs-mod.is--on .cs-mod__port {
  background: var(--acs-emerald);
  border-color: var(--acs-emerald-lt);
  box-shadow: 0 0 10px rgba(52, 211, 153, 0.75);
}
.cs-stage--design .cs-mod.is--on .cs-mod__port,
.cs-stage--architect .cs-mod.is--on .cs-mod__port {
  background: var(--acs-emerald-lt);
  border-color: #a7f3d0;
}
/* the eyebrow is a mono system label, not a pill — pills read as card chrome */
.cs-mod__eyebrow {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  line-height: 1.4;
  padding: 0;
  border-radius: 0;
  color: var(--gray-600);
  background: none;
  border: 0;
  overflow-wrap: anywhere;
}
/* small square marker before the label — a node marker, echoing the port */
.cs-mod__eyebrow::before {
  content: '';
  flex: 0 0 auto;
  width: 5px;
  height: 5px;
  background: rgba(8, 144, 108, 0.42);
  transition: background-color 0.45s var(--acs-ease);
}
.cs-mod.is--on .cs-mod__eyebrow { color: var(--acs-emerald-dk); }
.cs-mod.is--on .cs-mod__eyebrow::before { background: var(--acs-emerald); }
.cs-stage--design .cs-mod__eyebrow,
.cs-stage--architect .cs-mod__eyebrow {
  color: rgba(167, 243, 208, 0.75);
  background: none;
  border: 0;
}
.cs-stage--design .cs-mod__eyebrow::before,
.cs-stage--architect .cs-mod__eyebrow::before { background: rgba(52, 211, 153, 0.4); }
.cs-stage--design .cs-mod.is--on .cs-mod__eyebrow,
.cs-stage--architect .cs-mod.is--on .cs-mod__eyebrow { color: #a7f3d0; }
.cs-stage--design .cs-mod.is--on .cs-mod__eyebrow::before,
.cs-stage--architect .cs-mod.is--on .cs-mod__eyebrow::before { background: var(--acs-emerald-lt); }
.cs-mod__badge {
  align-self: flex-start;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.3;
  padding: 5px 11px;
  border-radius: 999px;
  color: #fff;
  background: var(--acs-emerald-dk);
  border: 1px solid var(--acs-emerald);
}
.cs-stage--design .cs-mod__badge,
.cs-stage--architect .cs-mod__badge {
  background: rgba(8, 144, 108, 0.9);
  border-color: var(--acs-emerald-lt);
  color: #ecfdf5;
}
.cs-mod__title {
  margin: 2px 0 0;
  font-family: var(--font-sans);
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.28;
  letter-spacing: -0.02em;
  color: var(--black);
  overflow-wrap: anywhere;
}
.cs-stage--design .cs-mod__title,
.cs-stage--architect .cs-mod__title { color: #e8f5f0; }
.cs-mod__desc { margin: 0; font-size: 0.875rem; line-height: 1.6; color: var(--gray-600); }
.cs-stage--design .cs-mod__desc,
.cs-stage--architect .cs-mod__desc { color: rgba(232, 245, 240, 0.68); }
.cs-mod__list { margin: 2px 0 0; padding: 0; list-style: none; display: grid; gap: 7px; }
.cs-mod__list li {
  position: relative;
  padding-left: 16px;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--gray-700);
}
.cs-mod__list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.48em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--acs-emerald);
}
.cs-stage--design .cs-mod__list li,
.cs-stage--architect .cs-mod__list li { color: rgba(232, 245, 240, 0.78); }
.cs-stage--design .cs-mod__list li::before,
.cs-stage--architect .cs-mod__list li::before { background: var(--acs-emerald-lt); }
/* Case CTA. This used to be a bare text link with no surface of its own, which
   is why it read as low-priority next to the module copy. It is now an
   OUTLINED emerald action so it stays clearly subordinate to the coral
   consultation buttons (the conversion CTA) while still being visible without
   hover: tinted fill + a real border + heavier weight.
   Text, href and behaviour are untouched — only the surface is new. */
.cs-mod__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  margin-top: auto;
  padding: 11px 18px;
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.25;
  text-wrap: balance;
  text-decoration: none;
  border: 1.5px solid rgba(8, 144, 108, 0.42);
  border-radius: 999px;
  background: rgba(8, 144, 108, 0.08);
  color: var(--green-700);
  transition: background-color 0.3s var(--acs-ease), border-color 0.3s var(--acs-ease),
              color 0.3s var(--acs-ease), transform 0.3s var(--acs-ease),
              box-shadow 0.3s var(--acs-ease);
}
.cs-mod__cta svg { flex: 0 0 auto; transition: transform 0.3s var(--acs-ease-out); }
.cs-mod__cta:hover {
  background: rgba(8, 144, 108, 0.15);
  border-color: var(--acs-emerald);
  color: var(--acs-emerald-ink);
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(8, 144, 108, 0.18);
}
.cs-mod__cta:hover svg { transform: translateX(3px); }
.cs-stage--design .cs-mod__cta,
.cs-stage--architect .cs-mod__cta {
  background: rgba(52, 211, 153, 0.12);
  border-color: rgba(52, 211, 153, 0.5);
  color: #6ee7b7;
}
.cs-stage--design .cs-mod__cta:hover,
.cs-stage--architect .cs-mod__cta:hover {
  background: rgba(52, 211, 153, 0.2);
  border-color: var(--acs-emerald-lt);
  color: #a7f3d0;
  box-shadow: 0 6px 18px rgba(8, 144, 108, 0.3);
}
.cs-mod__cta:focus-visible { outline: 2px solid var(--acs-emerald); outline-offset: 3px; border-radius: 999px; }

/* ── 17.7 CASE GROUP INSIDE A STAGE ────────────────────────────────────── */
.cs-stage__cases { position: relative; padding-bottom: clamp(30px, 3.6vw, 52px); }
.cs-stage__cases > .acs-divider { height: 44px; }
@media (min-width: 992px) {
  .cs-stage__cases > .acs-divider { height: 62px; }
}

/* ── 17.8 TABLET / MOBILE — vertical journey, same logic ───────────────── */
@media (max-width: 991px) {
  .cs-stage--train,
  .cs-stage--design,
  .cs-stage--architect { --cs-mod-cols: 1; }

  .cs-stage__head { grid-template-columns: minmax(0, 1fr); gap: 24px; }

  .jp-map { grid-template-columns: minmax(0, 1fr); gap: 14px; padding-top: 0; padding-left: 32px; }
  .jp-map__rail { left: 0; top: 0; bottom: 0; width: 2px; height: auto; }
  .jp-map__track {
    background: linear-gradient(180deg,
      rgba(8, 144, 108, 0.08) 0%,
      rgba(8, 144, 108, 0.3) 12%,
      rgba(8, 144, 108, 0.3) 88%,
      rgba(8, 144, 108, 0.08) 100%);
  }
  .jp-map__fill {
    width: 100%;
    height: 100%;
    transform: scaleY(var(--jp-p));
    transform-origin: top center;
    background: linear-gradient(180deg, var(--acs-emerald), var(--acs-emerald-lt));
  }
  .jp-map__packet { left: 50%; top: calc(var(--jp-p) * 100%); margin: -4px 0 0 -4px; }
  .jp-node { padding: 18px 18px 20px; }
  /* the port sits on the node's top rule at every breakpoint; only the stub
     direction changes (up to the bus on desktop, left to the rail on mobile) */
  .jp-node__port { left: 0; top: -4px; margin: -3.5px 0 0 -3.5px; }
  .jp-node__port::before {
    left: auto;
    right: 100%;
    bottom: auto;
    top: 50%;
    width: 28px;
    height: 1px;
    margin: -0.5px 0 0 0;
    background: linear-gradient(270deg, rgba(8, 144, 108, 0.4), rgba(8, 144, 108, 0.05));
  }

  .cs-stage__system { padding-left: 32px; }
  .cs-rail {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 2px;
    height: auto;
    margin-top: 0;
  }
  .cs-rail__fill {
    width: 100%;
    height: 100%;
    transform: scaleY(var(--cs-p));
    transform-origin: top center;
    background: linear-gradient(180deg, var(--acs-emerald), var(--acs-emerald-lt));
  }
  .cs-rail__packet { left: 50%; top: calc(var(--cs-p) * 100%); margin: -4px 0 0 -4px; }
  .cs-visual--architect { justify-items: start; }
  .cs-core { width: 72px; height: 72px; }
  /* the vertical rail carries the connection on small screens — the stem
     would dangle in empty space next to the core */
  .cs-core__stem { display: none; }
  .cs-mods { margin-top: 20px; gap: 14px; }
  .cs-mod { padding: 20px 18px 18px; }
  .cs-mod__port { left: 0; top: -4px; margin: -3.5px 0 0 -3.5px; }
  .cs-mod__port::before {
    left: auto;
    right: 100%;
    bottom: auto;
    top: 50%;
    width: 28px;
    height: 1px;
    margin: -0.5px 0 0 0;
    background: linear-gradient(270deg, rgba(8, 144, 108, 0.42), rgba(8, 144, 108, 0.05));
  }
  .cs-stage--design .cs-mod__port::before,
  .cs-stage--architect .cs-mod__port::before {
    background: linear-gradient(270deg, rgba(52, 211, 153, 0.45), rgba(52, 211, 153, 0.04));
  }
  .cs-mod__cta { padding: 10px 16px; }
}

@media (max-width: 479px) {
  .cs-stage__headmain { gap: 12px; }
  .cs-stage__num { font-size: 2rem; }
  .cs-flowstep { font-size: 0.5625rem; padding: 6px 9px; letter-spacing: 0.1em; }
  .jp-journey__desc { font-size: 0.9375rem; }
}

/* 992–1199px: stage 01 still holds its five modules in a single row (the rail
   only makes sense as one row), so the cards get tighter type to breathe. */
@media (min-width: 992px) and (max-width: 1199px) {
  .cs-stage--train .cs-mod { padding: 18px 16px 16px; gap: 9px; }
  .cs-stage--train .cs-mod__eyebrow {
    font-size: 0.5625rem;
    letter-spacing: 0.08em;
  }
  .cs-stage--train .cs-mod__badge {
    font-size: 0.5625rem;
    letter-spacing: 0.02em;
    padding: 4px 9px;
  }
  .cs-stage--train .cs-mod__title { font-size: 0.9375rem; }
  .cs-stage--train .cs-mod__desc,
  .cs-stage--train .cs-mod__list li,
  .cs-stage--train .cs-mod__cta { font-size: 0.8125rem; }
  /* five modules still share one row here — keep the new button surface from
     pushing the CTA onto a second line */
  .cs-stage--train .cs-mod__cta { padding: 9px 13px; gap: 6px; }
  .cs-stage--train .cs-mod__cta svg { width: 14px; height: 14px; }
}

/* ── 17.9 STATIC FINAL STATE (reduced motion + motion fallback) ────────── */
@media (prefers-reduced-motion: reduce) {
  .jp-journey { --jp-p: 1; }
  .cs-stage { --cs-p: 1; }
  .jp-journey .jp-map__packet,
  .cs-stage .cs-rail__packet { opacity: 0; }
  /* the QC pulse lives on the marker's ::before — targeting the element would
     silently leave the loop running for exactly the users who asked it not to */
  .cs-flowstep--qc.is--on::before,
  .cs-stage.is--running .cs-core__ring,
  .cs-stage.is--done .cs-core__ring { animation: none; }
}
html.app-motion-fallback .jp-journey { --jp-p: 1; }
html.app-motion-fallback .cs-stage { --cs-p: 1; }
html.app-motion-fallback .jp-journey .jp-map__packet,
html.app-motion-fallback .cs-stage .cs-rail__packet { opacity: 0 !important; }
html.app-motion-fallback .jp-node,
html.app-motion-fallback .cs-mod { opacity: 1 !important; visibility: visible !important; }
html.app-motion-fallback .cs-flowstep { opacity: 1 !important; visibility: visible !important; }
html.app-motion-fallback .cs-flowstep--qc.is--on::before { animation: none !important; }

/* Cross-page deep links land here: the faculty page's "Chương trình: Chặng 0X"
   CTAs point at #chang-0X. Without a scroll margin the browser puts the stage's
   top edge at viewport y=0, which is underneath the sticky `.site-header`
   (measured 81px desktop / 65px mobile), so the stage number, eyebrow and title
   were all hidden on arrival. */
.cs-stage { scroll-margin-top: 96px; }
@media (max-width: 767px) {
  .cs-stage { scroll-margin-top: 80px; }
}

/* The Notebook AI case ships three impact metrics, not two. `.cs-sales-metrics-grid`
   in go4ai.css is `repeat(2, 1fr)`, so the third card would drop onto a row of its
   own and the block would read as 2 + 1. `minmax(0, 1fr)` (not bare `1fr`) matters:
   the labels are long sentences and a plain `1fr` track floors at min-content,
   which would push the card past its column and add horizontal scroll.
   Below 767px the case body is full-bleed but three tracks would be ~120px wide,
   so the metrics stack instead. */
.cs-sales-metrics-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 767px) {
  .cs-sales-metrics-grid--3 { grid-template-columns: minmax(0, 1fr); }
}

/* ============================================================================
   18. CLOSING CTA BAND — priority + breathing room
   ----------------------------------------------------------------------------
   Two separate problems, both about the band that ends the page:

   (a) SPACING. `.cs-library` was reset to `padding: 0` by the journey rework,
       so the band's wrapper had no bottom padding and the band sat flush
       against the footer (measured gap: 0px at every viewport). The padding
       goes on the wrapper rather than as `margin-bottom` on the band so it
       cannot collapse through the `.container`/`.padding-global` ancestors.

   (b) PRIORITY. `Tư vấn chương trình` is the page's conversion CTA and it is
       already coral-filled, but it carried the same weight as every other
       button on the site. Heavier weight, an arrow, a hairline rim and a
       deeper shadow give it the top of the hierarchy without resizing it.
   ========================================================================= */
.cs-library > .padding-global:last-child {
  padding-bottom: clamp(64px, 7vw, 88px);
}
/* The band itself stacks at 992px (see the `.app-cta-band` rule in go4ai.css),
   so the closing space follows the same switch: 64-96px while it is a
   side-by-side band, 40-56px once it is a stacked one. Without this the 992px
   viewport measured 69px, which is a desktop value on a mobile layout. */
@media (max-width: 992px) {
  .cs-library > .padding-global:last-child {
    padding-bottom: clamp(40px, 7vw, 56px);
  }
}

.app-cta-band__action .button--red {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 30px;
  font-weight: 700;
  letter-spacing: -0.01em;
  border: 1px solid rgba(255, 138, 118, 0.42);
  box-shadow: 0 8px 24px rgba(201, 59, 43, 0.4);
}
.app-cta-band__action .button--red svg {
  flex: 0 0 auto;
  transition: transform 0.3s var(--acs-ease-out);
}
.app-cta-band__action .button--red:hover {
  background-color: #c93b2b;
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(201, 59, 43, 0.5);
}
.app-cta-band__action .button--red:hover svg { transform: translateX(3px); }
.app-cta-band__action .button--red:focus-visible {
  outline: 2px solid #ffb4a5;
  outline-offset: 3px;
}

/* The band stacks at <=992px (go4ai.css gives the button `width: 100%` there).
   That rule centres the text but not the flex row, so the arrow stayed left. */
@media (max-width: 992px) {
  .app-cta-band__action .button--red { justify-content: center; }
}