/* ============================================================
   service-digital-transformation.css
   Extracted from <style> block in service-digital-transformation.html.
   ============================================================ */

/* ========== HERO · Transformation Engine ========== */
.tx-hero-svg { width: 100%; height: auto; max-width: 480px; display: block; margin: 0 auto; }

@keyframes txLegacyFade {
  0%, 30%  { opacity: .8; }
  60%      { opacity: .3; }
  100%     { opacity: .8; }
}
.tx-legacy { animation: txLegacyFade 5s ease-in-out infinite; }

@keyframes txGearA { to { transform: rotate(360deg); } }
.tx-gear   { animation: txGearA 8s linear infinite;        transform-origin: center; transform-box: fill-box; }
.tx-gear-2 { animation: txGearA 8s linear infinite reverse; transform-origin: center; transform-box: fill-box; }

@keyframes txModernGlow {
  0%, 100% { opacity: .7; transform: scale(1); }
  50%      { opacity: 1; transform: scale(1.04); }
}
.tx-modern { animation: txModernGlow 3s ease-in-out infinite; transform-origin: center; transform-box: fill-box; }

@keyframes txMaturity {
  0%   { stroke-dashoffset: 188; }
  100% { stroke-dashoffset: 0; }
}
.tx-maturity-ring { stroke-dasharray: 188; animation: txMaturity 3s ease-out forwards infinite; }

/* Hero label chips, recomposed so each chip anchors the section it names:
   legacy (upper left) -> waves (upper middle) -> engine (center) ->
   target gauge (lower center) -> 6-axis bars (lower right).
   Scoped to .topo-tx so the shared .nl-* rules (used by other service
   pages) are untouched. The topo is capped to the svg's 480px square and
   chips are anchored in % / cqw of it, so labels stay glued to their
   objects at every render size (the hero column varies ~300-480px). */
.topo-tx {
  width: 100%;
  max-width: 480px;
  height: auto;
  aspect-ratio: 1 / 1;
  margin: 0 auto;
}
.topo-tx .node-label {
  right: auto;
  bottom: auto;
  transform: translateX(-50%);
  animation: txTargetFloat 8s cubic-bezier(.45, .05, .55, .95) infinite;
}
/* Scale the chips with the canvas. Size containment zeroes out
   content-based sizing and .hero-vis is fit-content-sized below 1024px,
   so the containment only ships together with the :has() width fix;
   otherwise chips keep their fixed-size fallback above. */
@supports (container-type: inline-size) and selector(:has(> *)) {
  .hero-vis:has(> .topo-tx) { width: 100%; }
  .topo-tx { container-type: inline-size; }
  .topo-tx .node-label {
    font-size: 2.47cqw;      /* = .74rem at the 480px reference size */
    padding: 1.25cqw 2.08cqw;
    border-radius: 1.25cqw;
  }
}
/* % values = svg coordinate / 480 */
.topo-tx .nl-1 { top: 1.25%;  left: 22.9%;  animation-duration: 9s; }    /* Legacy state · above the monitor */
.topo-tx .nl-6 { top: -0.85%; left: 81.25%; animation-duration: 11s; }   /* 90-day waves · heads the wave stack */
.topo-tx .nl-2 { top: 36.25%; left: 50%;    animation-duration: 10s; }   /* Transformation engine · gears sit beneath */
.topo-tx .nl-3 { top: 68.5%;  left: 50%;    animation-duration: 7s; }    /* Target state · ~25px above the gauge ring */
.topo-tx .nl-5 { top: 68.5%;  left: 79.2%;  animation-duration: 9.5s; }  /* 6-axis live · above the bars */
.topo-tx .nl-4 { top: 86.25%; left: 26.25%; animation-duration: 8.5s; }  /* Maturity score · beside the gauge */
@keyframes txTargetFloat {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%      { transform: translateX(-50%) translateY(-3px); }
}

@keyframes txDataFlow {
  0%   { offset-distance: 0%; opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { offset-distance: 100%; opacity: 0; }
}
.tx-flow {
  offset-path: path('M 172 110 C 214 118 204 220 226 252'); /* legacy -> engine */
  animation: txDataFlow 2.4s ease-in-out infinite;
}
.tx-flow.f2 { offset-path: path('M 240 330 C 240 346 240 364 240 384'); animation-delay: .8s; }  /* engine -> target gauge */
.tx-flow.f3 { offset-path: path('M 290 300 C 332 328 318 352 348 376'); animation-delay: 1.6s; } /* engine -> 6-axis bars */

/* ========== TRANSFORMATION PHASE PANEL SVGs ========== */
.tp-vis { width: 100%; max-width: 230px; height: auto; display: block; margin: 0 auto; }

@keyframes tpScanLine {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(60px); }
}
.tp-scan { animation: tpScanLine 2.4s ease-in-out infinite; }

@keyframes tpRoadMarker {
  0%   { offset-distance: 0%; }
  100% { offset-distance: 100%; }
}
.tp-marker {
  offset-path: path('M 30 100 L 80 80 L 130 110 L 170 70');
  animation: tpRoadMarker 4s ease-in-out infinite;
}

@keyframes tpExecPulse {
  0%, 100% { opacity: .8; transform: scaleY(1); }
  50%      { opacity: 1; transform: scaleY(1.15); }
}
.tp-exec-bar { animation: tpExecPulse 1.8s ease-in-out infinite; transform-origin: bottom center; transform-box: fill-box; }
.tp-exec-bar.b2 { animation-delay: .2s; }
.tp-exec-bar.b3 { animation-delay: .4s; }
.tp-exec-bar.b4 { animation-delay: .6s; }
.tp-exec-bar.b5 { animation-delay: .8s; }

@keyframes tpAdoptPulse {
  0%, 100% { opacity: .7; transform: scale(1); }
  50%      { opacity: 1; transform: scale(1.12); }
}
.tp-adopt { animation: tpAdoptPulse 2s ease-in-out infinite; transform-origin: center; transform-box: fill-box; }
.tp-adopt.a2 { animation-delay: .3s; }
.tp-adopt.a3 { animation-delay: .6s; }

/* ========== MATURITY MATRIX ========== */
.mat-grid {
  margin-top: 40px;
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 32px;
  align-items: stretch;
}
@media (max-width: 920px) { .mat-grid { grid-template-columns: 1fr; } }
.mat-levels {
  display: grid;
  gap: 12px;
}
.mat-row {
  display: grid;
  grid-template-columns: 60px 1fr 100px;
  gap: 18px;
  align-items: center;
  padding: 18px 22px;
  background: rgba(255,255,255,.55);
  border: 1px solid rgba(11,30,63,.1);
  border-radius: 12px;
  transition: transform .3s ease, box-shadow .3s ease;
}
.mat-row:hover {
  transform: translateX(4px);
  box-shadow: 0 12px 30px rgba(11,30,63,.07);
}
.mat-row.current {
  background: #0B1E3F;
  color: var(--c-white);
  border-color: transparent;
}
.mat-num {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font: 800 18px/1 'Space Grotesk', sans-serif;
  background: linear-gradient(135deg, #1E63E9, #FF6B35);
  color: var(--c-white);
}
.mat-row.current .mat-num { background: rgba(255,255,255,.15); }
.mat-text h3 {
  font: 700 1rem/1.2 'Space Grotesk', sans-serif;
  color: #0B1E3F;
  margin: 0 0 4px;
}
.mat-row.current .mat-text h3 { color: var(--c-white); }
.mat-text p {
  font: 500 .85rem/1.4 'Inter', sans-serif;
  color: #4D5A77;
  margin: 0;
}
.mat-row.current .mat-text p { color: rgba(255,255,255,.7); }
.mat-bar {
  height: 8px;
  background: rgba(11,30,63,.1);
  border-radius: 4px;
  position: relative;
}
.mat-row.current .mat-bar { background: rgba(255,255,255,.15); }
.mat-bar i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #FF6B35, #1E63E9);
  border-radius: 4px;
}
.mat-side {
  background: linear-gradient(160deg, rgba(30,99,233,.06), rgba(255,107,53,.06));
  border: 1px solid rgba(11,30,63,.1);
  border-radius: 14px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.mat-score-label {
  font: 700 11px/1 'JetBrains Mono', monospace;
  color: #FF6B35;
  text-transform: uppercase;
  letter-spacing: .12em;
}
.mat-score {
  font: 800 4rem/1 'Space Grotesk', sans-serif;
  color: #0B1E3F;
  margin: 12px 0 4px;
}
.mat-score-sub {
  font: 600 12px/1.3 'JetBrains Mono', monospace;
  color: #4D5A77;
  margin-bottom: 22px;
}
.mat-axes { display: grid; gap: 10px; padding-top: 22px; border-top: 1px dashed rgba(11,30,63,.18); }
.mat-axis {
  display: grid;
  grid-template-columns: 1fr 56px;
  gap: 8px;
  align-items: center;
  font-family: 'Space Grotesk', sans-serif;
}
.mat-axis-label { font: 600 .82rem/1.2 'Space Grotesk', sans-serif; color: #0B1E3F; }
.mat-axis-bar {
  height: 5px;
  background: rgba(11,30,63,.1);
  border-radius: 3px;
  overflow: hidden;
  grid-column: 1 / -1;
}
.mat-axis-bar i { display: block; height: 100%; background: #1E63E9; border-radius: 3px; }
.mat-axis-val { font: 700 .82rem/1 'JetBrains Mono', monospace; color: #FF6B35; text-align: right; }

/* ========== TRANSFORMATION ROADMAP ========== */
.road {
  margin-top: 40px;
  padding: 50px clamp(20px, 4vw, 50px) 60px;
  background: rgba(255,255,255,.55);
  border: 1px solid rgba(11,30,63,.1);
  border-radius: 18px;
  position: relative;
  overflow: hidden;
}
.road-years {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  position: relative;
}
@media (max-width: 920px) { .road-years { grid-template-columns: 1fr; } }
.road-year {
  position: relative;
  padding: 30px 24px 28px;
  background: var(--c-white);
  border: 1px solid rgba(11,30,63,.1);
  border-radius: 14px;
}
.road-year::before {
  content: '';
  position: absolute;
  top: -2px; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, #FF6B35, #1E63E9);
  border-radius: 14px 14px 0 0;
}
.road-year-tag {
  font: 800 16px/1 'Space Grotesk', sans-serif;
  color: #FF6B35;
  display: block;
  margin-bottom: 4px;
}
.road-year h3 {
  font: 700 1.1rem/1.2 'Space Grotesk', sans-serif;
  color: #0B1E3F;
  margin: 0 0 16px;
}
.road-tracks {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 10px;
}
.road-track {
  display: grid;
  grid-template-columns: 60px 1fr;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px dotted rgba(11,30,63,.15);
}
.road-track:last-child { border-bottom: none; }
.road-track-tag {
  font: 700 9px/1 'JetBrains Mono', monospace;
  color: #1E63E9;
  background: rgba(30,99,233,.1);
  padding: 5px 8px;
  border-radius: 999px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.road-track p {
  font: 500 .82rem/1.4 'Inter', sans-serif;
  color: #4D5A77;
  margin: 0;
}

/* ========== CHANGE MANAGEMENT PLAYBOOK ========== */
.chg-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-top: 40px;
}
@media (max-width: 920px) { .chg-grid { grid-template-columns: 1fr; } }
.chg-card {
  position: relative;
  background: #0B1E3F;
  color: var(--c-white);
  border-radius: 16px;
  padding: 32px 26px;
  overflow: hidden;
  isolation: isolate;
  transition: transform .4s ease, box-shadow .4s ease;
}
.chg-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 24px 50px rgba(11,30,63,.25);
}
.chg-card::before {
  content: '';
  position: absolute;
  right: -50px; top: -50px;
  width: 200px; height: 200px;
  background: radial-gradient(circle, rgba(255,107,53,.3), transparent 65%);
  z-index: -1;
}
.chg-num {
  font: 800 60px/1 'Space Grotesk', sans-serif;
  color: rgba(255,255,255,.15);
  display: block;
  margin-bottom: -10px;
}
.chg-card h3 {
  font: 700 1.15rem/1.2 'Space Grotesk', sans-serif;
  margin: 0 0 12px;
  color: var(--c-white);
}
.chg-card > p {
  font: 500 .9rem/1.55 'Inter', sans-serif;
  color: rgba(255,255,255,.75);
  margin: 0 0 18px;
}
.chg-actions {
  list-style: none;
  padding: 14px 0 0;
  margin: 0;
  border-top: 1px solid rgba(255,255,255,.12);
}
.chg-actions li {
  font: 500 .82rem/1.4 'Inter', sans-serif;
  color: rgba(255,255,255,.85);
  padding: 6px 0 6px 20px;
  position: relative;
}
.chg-actions li::before {
  content: '◆';
  position: absolute;
  left: 0;
  color: #FF6B35;
  font-size: 8px;
  top: 9px;
}