/* =============================================================================
   ROBONIX V3 — Advanced Hero Stylesheet
   - 100% stable, zero shaking, no parallax jitter.
   - Instantly painted hero with zero loading blackouts.
   - Cinematic crossfade + laser scanner wipe on slide changes.
   - WCAG AAA high-contrast left gradient for pristine text readability.
   ========================================================================== */

/* ---------- Design Tokens ---------- */
:root {
  --green: #00C27A;
  --neon: #3CFFB0;
  --ink: #040C0C;
  --text: #FFFFFF;
  --text-2: rgba(255, 255, 255, .90);
  --text-3: rgba(255, 255, 255, .68);
  --line: rgba(255, 255, 255, .12);
  --glass: rgba(8, 20, 20, .52);

  --pad: clamp(20px, 5.5vw, 105px);
  --ease: cubic-bezier(.65, 0, .25, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --t: 900ms;
  --dur: 6500ms;

  --font: "Inter Tight", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* ---------- Reset & Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; width: 100%; }
body {
  background: var(--ink);
  color: var(--text);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
img { display: block; max-width: 100%; }
svg { display: block; }
:focus-visible { outline: 2px solid var(--neon); outline-offset: 4px; border-radius: 6px; }

.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 16px; top: -60px; z-index: 100;
  background: var(--green); color: var(--ink); font-weight: 700;
  padding: 10px 16px; border-radius: 8px; transition: top .2s;
}
.skip-link:focus { top: 16px; }

/* ---------- Fullscreen Stage ---------- */
.stage {
  position: relative;
  height: 100vh;
  height: 100dvh;
  min-height: 100vh;
  min-height: 100dvh;
  max-height: 100vh;
  max-height: 100dvh;
  overflow: hidden;
  display: grid;
  grid-template-rows: auto 1fr auto;
  isolation: isolate;
}

/* ---------- 5 Background Scenes ---------- */
.scenes {
  position: absolute; inset: 0; z-index: 0;
  background: var(--ink);
  overflow: hidden;
}
.scene {
  position: absolute; inset: 0;
  opacity: 0;
  visibility: hidden;
  z-index: 0;
  overflow: hidden;
  transition: opacity var(--t) var(--ease), visibility var(--t);
  transform: translateZ(0);
  backface-visibility: hidden;
}
.scene picture, .scene img {
  width: 100%; height: 100%;
}
.scene img {
  object-fit: cover;
  object-position: 50% 50%;
  backface-visibility: hidden;
  transform: none;
  transition: none;
}
.scene.is-active {
  opacity: 1;
  visibility: visible;
  z-index: 1;
}
.scene.is-active img {
  transform: none;
}

/* Laser Scanner Wipe Beam */
.scan {
  position: absolute; top: 0; bottom: 0; left: 0;
  width: 100vw; z-index: 6; pointer-events: none;
  opacity: 0;
}
.scan__line {
  position: absolute; top: 0; bottom: 0; left: 0; width: 3px;
  background: linear-gradient(180deg, transparent 0%, var(--neon) 20%, #fff 50%, var(--neon) 80%, transparent 100%);
  box-shadow: 0 0 16px 2px rgba(60, 255, 176, .85), 0 0 45px 6px rgba(60, 255, 176, .35);
}
.scan__beam {
  position: absolute; top: 0; bottom: 0; right: 100%; width: 28vw;
  background: linear-gradient(90deg, transparent, rgba(60, 255, 176, .08) 75%, rgba(60, 255, 176, .22));
  mix-blend-mode: screen;
}
.scan.run {
  animation: scanWipe var(--t) var(--ease) forwards;
}
@keyframes scanWipe {
  0%   { opacity: 1; transform: translate3d(0, 0, 0); }
  85%  { opacity: 1; }
  100% { opacity: 0; transform: translate3d(100vw, 0, 0); }
}

/* ---------- Contrast Scrim & Readability Layers (Shared rule across all 4 slides) ---------- */
.scrim {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  background:
    /* Subtle bottom gradient over the bottom 20% so the footer area stays dark */
    linear-gradient(0deg, rgba(3, 10, 8, 0.6) 0%, rgba(3, 10, 8, 0) 20%),
    /* Left-to-right gradient protecting text on the left */
    linear-gradient(90deg, rgba(3, 10, 8, 0.85) 0%, rgba(3, 10, 8, 0.6) 35%, rgba(3, 10, 8, 0.15) 60%, transparent 75%);
}

.spotlight {
  position: absolute; inset: 0; z-index: 5; pointer-events: none;
  background: radial-gradient(560px circle at var(--mx, 70%) var(--my, 40%), rgba(60, 255, 176, .06), transparent 60%);
  mix-blend-mode: screen;
  opacity: 0; transition: opacity .8s ease;
}
.spotlight.on { opacity: 1; }

.dust {
  position: absolute; inset: 0; width: 100%; height: 100%; z-index: 5; pointer-events: none;
}

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

/* ---------- Cybernetic HUD Overlay ---------- */
.hud { position: absolute; inset: 0; z-index: 25; pointer-events: none; }
.hud__corner {
  position: absolute;
  width: 24px;
  height: 24px;
  fill: none;
  stroke: rgba(200, 248, 230, 0.52);
  stroke-width: 1.7;
  pointer-events: none;
  transform-origin: center center;
  will-change: transform, opacity;
  animation-duration: 2.6s !important;
  animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1) !important;
  animation-iteration-count: infinite !important;
}
.hud__corner--tl {
  top: 12px;
  left: 12px;
  animation-name: hudCornerZoomTL !important;
}
.hud__corner--tr {
  top: 12px;
  right: 12px;
  animation-name: hudCornerZoomTR !important;
}
.hud__corner--bl {
  bottom: 10px;
  left: 12px;
  animation-name: hudCornerZoomBL !important;
}
.hud__corner--br {
  bottom: 10px;
  right: 12px;
  animation-name: hudCornerZoomBR !important;
}

@keyframes hudCornerZoomTL {
  0%, 100% {
    transform: translate3d(0, 0, 0) scale(0.88);
    stroke: rgba(200, 248, 230, 0.45);
    opacity: 0.82;
    filter: drop-shadow(0 0 0 rgba(15, 123, 95, 0));
  }
  50% {
    transform: translate3d(3px, 3px, 0) scale(1.22);
    stroke: rgba(110, 255, 200, 0.85);
    opacity: 1;
    filter: drop-shadow(0 0 5px rgba(15, 123, 95, 0.55));
  }
}
@keyframes hudCornerZoomTR {
  0%, 100% {
    transform: translate3d(0, 0, 0) scale(0.88);
    stroke: rgba(200, 248, 230, 0.45);
    opacity: 0.82;
    filter: drop-shadow(0 0 0 rgba(15, 123, 95, 0));
  }
  50% {
    transform: translate3d(-3px, 3px, 0) scale(1.22);
    stroke: rgba(110, 255, 200, 0.85);
    opacity: 1;
    filter: drop-shadow(0 0 5px rgba(15, 123, 95, 0.55));
  }
}
@keyframes hudCornerZoomBL {
  0%, 100% {
    transform: translate3d(0, 0, 0) scale(0.88);
    stroke: rgba(200, 248, 230, 0.45);
    opacity: 0.82;
    filter: drop-shadow(0 0 0 rgba(15, 123, 95, 0));
  }
  50% {
    transform: translate3d(3px, -3px, 0) scale(1.22);
    stroke: rgba(110, 255, 200, 0.85);
    opacity: 1;
    filter: drop-shadow(0 0 5px rgba(15, 123, 95, 0.55));
  }
}
@keyframes hudCornerZoomBR {
  0%, 100% {
    transform: translate3d(0, 0, 0) scale(0.88);
    stroke: rgba(200, 248, 230, 0.45);
    opacity: 0.82;
    filter: drop-shadow(0 0 0 rgba(15, 123, 95, 0));
  }
  50% {
    transform: translate3d(-3px, -3px, 0) scale(1.22);
    stroke: rgba(110, 255, 200, 0.85);
    opacity: 1;
    filter: drop-shadow(0 0 5px rgba(15, 123, 95, 0.55));
  }
}

.hud__rail {
  position: absolute; right: clamp(16px, 2.2vw, 36px); top: 50%;
  transform: translateY(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  pointer-events: auto;
}
.rail__tick {
  width: 3px; height: 16px; border-radius: 3px;
  background: rgba(255, 255, 255, .28);
  cursor: pointer;
  transition: height .5s var(--ease-out), background .3s, box-shadow .3s;
}
.rail__tick:hover { background: rgba(255, 255, 255, .65); }
.rail__tick.is-active {
  height: 38px; background: var(--neon);
  box-shadow: 0 0 12px rgba(60, 255, 176, .85);
}

/* Target Tracking Reticle */
.reticle {
  position: absolute; left: 0; top: 0; z-index: 8; pointer-events: none;
  width: 112px; height: 112px; margin: -56px 0 0 -56px;
  transform: translate3d(var(--rx, 68vw), var(--ry, 24vh), 0);
  transition: transform 1.1s var(--ease-out), opacity .5s ease;
  opacity: 1;
}
.reticle svg { width: 100%; height: 100%; overflow: visible; fill: none; }
.reticle__ring { stroke: rgba(60, 255, 176, .45); stroke-width: 1; }
.reticle__orbit {
  stroke: rgba(60, 255, 176, .60); stroke-width: 1.2; stroke-dasharray: 4 8;
  transform-box: fill-box; transform-origin: center;
  animation: reticleSpin 26s linear infinite;
}
.reticle__ticks { stroke: rgba(255, 255, 255, .55); stroke-width: 1; }
.reticle__brackets { stroke: var(--neon); stroke-width: 1.6; filter: drop-shadow(0 0 4px rgba(60, 255, 176, .85)); }
.reticle__dot { fill: var(--neon); filter: drop-shadow(0 0 4px var(--neon)); }
.reticle.lock svg { animation: reticleLock 0.9s var(--ease-out); }
@keyframes reticleSpin { to { transform: rotate(360deg); } }
@keyframes reticleLock {
  0%   { transform: scale(1.4); opacity: .4; }
  50%  { opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

/* ---------- Header Navigation ---------- */
.header {
  grid-row: 1; position: relative; z-index: 1000;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: clamp(14px, 2.4vh, 26px) var(--pad);
}
.brand__logo {
  height: clamp(24px, 2.2vw, 34px); width: auto;
  filter: drop-shadow(0 2px 10px rgba(0, 0, 0, .45));
}
.brand__orb {
  transform-box: fill-box; transform-origin: center;
  animation: orbGlow 3s ease-in-out infinite;
}
.brand__orb--b { animation-delay: -1.5s; }
@keyframes orbGlow { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }

.nav { position: relative; display: flex; align-items: center; gap: clamp(14px, 1.6vw, 28px); }
.nav__list {
  position: relative; z-index: 1;
  list-style: none; margin: 0; padding: 5px;
  display: flex; align-items: center; gap: 2px;
  background: rgba(6, 16, 16, .48);
  border: 1px solid rgba(255, 255, 255, .10);
  border-radius: 999px;
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  backdrop-filter: blur(16px) saturate(140%);
}
.nav__link {
  position: relative; z-index: 2; display: block;
  padding: 9px clamp(11px, 1vw, 17px);
  font-size: clamp(13px, .86vw, 15px); font-weight: 600; letter-spacing: .01em;
  color: var(--text-2); white-space: nowrap; border-radius: 999px;
  transition: color .25s ease;
}
.nav__link:hover, .nav__link[aria-current="true"] { color: #fff; }

.nav__pill {
  position: absolute; z-index: 1; left: 0; top: 0; height: 0; width: 0;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(0, 194, 122, .28), rgba(0, 194, 122, .15));
  border: 1px solid rgba(60, 255, 176, .45);
  box-shadow: 0 0 18px -4px rgba(60, 255, 176, .6), inset 0 1px 0 rgba(255, 255, 255, .15);
  transition: transform .6s var(--ease-out), width .6s var(--ease-out), opacity .3s;
  pointer-events: none; opacity: 0;
}
.nav__pill.on { opacity: 1; }

.btn-contact {
  position: relative; overflow: hidden; display: inline-flex; align-items: center;
  padding: 13px 25px; border-radius: 999px;
  background: var(--green); color: #031410;
  font-size: 13px; font-weight: 800; letter-spacing: .16em;
  box-shadow: 0 0 0 1px rgba(60, 255, 176, .6), 0 10px 30px -10px rgba(0, 194, 122, .9);
  transition: background .25s, box-shadow .25s, transform .2s;
}
.btn-contact span { position: relative; z-index: 1; }
.btn-contact::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .55) 50%, transparent 70%);
  transform: translateX(-120%); transition: transform .8s var(--ease-out);
}
.btn-contact:hover,
.btn-contact.is-active,
.btn-contact[aria-current="page"] {
  background: var(--neon);
  box-shadow: 0 0 0 1px var(--neon), 0 12px 36px -8px rgba(60, 255, 176, .95);
  transform: translateY(-1px);
}
.btn-contact:hover::after { transform: translateX(120%); }

/* Mobile Menu Button & Drawer */
.burger {
  display: none; width: 44px; height: 44px; border-radius: 50%; position: relative;
  background: rgba(6, 16, 16, .5); border: 1px solid rgba(255, 255, 255, .15);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.burger span {
  position: absolute; left: 13px; right: 13px; height: 2px; background: #fff; border-radius: 2px;
  transition: transform .35s var(--ease-out), top .35s var(--ease-out);
}
.burger span:nth-child(1) { top: 17px; }
.burger span:nth-child(2) { top: 25px; }
.burger[aria-expanded="true"] span:nth-child(1) { top: 21px; transform: rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { top: 21px; transform: rotate(-45deg); }

.drawer {
  position: fixed; inset: 0; z-index: 1005;
  display: flex; flex-direction: column; justify-content: center; gap: 36px;
  padding: 100px var(--pad) 60px;
  background: rgba(3, 10, 10, .92);
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
  opacity: 0; visibility: hidden; transition: opacity .35s ease, visibility .35s;
}
.drawer.open { opacity: 1; visibility: visible; }
.drawer__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.drawer__list a {
  display: block; padding: 10px 0; font-size: clamp(24px, 7vw, 34px); font-weight: 700;
  transition: color .25s ease;
}
.drawer__list a:hover, .drawer__list a[aria-current="true"] { color: var(--neon); }
.drawer .btn-contact { align-self: flex-start; }

/* ---------- Hero Main Content ---------- */
.hero {
  grid-row: 2; position: relative; z-index: 12;
  display: flex; align-items: center;
  padding: 0 var(--pad);
  min-height: 0;
}
.hero__copy { width: min(840px, 56vw); }

.eyebrow {
  display: inline-flex; align-items: center; gap: 10px; margin: 0 0 clamp(16px, 2.4vh, 24px);
  font-size: clamp(11.5px, .78vw, 13.5px); font-weight: 700; letter-spacing: .32em; color: var(--neon);
  text-shadow: 0 0 16px rgba(60, 255, 176, .45);
}
.eyebrow__dot {
  position: relative; width: 6.5px; height: 6.5px; border-radius: 50%;
  background: var(--neon); box-shadow: 0 0 10px var(--neon);
}
.eyebrow__dot::after {
  content: ""; position: absolute; inset: -4px; border-radius: 50%;
  border: 1px solid var(--neon); opacity: 0; animation: dotPulse 2.4s var(--ease-out) infinite;
}
@keyframes dotPulse { 0% { transform: scale(.4); opacity: .9; } 100% { transform: scale(1.8); opacity: 0; } }

/* Sleek modern headline — refined scale, elegant weight, high-tech luminescence */
.title {
  margin: 0 0 clamp(16px, 2.4vh, 24px);
  font-weight: 350;
  font-size: clamp(30px, min(3.2vw, 6.4vh), 56px);
  line-height: 1.22;
  letter-spacing: -0.022em;
  color: #fff;
}
.title__line {
  display: block;
  white-space: nowrap;
  font-weight: 350;
  text-shadow: 0 2px 20px rgba(0, 0, 0, .5);
}
.title em {
  font-style: normal;
  font-weight: 500;
  letter-spacing: -0.015em;
  color: #00E5A0;
  text-shadow: 0 0 20px rgba(0, 229, 160, 0.45);
}

/* Subtle transition connector: THROUGH */
.hero__through {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 clamp(16px, 2.4vh, 24px);
  font-size: clamp(11.5px, .78vw, 13.5px);
  font-weight: 700;
  letter-spacing: .34em;
  color: var(--neon);
  text-transform: uppercase;
  text-shadow: 0 0 14px rgba(60, 255, 176, .45);
}
.through__dash {
  display: inline-block;
  width: 22px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--neon), var(--green));
  box-shadow: 0 0 8px rgba(60, 255, 176, .65);
}

/* ---------- 5 Flash-Card Slides ---------- */
.deck {
  margin-top: 0;
  margin-bottom: clamp(26px, 3.8vh, 40px);
  width: min(580px, 100%);
}

.rule {
  display: block; width: clamp(70px, 7vw, 132px); height: 2px;
  margin: 0 0 clamp(14px, 2.0vh, 18px);
  background: linear-gradient(90deg, var(--neon), var(--green) 60%, transparent);
  box-shadow: 0 0 12px rgba(60, 255, 176, .65);
}

.subline {
  margin: 0;
  font-size: clamp(12px, .85vw, 14.5px);
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.92);
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.5);
}
.subline i {
  font-style: normal;
  color: var(--neon);
  margin: 0 .65em;
  opacity: 0.8;
}

.cta {
  margin-top: clamp(22px, 3.2vh, 32px);
  display: inline-flex; align-items: center; gap: 16px;
  font-size: clamp(13px, .82vw, 15px); font-weight: 800; letter-spacing: .18em;
  color: #fff;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.5);
}
.cta__label { position: relative; padding: 6px 0; }
.cta__label::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: linear-gradient(90deg, var(--green), var(--neon));
  transform-origin: left; transition: transform .5s var(--ease-out);
}
.cta__icon {
  width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid rgba(60, 255, 176, .55); background: rgba(0, 194, 122, .1);
  transition: background .3s, border-color .3s, box-shadow .3s, transform .3s;
}
.cta__icon svg {
  width: 18px; height: 18px; fill: none; stroke: #fff; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
  transition: transform .35s var(--ease-out), stroke .3s;
}
.cta:hover .cta__icon {
  background: var(--green); border-color: var(--green);
  box-shadow: 0 0 24px rgba(0, 194, 122, .75);
  transform: translateX(2px);
}
.cta:hover .cta__icon svg { transform: translateX(3px); stroke: #031410; }
.cta:hover .cta__label::after { transform: scaleX(1.1); }
.card {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: auto auto 1fr auto; align-items: center;
  column-gap: clamp(16px, 1.4vw, 24px);
  padding: clamp(14px, 2.2vh, 22px) clamp(18px, 1.5vw, 26px);
  border-radius: 18px;
  background: linear-gradient(125deg, rgba(8, 22, 22, .55), rgba(8, 22, 22, .32));
  border: 1px solid rgba(255, 255, 255, .12);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  backdrop-filter: blur(20px) saturate(150%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .10), 0 20px 50px -24px rgba(0, 0, 0, .55);
  transition: border-color .35s;
}
.card::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .35s;
  background: radial-gradient(360px circle at var(--cx, 30%) var(--cy, 50%), rgba(60, 255, 176, .14), transparent 45%);
}
.card::after {
  content: ""; position: absolute; left: 18px; right: 18px; top: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(60, 255, 176, .7), transparent);
}
.card:hover { border-color: rgba(60, 255, 176, .35); }
.card:hover::before { opacity: 1; }

.card__no {
  display: block; height: 1em; overflow: hidden; line-height: 1;
  font-size: clamp(38px, min(3.2vw, 6.4vh), 56px); font-weight: 800; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.card__digits {
  display: flex; flex-direction: column;
  transition: transform .7s var(--ease-out);
}
.card__digits span {
  display: block; height: 1em;
  background: linear-gradient(180deg, var(--neon), var(--green));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.card__divider {
  width: 1px; height: 44px;
  background: linear-gradient(180deg, transparent, rgba(255, 255, 255, .28), transparent);
}
.card__text { min-width: 0; }
.card__title {
  display: block;
  font-size: clamp(16px, min(1.22vw, 2.4vh), 22px);
  font-weight: 550; letter-spacing: .02em; line-height: 1.2;
  color: #fff;
  transition: opacity .25s ease, transform .25s ease;
}
.card__title.out {
  opacity: 0; transform: translateY(4px);
}
.card__sub {
  display: block; margin-top: 6px;
  font-size: clamp(13px, .86vw, 15px); font-weight: 450;
  color: rgba(255, 255, 255, 0.92);
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.5);
  transition: opacity .3s ease, transform .3s ease;
}
.card__sub.out {
  opacity: 0; transform: translateY(4px);
}

.card__go {
  width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid rgba(255, 255, 255, .16); transition: background .3s, border-color .3s;
}
.card__go svg {
  width: 16px; height: 16px; fill: none; stroke: #fff; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round; transition: transform .35s var(--ease-out);
}
.card:hover .card__go { background: rgba(0, 194, 122, .25); border-color: rgba(60, 255, 176, .55); }
.card:hover .card__go svg { transform: translate(2px, -2px); }

/* =============================================================================
   SUB-CAPABILITY FLASH AREA FOR R&D (02) AND CONSULTING (03)
   Premium dark ROBONIX glass aesthetic with restrained emerald-green underline.
   Integrated manual navigation (Left/Right subtle arrows + discrete progress dots).
   Reserved fixed-height layout slot preventing shifts and collisions across all slides.
   ============================================================================= */
.deck__subflash-slot {
  position: relative;
  width: 100%;
  min-height: 48px;
  margin-top: 8px;
  margin-bottom: 2px;
  display: grid;
}

.deck__subflash-slot .deck__subflash {
  grid-area: 1 / 1;
  margin: 0;
}

.deck__subflash {
  position: relative;
  width: 100%;
  min-height: 48px;
  margin-top: 8px;
  margin-bottom: 2px;
  padding-left: clamp(18px, 1.5vw, 26px);
  padding-right: clamp(18px, 1.5vw, 26px);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.35s;
  z-index: 5;
}

.deck__subflash.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.subflash__row {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  position: relative;
  max-width: 100%;
}

.subflash__arrow {
  flex: none;
  width: 24px;
  height: 24px;
  padding: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(6, 16, 16, 0.45);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  cursor: pointer;
  transition: border-color 0.22s ease, background 0.22s ease, box-shadow 0.22s ease, transform 0.18s ease;
  outline: none;
  -webkit-tap-highlight-color: transparent;
}

.subflash__arrow svg {
  width: 12px;
  height: 12px;
  fill: none;
  stroke: #FFFFFF;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke 0.2s ease;
}

.subflash__arrow:hover {
  border-color: rgba(60, 255, 176, 0.65);
  background: rgba(0, 194, 122, 0.22);
  box-shadow: 0 0 10px rgba(0, 224, 142, 0.35);
  transform: scale(1.08);
}

.subflash__arrow:hover svg {
  stroke: var(--neon, #00E08E);
}

.subflash__arrow:active {
  transform: scale(0.94);
}

.subflash__track {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: clamp(255px, 22vw, 320px);
  position: relative;
}

.subflash__title {
  display: block;
  font-family: inherit;
  font-size: clamp(12px, 0.86vw, 14.5px);
  font-weight: var(--rx-fw-medium, 500);
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: #FFFFFF;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.75);
  line-height: 1.25;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(5px);
  transition: opacity 300ms cubic-bezier(0.16, 1, 0.3, 1), transform 300ms cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

.subflash__title.is-entering {
  opacity: 1;
  transform: translateY(0);
}

.subflash__title.is-exiting {
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 250ms ease-in, transform 250ms ease-in;
}

.subflash__indicator {
  display: block;
  width: clamp(38px, 3.2vw, 52px);
  height: 2px;
  margin-top: 5px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.14);
  position: relative;
  overflow: hidden;
}

.subflash__bar {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--neon, #00E08E), var(--green, #0F7B5F));
  box-shadow: 0 0 8px rgba(60, 255, 176, 0.55);
  transform-origin: left center;
  transform: scaleX(0);
  transition: transform 1450ms linear, opacity 250ms ease;
}

.subflash__bar.is-filling {
  transform: scaleX(1);
}

.subflash__bar.is-exiting {
  opacity: 0;
  transition: opacity 250ms ease;
}

/* 5 Discrete Progress Dots */
.subflash__dots {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 7px;
  margin-left: 36px; /* Align directly under the title text (24px arrow + 12px gap) */
}

.subflash__dot {
  width: 6px;
  height: 6px;
  padding: 0;
  border-radius: 50%;
  border: none;
  outline: none;
  background: rgba(0, 224, 142, 0.28);
  cursor: pointer;
  transition: background 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
  -webkit-tap-highlight-color: transparent;
}

.subflash__dot:hover {
  background: rgba(0, 224, 142, 0.65);
  transform: scale(1.25);
}

.subflash__dot.is-active {
  background: var(--neon, #00E08E);
  box-shadow: 0 0 8px rgba(0, 224, 142, 0.85);
  transform: scale(1.35);
  pointer-events: none;
}

/* Controls: Prev / 5 Segments / Next */
.deck__controls { margin-top: 14px; display: flex; align-items: center; gap: 12px; }
.deck__arrow {
  flex: none; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid rgba(255, 255, 255, .16); background: rgba(6, 16, 16, .4);
  transition: border-color .25s, background .25s;
}
.deck__arrow svg {
  width: 15px; height: 15px; fill: none; stroke: #fff; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}
.deck__arrow:hover { border-color: rgba(60, 255, 176, .65); background: rgba(0, 194, 122, .2); }

.deck__segments { flex: 1; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 6px; }
.seg { position: relative; height: 18px; cursor: pointer; }
.seg::before {
  content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 3px; margin-top: -1.5px;
  border-radius: 3px; background: rgba(255, 255, 255, .20); transition: background .25s;
}
.seg:hover::before { background: rgba(255, 255, 255, .4); }
.seg__fill {
  position: absolute; left: 0; right: 0; top: 50%; height: 3px; margin-top: -1.5px; border-radius: 3px;
  background: linear-gradient(90deg, var(--green), var(--neon));
  box-shadow: 0 0 10px rgba(60, 255, 176, .7);
  transform: scaleX(0); transform-origin: left center;
}
.seg.is-done .seg__fill { transform: scaleX(1); opacity: .55; box-shadow: none; }
.seg.is-active .seg__fill { animation: fillSegment var(--dur) linear forwards; }
.deck.is-paused .seg.is-active .seg__fill,
.is-hidden .seg.is-active .seg__fill { animation-play-state: paused; }
@keyframes fillSegment { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ---------- Footer Bar ---------- */
.footer {
  grid-row: 3; position: relative; z-index: 20;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  gap: clamp(12px, 1.6vw, 24px);
  padding: 12px clamp(42px, 3.2vw, var(--pad));
  font-size: clamp(14px, 1.1vw, 17px);
  font-weight: 500;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.88);
  background: rgba(3, 9, 9, .75);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-top: 1px solid rgba(255, 255, 255, .08);
}
.footer__left {
  font-size: clamp(14px, 1.1vw, 17px);
  font-weight: 500;
  color: rgba(255, 255, 255, 0.88);
  display: flex;
  align-items: center;
  white-space: nowrap;
}
.footer__center {
  justify-self: center;
  text-align: center;
  font-size: clamp(14px, 1.1vw, 17px);
  font-weight: 500;
  color: rgba(255, 255, 255, 0.88);
  letter-spacing: 0.015em;
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}
.footer__right {
  justify-self: end;
  display: flex;
  gap: 12px;
  align-items: center;
  font-size: clamp(14px, 1.1vw, 17px);
  font-weight: 500;
  color: rgba(255, 255, 255, 0.88);
  white-space: nowrap;
}
.footer__right span { color: rgba(255, 255, 255, .35); font-weight: 300; }
.footer a { color: rgba(255, 255, 255, 0.88); transition: color .25s; }
.footer a:hover { color: var(--neon); }

/* ---------- Subtle Technical / Educational Engineering Overlay ---------- */
.tech-overlay {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none; z-index: 2;
  overflow: hidden;
  /* Header clearance mask: guarantees overlays cannot bleed into the top header zone */
  clip-path: inset(clamp(70px, 9vh, 95px) 0 0 0);
}
.tech-svg {
  width: 100%; height: 100%; display: block;
  pointer-events: none;
}

/* Thin engineering lines */
.tech-line {
  fill: none;
  stroke: var(--neon); stroke-width: 0.85px; stroke-linecap: round;
  filter: drop-shadow(0 0 2px rgba(60, 255, 176, 0.35));
}
.tech-guide {
  fill: none;
  stroke: rgba(60, 255, 176, 0.4); stroke-width: 0.75px;
  stroke-dasharray: 3 4;
}
.tech-tick {
  fill: none;
  stroke: var(--neon); stroke-width: 1px; stroke-linecap: round;
}
.tech-link {
  fill: none;
  stroke: rgba(60, 255, 176, 0.32); stroke-width: 0.75px;
  stroke-dasharray: 2 4;
}

/* Engineering text labels */
.tech-txt {
  font-family: 'Inter Tight', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 9px; font-weight: 600; letter-spacing: 0.2em;
  fill: var(--neon); text-anchor: start;
  text-shadow: 0 0 6px rgba(0, 0, 0, 0.85);
}
.tech-txt--muted {
  fill: rgba(228, 255, 243, 0.75); font-weight: 500; font-size: 8px; letter-spacing: 0.16em;
}

/* Shared HUD Overlay Label (.hud-label)
   Visual reference: Ground Sensor Array telemetry badge on Slide 1 */
.hud-label {
  display: inline-flex;
  align-items: center;
  font-family: 'Inter Tight', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: clamp(10px, 0.75vw, 12px);
  font-weight: 600;
  letter-spacing: 0.08em;
  color: #2EF2A5;
  background: rgba(5, 15, 12, 0.72);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  border: 1px solid rgba(46, 242, 165, 0.35);
  border-radius: 4px;
  padding: 3px 8px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
  white-space: nowrap;
  box-sizing: border-box;
  line-height: 1.2;
}

.hud-fo {
  overflow: visible;
  pointer-events: none;
}

/* Also support SVG text elements if directly classed with .hud-label */
text.hud-label {
  font-family: 'Inter Tight', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: clamp(10px, 0.75vw, 12px);
  font-weight: 600;
  letter-spacing: 0.08em;
  fill: #2EF2A5;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
  dominant-baseline: central;
}

/* High-contrast dark translucent backing typography for joint & dimension HUD badges */
.tech-badge-txt {
  font-family: 'Inter Tight', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: clamp(10px, 0.75vw, 12px);
  font-weight: 600;
  letter-spacing: 0.08em;
  fill: #2EF2A5;
  dominant-baseline: central;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}

/* Badges / Pill backgrounds */
.tech-pill-bg {
  fill: rgba(5, 15, 12, 0.72);
  stroke: rgba(46, 242, 165, 0.35); stroke-width: 1px;
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.tech-box-bg {
  fill: rgba(5, 15, 12, 0.72);
  stroke: rgba(46, 242, 165, 0.35); stroke-width: 1px;
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}

/* ---------- High-Visibility Graphical Projections (DOF, Height, Motion) ---------- */
.proj-badge-bg {
  fill: rgba(4, 16, 14, 0.88);
  stroke: rgba(60, 255, 176, 0.6);
  stroke-width: 1.2px;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.proj-card-topbar {
  stroke: var(--neon);
  stroke-width: 2px;
  filter: drop-shadow(0 0 5px var(--neon));
}

.proj-label {
  font-family: 'Inter Tight', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.16em;
  fill: rgba(210, 250, 235, 0.85);
}

.proj-value {
  font-family: 'Inter Tight', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.06em;
  fill: var(--neon);
  text-shadow: 0 0 8px rgba(60, 255, 176, 0.7);
}

.proj-value--hero {
  font-size: 14.5px;
  font-weight: 800;
  fill: #ffffff;
  text-shadow: 0 0 10px rgba(60, 255, 176, 0.85);
}

.proj-unit {
  font-size: 10px;
  font-weight: 600;
  fill: rgba(255, 255, 255, 0.8);
}

.proj-subtext {
  font-family: 'Inter Tight', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 8px;
  font-weight: 600;
  letter-spacing: 0.12em;
  fill: rgba(180, 245, 215, 0.78);
}

.proj-lead-line {
  fill: none;
  stroke: var(--neon);
  stroke-width: 1.2px;
  stroke-dasharray: 4 3;
  opacity: 0.85;
  filter: drop-shadow(0 0 3px rgba(60, 255, 176, 0.6));
}

.proj-guide-line {
  fill: none;
  stroke: rgba(60, 255, 176, 0.35);
  stroke-width: 1.2px;
  stroke-dasharray: 4 4;
}

/* =============================================================================
   ROBONIX GEARS & BRAINS: HUMANOID DIGITAL SCAN & SYNCHRONIZED REVEAL (8.0s LOOP)
   Educational Robotics Sequence: FEET -> KNEES -> WRISTS & FOREARM -> ELBOWS -> TORSO/HEIGHT -> SHOULDERS/DOF -> HEAD
   Shared animation timeline: All elements synchronized to scan position
   ========================================================================== */

/* 1. Laser Beam & Optical Scanning Elements */
.gears-scan-laser {
  stroke-width: 2.2px;
  stroke-linecap: round;
  filter: drop-shadow(0 0 6px #00FFB2) drop-shadow(0 0 14px rgba(60, 255, 176, 0.8));
}

.gears-scan-glow {
  pointer-events: none;
  opacity: 0.85;
}

.gears-scan-dot {
  fill: #FFFFFF;
  filter: drop-shadow(0 0 5px #00FFB2);
}

.gears-scan-ring {
  fill: none;
  stroke: #00FFB2;
  stroke-width: 1.2px;
  opacity: 0.85;
}

.gears-scan-tick {
  stroke: #FFFFFF;
  stroke-width: 1.5px;
  filter: drop-shadow(0 0 3px #00FFB2);
}

/* Base states: All connectors, markers, cards, and labels hidden initially */
.gears-connector {
  fill: none !important;
  stroke: #00FFB2;
  stroke-width: 1.4px;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  opacity: 0;
  filter: drop-shadow(0 0 4px rgba(60, 255, 176, 0.7));
}

.gears-marker {
  fill: #00FFB2;
  opacity: 0;
  filter: drop-shadow(0 0 4px #00FFB2);
  transform-box: fill-box;
  transform-origin: center;
}

.gears-ring {
  fill: none;
  stroke: #00FFB2;
  stroke-width: 1px;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
}

.gears-card {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  filter: drop-shadow(0 0 0 transparent);
}

.gears-label {
  opacity: 0;
  transform: translateY(6px);
  transition: none;
}

/* Head tracking brackets and ring */
.gears-head-bracket {
  fill: none;
  stroke: #00FFB2;
  stroke-width: 1.6px;
  filter: drop-shadow(0 0 4px #00FFB2);
}

.gears-head-ring {
  fill: none;
  stroke: #00F0FF;
  stroke-width: 1.2px;
  stroke-dasharray: 6 6;
  opacity: 0.75;
}

.gears-head-cross {
  stroke: #FFFFFF;
  stroke-width: 1.2px;
}

.gears-label-head {
  color: #00FFB2;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-align: center;
  background: rgba(3, 10, 8, 0.75);
  border: 1px solid rgba(0, 255, 178, 0.4);
  border-radius: 4px;
  padding: 2px 6px;
}

/* Start the Gears overlays only after the intro has been dismissed. */
html.robonix-intro-dismissed .scene[data-index="0"].is-active .gears-scan-system {
  animation: gearsScanRise 8s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
}

html.robonix-intro-dismissed .scene[data-index="0"].is-active .gears-caliper-beam {
  fill: none;
  stroke: var(--neon);
  stroke-width: 2.2px;
  stroke-linecap: round;
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  filter: drop-shadow(0 0 6px var(--neon));
  animation: gearsCaliperRise 8s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
}

/* Master Scan Beam Moving from Feet (Y:949) to Head (Y:186) */
@keyframes gearsScanRise {
  0% {
    transform: translateY(949px);
    opacity: 0;
  }
  2.5% {
    transform: translateY(949px);
    opacity: 1;
  }
  68% {
    transform: translateY(186px);
    opacity: 1;
  }
  72% {
    transform: translateY(186px);
    opacity: 0.9;
  }
  74% {
    transform: translateY(186px);
    opacity: 0;
  }
  92% {
    transform: translateY(186px);
    opacity: 0;
  }
  95% {
    transform: translateY(949px);
    opacity: 0;
  }
  100% {
    transform: translateY(949px);
    opacity: 0;
  }
}

@keyframes gearsCaliperRise {
  0% {
    stroke-dashoffset: 1000;
    opacity: 0;
  }
  2.5% {
    stroke-dashoffset: 1000;
    opacity: 1;
  }
  68% {
    stroke-dashoffset: 0;
    opacity: 1;
  }
  74% {
    stroke-dashoffset: 0;
    opacity: 0;
  }
  92% {
    stroke-dashoffset: 0;
    opacity: 0;
  }
  95% {
    stroke-dashoffset: 1000;
    opacity: 0;
  }
  100% {
    stroke-dashoffset: 1000;
    opacity: 0;
  }
}

/* ================= STAGE 1: GROUND SENSOR ARRAY (Feet hits at ~4.2%) ================= */
html.robonix-intro-dismissed .scene[data-index="0"].is-active .gears-conn-base {
  animation: gearsDrawConnBase 8s ease-in-out infinite;
}
html.robonix-intro-dismissed .scene[data-index="0"].is-active .gears-marker-base,
html.robonix-intro-dismissed .scene[data-index="0"].is-active .gears-ring-base {
  animation: gearsPulseMarkerBase 8s ease-in-out infinite;
}
html.robonix-intro-dismissed .scene[data-index="0"].is-active .gears-card-base {
  animation: gearsRevealCardBase 8s ease-in-out infinite;
}

@keyframes gearsDrawConnBase {
  0%, 3.5% { stroke-dashoffset: 100; opacity: 0; }
  4.5% { opacity: 1; }
  7.5% { stroke-dashoffset: 0; opacity: 1; }
  92% { stroke-dashoffset: 0; opacity: 1; }
  94.5% { opacity: 0; }
  100% { stroke-dashoffset: 100; opacity: 0; }
}

@keyframes gearsPulseMarkerBase {
  0%, 3.5% { opacity: 0; transform: scale(0.4); }
  4.5% { opacity: 1; transform: scale(1.6); filter: drop-shadow(0 0 10px #00FFB2); }
  7.5% { transform: scale(1); filter: drop-shadow(0 0 4px #00FFB2); }
  92% { opacity: 1; transform: scale(1); }
  94.5% { opacity: 0; transform: scale(0.5); }
  100% { opacity: 0; }
}

@keyframes gearsRevealCardBase {
  0%, 4.5% {
    opacity: 0;
    transform: translate(900px, 855px) translateY(8px) scale(0.95);
    filter: drop-shadow(0 0 0 transparent);
  }
  7.5% {
    opacity: 1;
    transform: translate(900px, 855px) translateY(0) scale(1);
    filter: drop-shadow(0 0 14px rgba(60, 255, 176, 0.85));
  }
  12% {
    opacity: 0.96;
    filter: drop-shadow(0 0 4px rgba(60, 255, 176, 0.3));
  }
  92% {
    opacity: 0.96;
    transform: translate(900px, 855px) translateY(0) scale(1);
    filter: drop-shadow(0 0 4px rgba(60, 255, 176, 0.3));
  }
  94.5% {
    opacity: 0;
    transform: translate(900px, 855px) translateY(-4px) scale(0.98);
  }
  100% {
    opacity: 0;
  }
}

/* ================= STAGE 5 (1): J4 • KNEE (Hits at ~22.8%) ================= */
html.robonix-intro-dismissed .scene[data-index="0"].is-active .gears-conn-knee {
  animation: gearsDrawConnKnee 8s ease-in-out infinite;
}
html.robonix-intro-dismissed .scene[data-index="0"].is-active .gears-marker-knee,
html.robonix-intro-dismissed .scene[data-index="0"].is-active .gears-ring-knee {
  animation: gearsPulseMarkerKnee 8s ease-in-out infinite;
}
html.robonix-intro-dismissed .scene[data-index="0"].is-active .gears-label-knee {
  animation: gearsRevealLabelKnee 8s ease-in-out infinite;
}

@keyframes gearsDrawConnKnee {
  0%, 21% { stroke-dashoffset: 100; opacity: 0; }
  22% { opacity: 1; }
  25% { stroke-dashoffset: 0; opacity: 1; }
  92% { stroke-dashoffset: 0; opacity: 0.85; }
  94.5% { opacity: 0; }
  100% { stroke-dashoffset: 100; opacity: 0; }
}

@keyframes gearsPulseMarkerKnee {
  0%, 21% { opacity: 0; transform: scale(0.4); }
  22.5% { opacity: 1; transform: scale(1.6); filter: drop-shadow(0 0 10px #00FFB2); }
  25.5% { transform: scale(1); filter: drop-shadow(0 0 4px #00FFB2); }
  92% { opacity: 1; transform: scale(1); }
  94.5% { opacity: 0; }
  100% { opacity: 0; }
}

@keyframes gearsRevealLabelKnee {
  0%, 22% {
    opacity: 0;
    transform: translateY(6px) scale(0.92);
  }
  25% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: drop-shadow(0 0 8px #00FFB2);
  }
  30% {
    opacity: 0.92;
    filter: drop-shadow(0 0 2px rgba(60, 255, 176, 0.4));
  }
  92% {
    opacity: 0.92;
    transform: translateY(0) scale(1);
  }
  94.5% {
    opacity: 0;
    transform: translateY(-4px);
  }
  100% {
    opacity: 0;
  }
}

/* ================= STAGE 5 (2): J3 • WRIST (Hits at ~34.6%) ================= */
html.robonix-intro-dismissed .scene[data-index="0"].is-active .gears-marker-wrist,
html.robonix-intro-dismissed .scene[data-index="0"].is-active .gears-ring-wrist {
  animation: gearsPulseMarkerWrist 8s ease-in-out infinite;
}
html.robonix-intro-dismissed .scene[data-index="0"].is-active .gears-label-wrist {
  animation: gearsRevealLabelWrist 8s ease-in-out infinite;
}

@keyframes gearsPulseMarkerWrist {
  0%, 33% { opacity: 0; transform: scale(0.4); }
  34.5% { opacity: 1; transform: scale(1.6); filter: drop-shadow(0 0 10px #00FFB2); }
  37.5% { transform: scale(1); filter: drop-shadow(0 0 4px #00FFB2); }
  92% { opacity: 1; transform: scale(1); }
  94.5% { opacity: 0; }
  100% { opacity: 0; }
}

@keyframes gearsRevealLabelWrist {
  0%, 33.5% {
    opacity: 0;
    transform: translateY(6px) scale(0.92);
  }
  36.5% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: drop-shadow(0 0 8px #00FFB2);
  }
  41% {
    opacity: 0.92;
    filter: drop-shadow(0 0 2px rgba(60, 255, 176, 0.4));
  }
  92% {
    opacity: 0.92;
    transform: translateY(0) scale(1);
  }
  94.5% {
    opacity: 0;
    transform: translateY(-4px);
  }
  100% {
    opacity: 0;
  }
}

/* ================= STAGE 2: KINEMATICS • MOTION TRACKING (Hits at ~37.8%) ================= */
html.robonix-intro-dismissed .scene[data-index="0"].is-active .gears-conn-motion {
  animation: gearsDrawConnMotion 8s ease-in-out infinite;
}
html.robonix-intro-dismissed .scene[data-index="0"].is-active .gears-marker-motion-anchor {
  animation: gearsPulseMarkerMotion 8s ease-in-out infinite;
}
html.robonix-intro-dismissed .scene[data-index="0"].is-active .gears-card-motion {
  animation: gearsRevealCardMotion 8s ease-in-out infinite;
}

@keyframes gearsDrawConnMotion {
  0%, 36% { stroke-dashoffset: 100; opacity: 0; }
  37% { opacity: 1; }
  40% { stroke-dashoffset: 0; opacity: 1; }
  92% { stroke-dashoffset: 0; opacity: 1; }
  94.5% { opacity: 0; }
  100% { stroke-dashoffset: 100; opacity: 0; }
}

@keyframes gearsPulseMarkerMotion {
  0%, 36% { opacity: 0; transform: scale(0.4); }
  37.5% { opacity: 1; transform: scale(1.6); filter: drop-shadow(0 0 10px #00FFB2); }
  40.5% { transform: scale(1); filter: drop-shadow(0 0 4px #00FFB2); }
  92% { opacity: 1; transform: scale(1); }
  94.5% { opacity: 0; }
  100% { opacity: 0; }
}

@keyframes gearsRevealCardMotion {
  0%, 37% {
    opacity: 0;
    transform: translate(910px, 545px) translateY(8px) scale(0.95);
    filter: drop-shadow(0 0 0 transparent);
  }
  40.5% {
    opacity: 1;
    transform: translate(910px, 545px) translateY(0) scale(1);
    filter: drop-shadow(0 0 14px rgba(60, 255, 176, 0.85));
  }
  45% {
    opacity: 0.96;
    filter: drop-shadow(0 0 4px rgba(60, 255, 176, 0.3));
  }
  92% {
    opacity: 0.96;
    transform: translate(910px, 545px) translateY(0) scale(1);
  }
  94.5% {
    opacity: 0;
    transform: translate(910px, 545px) translateY(-4px) scale(0.98);
  }
  100% {
    opacity: 0;
  }
}

/* ================= STAGE 5 (3): J2 • ELBOW (Hits at ~45.8%) ================= */
html.robonix-intro-dismissed .scene[data-index="0"].is-active .gears-conn-elbow {
  animation: gearsDrawConnElbow 8s ease-in-out infinite;
}
html.robonix-intro-dismissed .scene[data-index="0"].is-active .gears-marker-elbow,
html.robonix-intro-dismissed .scene[data-index="0"].is-active .gears-arc-elbow {
  animation: gearsPulseMarkerElbow 8s ease-in-out infinite;
}
html.robonix-intro-dismissed .scene[data-index="0"].is-active .gears-label-elbow {
  animation: gearsRevealLabelElbow 8s ease-in-out infinite;
}

@keyframes gearsDrawConnElbow {
  0%, 44% { stroke-dashoffset: 100; opacity: 0; }
  45% { opacity: 1; }
  48% { stroke-dashoffset: 0; opacity: 1; }
  92% { stroke-dashoffset: 0; opacity: 0.85; }
  94.5% { opacity: 0; }
  100% { stroke-dashoffset: 100; opacity: 0; }
}

@keyframes gearsPulseMarkerElbow {
  0%, 44% { opacity: 0; transform: scale(0.4); }
  45.5% { opacity: 1; transform: scale(1.6); filter: drop-shadow(0 0 10px #00FFB2); }
  48.5% { transform: scale(1); filter: drop-shadow(0 0 4px #00FFB2); }
  92% { opacity: 1; transform: scale(1); }
  94.5% { opacity: 0; }
  100% { opacity: 0; }
}

@keyframes gearsRevealLabelElbow {
  0%, 45% {
    opacity: 0;
    transform: translateY(6px) scale(0.92);
  }
  48% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: drop-shadow(0 0 8px #00FFB2);
  }
  52% {
    opacity: 0.92;
    filter: drop-shadow(0 0 2px rgba(60, 255, 176, 0.4));
  }
  92% {
    opacity: 0.92;
    transform: translateY(0) scale(1);
  }
  94.5% {
    opacity: 0;
    transform: translateY(-4px);
  }
  100% {
    opacity: 0;
  }
}

/* ================= STAGE 3: ROBOT HEIGHT (Hits at ~52.8%) ================= */
html.robonix-intro-dismissed .scene[data-index="0"].is-active .gears-conn-height {
  animation: gearsDrawConnHeight 8s ease-in-out infinite;
}
html.robonix-intro-dismissed .scene[data-index="0"].is-active .gears-card-height {
  animation: gearsRevealCardHeight 8s ease-in-out infinite;
}

@keyframes gearsDrawConnHeight {
  0%, 51% { stroke-dashoffset: 100; opacity: 0; }
  52% { opacity: 1; }
  55% { stroke-dashoffset: 0; opacity: 1; }
  92% { stroke-dashoffset: 0; opacity: 1; }
  94.5% { opacity: 0; }
  100% { stroke-dashoffset: 100; opacity: 0; }
}

@keyframes gearsRevealCardHeight {
  0%, 52% {
    opacity: 0;
    transform: translate(1008px, 370px) translateY(8px) scale(0.95);
    filter: drop-shadow(0 0 0 transparent);
  }
  55% {
    opacity: 1;
    transform: translate(1008px, 370px) translateY(0) scale(1);
    filter: drop-shadow(0 0 14px rgba(60, 255, 176, 0.85));
  }
  59% {
    opacity: 0.96;
    filter: drop-shadow(0 0 4px rgba(60, 255, 176, 0.3));
  }
  92% {
    opacity: 0.96;
    transform: translate(1008px, 370px) translateY(0) scale(1);
  }
  94.5% {
    opacity: 0;
    transform: translate(1008px, 370px) translateY(-4px) scale(0.98);
  }
  100% {
    opacity: 0;
  }
}

/* ================= STAGE 5 (4): J1 • SHOULDER (Hits at ~56.8%) ================= */
html.robonix-intro-dismissed .scene[data-index="0"].is-active .gears-marker-shoulder,
html.robonix-intro-dismissed .scene[data-index="0"].is-active .gears-ring-shoulder {
  animation: gearsPulseMarkerShoulder 8s ease-in-out infinite;
}
html.robonix-intro-dismissed .scene[data-index="0"].is-active .gears-label-shoulder {
  animation: gearsRevealLabelShoulder 8s ease-in-out infinite;
}

@keyframes gearsPulseMarkerShoulder {
  0%, 55% { opacity: 0; transform: scale(0.4); }
  56.5% { opacity: 1; transform: scale(1.6); filter: drop-shadow(0 0 10px #00FFB2); }
  59.5% { transform: scale(1); filter: drop-shadow(0 0 4px #00FFB2); }
  92% { opacity: 1; transform: scale(1); }
  94.5% { opacity: 0; }
  100% { opacity: 0; }
}

@keyframes gearsRevealLabelShoulder {
  0%, 56% {
    opacity: 0;
    transform: translateY(6px) scale(0.92);
  }
  59% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: drop-shadow(0 0 8px #00FFB2);
  }
  63% {
    opacity: 0.92;
    filter: drop-shadow(0 0 2px rgba(60, 255, 176, 0.4));
  }
  92% {
    opacity: 0.92;
    transform: translateY(0) scale(1);
  }
  94.5% {
    opacity: 0;
    transform: translateY(-4px);
  }
  100% {
    opacity: 0;
  }
}

/* ================= STAGE 4: ACTUATION • DEGREES OF FREEDOM (Hits at ~64.5%) ================= */
html.robonix-intro-dismissed .scene[data-index="0"].is-active .gears-conn-dof {
  animation: gearsDrawConnDof 8s ease-in-out infinite;
}
html.robonix-intro-dismissed .scene[data-index="0"].is-active .gears-card-dof {
  animation: gearsRevealCardDof 8s ease-in-out infinite;
}

@keyframes gearsDrawConnDof {
  0%, 63% { stroke-dashoffset: 100; opacity: 0; }
  64% { opacity: 1; }
  67% { stroke-dashoffset: 0; opacity: 1; }
  92% { stroke-dashoffset: 0; opacity: 1; }
  94.5% { opacity: 0; }
  100% { stroke-dashoffset: 100; opacity: 0; }
}

@keyframes gearsRevealCardDof {
  0%, 64% {
    opacity: 0;
    transform: translate(930px, 205px) translateY(8px) scale(0.95);
    filter: drop-shadow(0 0 0 transparent);
  }
  67.5% {
    opacity: 1;
    transform: translate(930px, 205px) translateY(0) scale(1);
    filter: drop-shadow(0 0 16px rgba(60, 255, 176, 0.9));
  }
  71% {
    opacity: 0.96;
    filter: drop-shadow(0 0 4px rgba(60, 255, 176, 0.3));
  }
  92% {
    opacity: 0.96;
    transform: translate(930px, 205px) translateY(0) scale(1);
  }
  94.5% {
    opacity: 0;
    transform: translate(930px, 205px) translateY(-4px) scale(0.98);
  }
  100% {
    opacity: 0;
  }
}

/* ================= STAGE 6: HEAD SCAN & CONFIRMATION (Hits at ~68-70%) ================= */
html.robonix-intro-dismissed .scene[data-index="0"].is-active .gears-head-anchor {
  animation: gearsRevealHeadFrame 8s ease-in-out infinite;
}

@keyframes gearsRevealHeadFrame {
  0%, 67% {
    opacity: 0;
    transform: translate(1322px, 218px) scale(0.85);
    filter: drop-shadow(0 0 0 transparent);
  }
  70% {
    opacity: 1;
    transform: translate(1322px, 218px) scale(1.08);
    filter: drop-shadow(0 0 16px #00FFB2);
  }
  73% {
    opacity: 1;
    transform: translate(1322px, 218px) scale(1);
    filter: drop-shadow(0 0 6px #00FFB2);
  }
  92% {
    opacity: 0.95;
    transform: translate(1322px, 218px) scale(1);
    filter: drop-shadow(0 0 4px #00FFB2);
  }
  94.5% {
    opacity: 0;
    transform: translate(1322px, 218px) scale(0.9);
  }
  100% {
    opacity: 0;
  }
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  .gears-scan-system,
  .gears-caliper-beam,
  .gears-conn-base,
  .gears-marker-base,
  .gears-ring-base,
  .gears-card-base,
  .gears-conn-knee,
  .gears-marker-knee,
  .gears-ring-knee,
  .gears-label-knee,
  .gears-marker-wrist,
  .gears-ring-wrist,
  .gears-label-wrist,
  .gears-conn-motion,
  .gears-marker-motion-anchor,
  .gears-card-motion,
  .gears-conn-elbow,
  .gears-marker-elbow,
  .gears-arc-elbow,
  .gears-label-elbow,
  .gears-conn-height,
  .gears-card-height,
  .gears-marker-shoulder,
  .gears-ring-shoulder,
  .gears-label-shoulder,
  .gears-conn-dof,
  .gears-card-dof,
  .gears-head-anchor {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    stroke-dashoffset: 0 !important;
  }
  .gears-card-base { transform: translate(900px, 855px) !important; }
  .gears-card-motion { transform: translate(910px, 545px) !important; }
  .gears-card-height { transform: translate(1008px, 370px) !important; }
  .gears-card-dof { transform: translate(930px, 205px) !important; }
  .gears-head-anchor { transform: translate(1322px, 218px) !important; }
  .gears-scan-system { display: none !important; }
}

/* =============================================================================
   R&D HUMANOID ROBOT & DIGITAL TWIN CONNECTED WORKFLOW OVERLAY
   Matching media reference: 01 ROBOT DESIGN & 02 PROTOTYPE
   Strictly NO black fills, NO subject overlap, seamless responsive alignment
   ========================================================================== */

.rnd-scrim-left {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(6, 11, 14, 0.88) 0%, rgba(6, 11, 14, 0.62) 34%, rgba(6, 11, 14, 0.18) 55%, transparent 75%);
  pointer-events: none;
  z-index: 1;
}

.rnd-circuit-network {
  pointer-events: none;
}

.rnd-circuit-track {
  fill: none !important;
  stroke: rgba(0, 229, 160, 0.22);
  stroke-width: 1.4;
  stroke-dasharray: 4 4;
}

/* Progressive Animated Flow Pathways */
.rnd-flow-path {
  fill: none !important;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  opacity: 0;
}

.rnd-flow-path--1,
.rnd-flow-path--2 {
  stroke: #00FFB2;
  filter: drop-shadow(0 0 4px #00FFB2) drop-shadow(0 0 8px rgba(0, 255, 178, 0.6));
}

.rnd-flow-path--3 {
  stroke: #00F0FF;
  filter: drop-shadow(0 0 4px #00F0FF) drop-shadow(0 0 8px rgba(0, 240, 255, 0.6));
}

/* Moving Light Pulse Tip / Highlight */
.rnd-flow-pulse {
  fill: none !important;
  stroke-width: 3.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 80 1000;
  stroke-dashoffset: 1000;
  opacity: 0;
}

.rnd-flow-pulse--1,
.rnd-flow-pulse--2 {
  stroke: #FFFFFF;
  filter: drop-shadow(0 0 6px #00FFB2) drop-shadow(0 0 12px #00FFB2);
}

.rnd-flow-pulse--3 {
  stroke: #FFFFFF;
  filter: drop-shadow(0 0 6px #00F0FF) drop-shadow(0 0 12px #00F0FF);
}

/* Full Completed Workflow Energy Shimmer Sweep */
.rnd-circuit-full-pulse {
  fill: none !important;
  stroke: url(#rndBeamGrad);
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-dasharray: 120 1000;
  stroke-dashoffset: 1000;
  opacity: 0;
  filter: drop-shadow(0 0 6px #00FFB2) drop-shadow(0 0 14px rgba(0, 240, 255, 0.85));
}

/* Anchor Nodes */
.rnd-circuit-node {
  opacity: 0.35;
  transition: opacity 0.3s ease;
  transform-box: fill-box;
}

.rnd-callout-fo {
  overflow: visible;
}

/* Dynamic R&D Process Flashcards */
.rnd-cap-box {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(4, 18, 14, 0.86);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(0, 229, 160, 0.45);
  border-radius: 6px;
  padding: 6px 12px;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.75), 0 0 12px rgba(0, 229, 160, 0.18);
  color: #FFFFFF;
  font-family: 'Inter Tight', sans-serif;
  box-sizing: border-box;
  cursor: pointer;
  pointer-events: auto;
  user-select: none;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(5px) scale(0.95);
  will-change: transform, opacity, border-color, box-shadow;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.rnd-cap-box:hover,
.rnd-cap-box:focus-visible {
  opacity: 1 !important;
  transform: translateY(-2px) scale(1.03) !important;
  border-color: #00FFB2 !important;
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.85), 0 0 22px rgba(0, 255, 178, 0.6) !important;
  outline: none;
  z-index: 20;
}

.rnd-step-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: 'Inter Tight', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  font-weight: 800;
  color: #00FFB2;
  letter-spacing: 0.04em;
  line-height: 1;
  padding: 2.5px 5.5px;
  border-radius: 4px;
  background: rgba(0, 255, 178, 0.12);
  border: 1px solid rgba(0, 255, 178, 0.35);
  flex-shrink: 0;
}

.rnd-cap-icon {
  width: 22px;
  height: 22px;
  border-radius: 4px;
  background: rgba(0, 229, 160, 0.15);
  border: 1px solid rgba(0, 229, 160, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #00FFB2;
  flex-shrink: 0;
}

.rnd-cap-icon svg {
  width: 13px;
  height: 13px;
  stroke: #00FFB2;
}

.rnd-cap-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #FFFFFF;
  text-transform: uppercase;
  line-height: 1;
}

/* Cyan Styling for Simulation (03) & Testing (04) Badges */
.rnd-step-badge--cyan {
  color: #00F0FF !important;
  background: rgba(0, 240, 255, 0.12) !important;
  border: 1px solid rgba(0, 240, 255, 0.35) !important;
}

.rnd-cap-icon--cyan {
  color: #00F0FF !important;
  background: rgba(0, 240, 255, 0.15) !important;
  border: 1px solid rgba(0, 240, 255, 0.4) !important;
}

.rnd-cap-icon--cyan svg {
  stroke: #00F0FF !important;
}

.rnd-cap-box--cyan {
  border-color: rgba(0, 240, 255, 0.45) !important;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.75), 0 0 12px rgba(0, 240, 255, 0.18) !important;
}

.rnd-cap-box--cyan:hover,
.rnd-cap-box--cyan:focus-visible {
  border-color: #00F0FF !important;
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.85), 0 0 22px rgba(0, 240, 255, 0.6) !important;
}

/* =============================================================================
   ROBONIX R&D CONNECTED WORKFLOW — 6.0s SYNCHRONIZED SEQUENTIAL TIMELINE
   Stage 01 (Robot Design) -> Stage 02 (Prototype) -> Stage 03 (Simulation) -> Stage 04 (Testing)
   ============================================================================= */

/* Active Scene Trigger */
.scene[data-index="1"].is-active .rnd-cap-box--1 {
  animation: rndCard01Workflow 6s cubic-bezier(0.16, 1, 0.3, 1) 1 forwards;
}
.scene[data-index="1"].is-active .rnd-circuit-node--1 {
  animation: rndNode01Pulse 6s ease-in-out 1 forwards;
  transform-origin: 730px 130px;
}
.scene[data-index="1"].is-active .rnd-flow-path--1 {
  animation: rndFlowPath1 6s linear 1 forwards;
}
.scene[data-index="1"].is-active .rnd-flow-pulse--1 {
  animation: rndFlowPulse1 6s linear 1 forwards;
}

.scene[data-index="1"].is-active .rnd-cap-box--2 {
  animation: rndCard02Workflow 6s cubic-bezier(0.16, 1, 0.3, 1) 1 forwards;
}
.scene[data-index="1"].is-active .rnd-circuit-node--2 {
  animation: rndNode02Pulse 6s ease-in-out 1 forwards;
  transform-origin: 660px 575px;
}
.scene[data-index="1"].is-active .rnd-flow-path--2 {
  animation: rndFlowPath2 6s linear 1 forwards;
}
.scene[data-index="1"].is-active .rnd-flow-pulse--2 {
  animation: rndFlowPulse2 6s linear 1 forwards;
}

.scene[data-index="1"].is-active .rnd-cap-box--3 {
  animation: rndCard03Workflow 6s cubic-bezier(0.16, 1, 0.3, 1) 1 forwards;
}
.scene[data-index="1"].is-active .rnd-circuit-node--3 {
  animation: rndNode03Pulse 6s ease-in-out 1 forwards;
  transform-origin: 1035px 140px;
}
.scene[data-index="1"].is-active .rnd-flow-path--3 {
  animation: rndFlowPath3 6s linear 1 forwards;
}
.scene[data-index="1"].is-active .rnd-flow-pulse--3 {
  animation: rndFlowPulse3 6s linear 1 forwards;
}

.scene[data-index="1"].is-active .rnd-cap-box--4 {
  animation: rndCard04Workflow 6s cubic-bezier(0.16, 1, 0.3, 1) 1 forwards;
}
.scene[data-index="1"].is-active .rnd-circuit-node--4 {
  animation: rndNode04Pulse 6s ease-in-out 1 forwards;
  transform-origin: 1225px 545px;
}

.scene[data-index="1"].is-active .rnd-circuit-full-pulse {
  animation: rndCircuitFullPulse 6s linear 1 forwards;
}

/* Stage 01: ROBOT DESIGN (0.0s - 0.3s emergence) */
@keyframes rndCard01Workflow {
  0% {
    opacity: 0;
    transform: translateY(5px) scale(0.95);
    border-color: rgba(0, 229, 160, 0.42);
  }
  2.5% {
    opacity: 1;
    transform: translateY(0) scale(1.02);
    border-color: #00FFB2;
    box-shadow: 0 0 22px rgba(0, 255, 178, 0.65), 0 4px 18px rgba(0, 0, 0, 0.7);
  }
  5%, 85% {
    opacity: 1;
    transform: translateY(0) scale(1);
    border-color: rgba(0, 229, 160, 0.5);
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.75), 0 0 12px rgba(0, 229, 160, 0.18);
  }
  92%, 100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    border-color: rgba(0, 229, 160, 0.5);
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.75), 0 0 12px rgba(0, 229, 160, 0.18);
  }
}

@keyframes rndNode01Pulse {
  0% { transform: scale(0.9); opacity: 0.35; }
  2.5% { transform: scale(1.4); opacity: 1; filter: drop-shadow(0 0 8px #00FFB2); }
  5%, 85% { transform: scale(1); opacity: 0.95; }
  92%, 100% { transform: scale(1); opacity: 0.95; }
}

/* Pathway 1 (Card 01 -> Card 02, 0.3s - 1.15s) */
@keyframes rndFlowPath1 {
  0%, 5% { stroke-dashoffset: 1000; opacity: 0; }
  5.1% { stroke-dashoffset: 1000; opacity: 1; }
  24% { stroke-dashoffset: 0; opacity: 1; }
  85% { stroke-dashoffset: 0; opacity: 1; }
  92%, 100% { stroke-dashoffset: 0; opacity: 1; }
}

@keyframes rndFlowPulse1 {
  0%, 5% { stroke-dashoffset: 1000; opacity: 0; }
  5.1% { stroke-dashoffset: 1000; opacity: 1; }
  23.9% { stroke-dashoffset: 0; opacity: 1; }
  24.2%, 100% { stroke-dashoffset: 0; opacity: 0; }
}

/* Stage 02: PROTOTYPE (1.15s - 1.45s emergence) */
@keyframes rndCard02Workflow {
  0%, 18.5% {
    opacity: 0;
    transform: translateY(5px) scale(0.95);
    border-color: rgba(0, 229, 160, 0.42);
  }
  21.5% {
    opacity: 1;
    transform: translateY(0) scale(1.02);
    border-color: #00FFB2;
    box-shadow: 0 0 22px rgba(0, 255, 178, 0.65), 0 4px 18px rgba(0, 0, 0, 0.7);
  }
  24%, 85% {
    opacity: 1;
    transform: translateY(0) scale(1);
    border-color: rgba(0, 229, 160, 0.5);
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.75), 0 0 12px rgba(0, 229, 160, 0.18);
  }
  92%, 100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    border-color: rgba(0, 229, 160, 0.5);
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.75), 0 0 12px rgba(0, 229, 160, 0.18);
  }
}

@keyframes rndNode02Pulse {
  0%, 18.5% { transform: scale(0.9); opacity: 0.35; }
  21.5% { transform: scale(1.4); opacity: 1; filter: drop-shadow(0 0 8px #00FFB2); }
  24%, 85% { transform: scale(1); opacity: 0.95; }
  92%, 100% { transform: scale(1); opacity: 0.95; }
}

/* Pathway 2 (Card 02 -> Card 03, 1.45s - 2.45s) */
@keyframes rndFlowPath2 {
  0%, 24% { stroke-dashoffset: 1000; opacity: 0; }
  24.1% { stroke-dashoffset: 1000; opacity: 1; }
  46% { stroke-dashoffset: 0; opacity: 1; }
  85% { stroke-dashoffset: 0; opacity: 1; }
  92%, 100% { stroke-dashoffset: 0; opacity: 1; }
}

@keyframes rndFlowPulse2 {
  0%, 24% { stroke-dashoffset: 1000; opacity: 0; }
  24.1% { stroke-dashoffset: 1000; opacity: 1; }
  45.8% { stroke-dashoffset: 0; opacity: 1; }
  46.2%, 100% { stroke-dashoffset: 0; opacity: 0; }
}

/* Stage 03: SIMULATION (2.45s - 2.75s emergence) */
@keyframes rndCard03Workflow {
  0%, 40% {
    opacity: 0;
    transform: translateY(5px) scale(0.95);
    border-color: rgba(0, 240, 255, 0.42);
  }
  43% {
    opacity: 1;
    transform: translateY(0) scale(1.02);
    border-color: #00F0FF;
    box-shadow: 0 0 22px rgba(0, 240, 255, 0.65), 0 4px 18px rgba(0, 0, 0, 0.7);
  }
  46%, 85% {
    opacity: 1;
    transform: translateY(0) scale(1);
    border-color: rgba(0, 240, 255, 0.5);
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.75), 0 0 12px rgba(0, 240, 255, 0.18);
  }
  92%, 100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    border-color: rgba(0, 240, 255, 0.5);
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.75), 0 0 12px rgba(0, 240, 255, 0.18);
  }
}

@keyframes rndNode03Pulse {
  0%, 40% { transform: scale(0.9); opacity: 0.35; }
  43% { transform: scale(1.4); opacity: 1; filter: drop-shadow(0 0 8px #00F0FF); }
  46%, 85% { transform: scale(1); opacity: 0.95; }
  92%, 100% { transform: scale(1); opacity: 0.95; }
}

/* Pathway 3 (Card 03 -> Card 04, 2.75s - 3.65s) */
@keyframes rndFlowPath3 {
  0%, 46% { stroke-dashoffset: 1000; opacity: 0; }
  46.1% { stroke-dashoffset: 1000; opacity: 1; }
  66% { stroke-dashoffset: 0; opacity: 1; }
  85% { stroke-dashoffset: 0; opacity: 1; }
  92%, 100% { stroke-dashoffset: 0; opacity: 1; }
}

@keyframes rndFlowPulse3 {
  0%, 46% { stroke-dashoffset: 1000; opacity: 0; }
  46.1% { stroke-dashoffset: 1000; opacity: 1; }
  65.8% { stroke-dashoffset: 0; opacity: 1; }
  66.2%, 100% { stroke-dashoffset: 0; opacity: 0; }
}

/* Stage 04: TESTING (3.65s - 3.95s emergence) */
@keyframes rndCard04Workflow {
  0%, 60.5% {
    opacity: 0;
    transform: translateY(5px) scale(0.95);
    border-color: rgba(0, 240, 255, 0.42);
  }
  63.5% {
    opacity: 1;
    transform: translateY(0) scale(1.02);
    border-color: #00F0FF;
    box-shadow: 0 0 22px rgba(0, 240, 255, 0.65), 0 4px 18px rgba(0, 0, 0, 0.7);
  }
  66%, 85% {
    opacity: 1;
    transform: translateY(0) scale(1);
    border-color: rgba(0, 240, 255, 0.5);
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.75), 0 0 12px rgba(0, 240, 255, 0.18);
  }
  92%, 100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    border-color: rgba(0, 240, 255, 0.5);
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.75), 0 0 12px rgba(0, 240, 255, 0.18);
  }
}

@keyframes rndNode04Pulse {
  0%, 60.5% { transform: scale(0.9); opacity: 0.35; }
  63.5% { transform: scale(1.4); opacity: 1; filter: drop-shadow(0 0 8px #00F0FF); }
  66%, 85% { transform: scale(1); opacity: 0.95; }
  92%, 100% { transform: scale(1); opacity: 0.95; }
}

/* One slow completed-workflow sweep after the Testing card connects */
@keyframes rndCircuitFullPulse {
  0%, 65.5% { stroke-dashoffset: 1000; opacity: 0; }
  66% { stroke-dashoffset: 1000; opacity: 0.95; }
  98% { stroke-dashoffset: 0; opacity: 0.95; }
  100% { stroke-dashoffset: 0; opacity: 0; }
}

/* Mobile Callouts (< 768px): clean horizontal badge bar under header, sequential emergence */
.rnd-mobile-callouts {
  display: none;
}

@media (max-width: 767px) {
  .tech-overlay--rnd {
    display: none !important;
  }
  .rnd-mobile-callouts {
    display: flex !important;
    position: absolute;
    top: clamp(68px, 10vh, 88px);
    left: var(--pad);
    right: var(--pad);
    z-index: 10;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    pointer-events: auto;
  }
  .rnd-cap-box--mobile {
    padding: 5px 9px;
    font-size: 10.5px;
    gap: 6px;
    background: rgba(4, 18, 14, 0.9);
  }
  .rnd-cap-box--mobile .rnd-cap-icon {
    width: 18px;
    height: 18px;
  }
  .rnd-cap-box--mobile .rnd-cap-icon svg {
    width: 11px;
    height: 11px;
  }
  .rnd-cap-box--mobile .rnd-cap-title {
    font-size: 10px;
  }
  .scene[data-index="1"].is-active .rnd-mobile-card--1 {
    animation: rndCard01Workflow 6s cubic-bezier(0.16, 1, 0.3, 1) 1 forwards;
  }
  .scene[data-index="1"].is-active .rnd-mobile-card--2 {
    animation: rndCard02Workflow 6s cubic-bezier(0.16, 1, 0.3, 1) 1 forwards;
  }
  .scene[data-index="1"].is-active .rnd-mobile-card--3 {
    animation: rndCard03Workflow 6s cubic-bezier(0.16, 1, 0.3, 1) 1 forwards;
  }
  .scene[data-index="1"].is-active .rnd-mobile-card--4 {
    animation: rndCard04Workflow 6s cubic-bezier(0.16, 1, 0.3, 1) 1 forwards;
  }
}

/* Tablet (768px) and above: ensure tech-overlay--rnd is active and visible */
@media (min-width: 768px) {
  .tech-overlay--rnd {
    display: block !important;
  }
}

/* Reduced Motion Override */
@media (prefers-reduced-motion: reduce) {
  .scene[data-index="1"] .rnd-cap-box,
  .scene[data-index="1"] .rnd-flow-path,
  .scene[data-index="1"] .rnd-flow-pulse,
  .scene[data-index="1"] .rnd-circuit-node,
  .scene[data-index="1"] .rnd-circuit-full-pulse {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    stroke-dashoffset: 0 !important;
  }
}

/* Joint Reticles */
.tech-joint-dot {
  fill: var(--neon);
  filter: drop-shadow(0 0 3px rgba(60, 255, 176, 0.8));
}
.tech-joint-ring {
  fill: none; stroke: var(--neon); stroke-width: 0.85px;
  opacity: 0.65;
  transform-box: fill-box; transform-origin: center;
  animation: jointPulse 5s ease-in-out infinite;
}
.tech-joint-ring--delay1 { animation-delay: -1.25s; }
.tech-joint-ring--delay2 { animation-delay: -2.5s; }
.tech-joint-ring--delay3 { animation-delay: -3.75s; }

@keyframes jointPulse {
  0%, 100% { transform: scale(1); opacity: 0.45; }
  50%      { transform: scale(1.18); opacity: 0.85; }
}

/* Angle arc */
.tech-arc {
  fill: none; stroke: var(--neon); stroke-width: 0.85px;
  stroke-dasharray: 3 3; opacity: 0.65;
}

/* 3D Print Head Motion */
.tech-printhead {
  animation: printHeadSweep 8s ease-in-out infinite alternate;
}
@keyframes printHeadSweep {
  0%   { transform: translateX(0px); }
  50%  { transform: translateX(22px); }
  100% { transform: translateX(4px); }
}

.tech-extruder-dot {
  fill: var(--neon);
  animation: extruderGlow 2.5s ease-in-out infinite;
}
@keyframes extruderGlow {
  0%, 100% { opacity: 0.4; }
  50%      { opacity: 0.95; filter: drop-shadow(0 0 4px var(--neon)); }
}

/* Bounding Box Brackets */
.tech-bracket {
  fill: none; stroke: var(--neon); stroke-width: 1.2px; stroke-linecap: round;
}

/* Educational Progression Sequence: OBSERVE -> MEASURE -> ANALYZE -> BUILD -> EXPERIMENT */
.tech-progression {
  opacity: 0.85;
}
.tech-phase {
  font-family: 'Inter Tight', ui-monospace, monospace;
  font-size: 8.5px; font-weight: 700; letter-spacing: 0.18em;
  fill: rgba(255, 255, 255, 0.4);
}
.tech-phase-arrow {
  font-size: 7.5px; fill: rgba(60, 255, 176, 0.45);
}

/* Subtle step sequencer cycling through 5 stages */
.tech-phase--1 { animation: cyclePhase1 15s ease-in-out infinite; }
.tech-phase--2 { animation: cyclePhase2 15s ease-in-out infinite; }
.tech-phase--3 { animation: cyclePhase3 15s ease-in-out infinite; }
.tech-phase--4 { animation: cyclePhase4 15s ease-in-out infinite; }
.tech-phase--5 { animation: cyclePhase5 15s ease-in-out infinite; }

@keyframes cyclePhase1 {
  0%, 20%   { fill: var(--neon); opacity: 1; filter: drop-shadow(0 0 3px var(--neon)); }
  25%, 100% { fill: rgba(255, 255, 255, 0.35); opacity: 0.6; filter: none; }
}
@keyframes cyclePhase2 {
  0%, 20%   { fill: rgba(255, 255, 255, 0.35); opacity: 0.6; filter: none; }
  25%, 45%  { fill: var(--neon); opacity: 1; filter: drop-shadow(0 0 3px var(--neon)); }
  50%, 100% { fill: rgba(255, 255, 255, 0.35); opacity: 0.6; filter: none; }
}
@keyframes cyclePhase3 {
  0%, 45%   { fill: rgba(255, 255, 255, 0.35); opacity: 0.6; filter: none; }
  50%, 70%  { fill: var(--neon); opacity: 1; filter: drop-shadow(0 0 3px var(--neon)); }
  75%, 100% { fill: rgba(255, 255, 255, 0.35); opacity: 0.6; filter: none; }
}
@keyframes cyclePhase4 {
  0%, 70%   { fill: rgba(255, 255, 255, 0.35); opacity: 0.6; filter: none; }
  75%, 90%  { fill: var(--neon); opacity: 1; filter: drop-shadow(0 0 3px var(--neon)); }
  95%, 100% { fill: rgba(255, 255, 255, 0.35); opacity: 0.6; filter: none; }
}
@keyframes cyclePhase5 {
  0%, 90%   { fill: rgba(255, 255, 255, 0.35); opacity: 0.6; filter: none; }
  92%, 99%  { fill: var(--neon); opacity: 1; filter: drop-shadow(0 0 3px var(--neon)); }
  100%      { fill: rgba(255, 255, 255, 0.35); opacity: 0.6; filter: none; }
}

/* Gentle overall breathing for measurement annotations */
.tech-dim, .tech-data-tag {
  animation: gentleBreathe 7s ease-in-out infinite;
}
.tech-dim--alt { animation-delay: -3.5s; }
@keyframes gentleBreathe {
  0%, 100% { opacity: 0.55; }
  50%      { opacity: 0.85; }
}

/* ---------- Responsive Breakpoints ---------- */
@media (max-width: 1180px) {
  .nav__link { padding: 8px 10px; }
  .btn-contact { padding: 12px 18px; }
}

@media (max-width: 1024px) {
  .nav { display: none; }
  .burger { display: block; }
  .hero__copy { width: min(680px, 78vw); }
  .title { font-size: clamp(36px, 6.4vw, 64px); }
}

@media (max-width: 900px), (orientation: portrait) {
  .scene img { object-position: 70% 50%; }
  .scrim {
    background:
      linear-gradient(180deg, rgba(3, 10, 10, .6) 0%, rgba(3, 10, 10, .1) 20%, rgba(3, 10, 10, .2) 38%, rgba(3, 10, 10, .85) 60%, rgba(3, 10, 10, .98) 100%);
  }
  .hero { align-items: flex-end; padding-bottom: clamp(16px, 3vh, 32px); }
  .hero__copy { width: 100%; max-width: 640px; }
  .hud__rail, .reticle { display: none; }
  .hud__corner { width: 19px; height: 19px; }
  .hud__corner--tl { top: 10px; left: 10px; }
  .hud__corner--tr { top: 10px; right: 10px; }
  .hud__corner--bl { bottom: 7px; left: 10px; }
  .hud__corner--br { bottom: 7px; right: 10px; }
  .footer { gap: 10px; padding: 12px clamp(36px, 3.8vw, 44px); }
  .footer__right { gap: 8px; }
}

/* Below 768px & mobile portrait: hide all .hud-label elements, HUD connector lines and sensor dots */
@media (max-width: 768px), (orientation: portrait) {
  .hud-label,
  .hud-connector,
  .hud-dot,
  .hud-fo,
  .tech-overlay:not(.tech-overlay--rnd),
  .proj-lead-line,
  .proj-guide-line,
  .proj-beam-scan-up,
  .proj-scan-head,
  .proj-target-dot,
  .proj-target-ring,
  .proj-status-dot,
  .proj-card,
  .tech-line,
  .tech-tick,
  .tech-link,
  .tech-arc,
  .tech-dim,
  .tech-joint,
  .tech-joint-dot,
  .tech-joint-ring,
  .eco-arm-hud,
  .eco-arm-bone,
  .eco-arm-bone--thin,
  .eco-data-line,
  .eco-laser-beam,
  .eco-print-sweep,
  .eco-joint-node,
  .eco-joint-ring,
  .eco-tcp-laser,
  .eco-tcp-crosshair,
  .eco-work-arc,
  .eco-arm-ring,
  .twin-grid-line,
  .twin-ring,
  .twin-sim-sweep,
  .twin-sensor-node,
  .twin-metrics,
  .twin-tag,
  .twin-robot-telemetry,
  foreignObject:has(.hud-label) {
    display: none !important;
  }
}

/* Hero Footer Bar on screens below 768px: 2 centered lines (tagline + copyright), hide website/email links */
@media (max-width: 768px) {
  .footer {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 4px;
    padding: 8px 30px;
    font-size: 12px;
    text-align: center;
  }
  .footer__center {
    order: 1;
    font-size: clamp(14px, 1.1vw, 17px);
    font-weight: 500;
    color: rgba(255, 255, 255, 0.88);
    line-height: 1.35;
    white-space: normal;
  }
  .footer__left {
    order: 2;
    color: rgba(255, 255, 255, 0.82);
    font-size: clamp(13px, 1vw, 14px);
    font-weight: 500;
    line-height: 1.25;
  }
  .footer__right {
    display: none !important;
  }
}

/* Tablet Flashcard & Subflash Fluid Layout */
@media (min-width: 601px) and (max-width: 900px) {
  .deck__subflash-slot {
    min-height: 48px;
    margin-top: 6px;
  }
  .deck__subflash {
    min-height: 48px;
    padding-left: clamp(14px, 2vw, 20px);
    padding-right: clamp(14px, 2vw, 20px);
  }
  .subflash__track {
    min-width: 220px;
    max-width: calc(100% - 64px);
  }
  .subflash__title {
    font-size: clamp(11.5px, 1.4vw, 13px);
    letter-spacing: 0.08em;
  }
}

@media (max-width: 600px) {
  .deck__subflash-slot {
    min-height: 48px;
    margin-top: 6px;
    margin-bottom: 2px;
  }
  .deck__subflash {
    min-height: 48px;
    padding-left: 14px;
    padding-right: 14px;
    margin-top: 0;
    margin-bottom: 0;
  }
  .subflash__row {
    gap: 8px;
  }
  .subflash__arrow {
    width: 22px;
    height: 22px;
  }
  .subflash__arrow svg {
    width: 10px;
    height: 10px;
  }
  .subflash__track {
    min-width: 215px;
  }
  .subflash__title {
    font-size: 11px;
    letter-spacing: 0.07em;
    white-space: normal;
  }
  .subflash__dots {
    margin-left: 30px;
    gap: 6px;
    margin-top: 6px;
  }
  .subflash__dot {
    width: 5px;
    height: 5px;
  }
  .title { font-size: clamp(30px, 9.4vw, 44px); line-height: 1.02; }
  .title__line { white-space: normal; }
  .subline { font-size: 14px; }
  .subline i { margin: 0 .3em; }
  .cta__icon { width: 38px; height: 38px; }
  .card { grid-template-columns: auto auto 1fr; padding: 14px 16px; }
  .card__go { display: none; }
  .card__divider { height: 36px; }
  .hud__corner { width: 16px; height: 16px; }
  .hud__corner--tl { top: 8px; left: 8px; }
  .hud__corner--tr { top: 8px; right: 8px; }
  .hud__corner--bl { bottom: 6px; left: 8px; }
  .hud__corner--br { bottom: 6px; right: 8px; }
}

/* =============================================================================
   CONSULTING HERO — RIGHT-SIDE DIGITAL TWIN & DIGITAL FACTORY ANIMATION
   Strictly scoped to right-side visual area. Zero impact on left side.
   ============================================================================= */

/* 3D Viewport container */
.twin-viewport {
  width: 100%;
  height: 100%;
  perspective: 800px;
  perspective-origin: 50% 28%;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

/* 3D World / Rotating Core: 15s Cycle */
.twin-core {
  position: relative;
  width: 260px;
  height: 220px;
  transform-style: preserve-3d;
  transform: rotateX(60deg) rotateZ(15deg);
  animation: twinRotationCycle 15s ease-in-out infinite;
}

@keyframes twinRotationCycle {
  0% {
    transform: rotateX(60deg) rotateZ(10deg);
  }
  26.6% { /* 0 - 4s: slow 3D rotation */
    transform: rotateX(60deg) rotateZ(32deg);
  }
  40% { /* 4 - 6s: area highlight */
    transform: rotateX(60deg) rotateZ(42deg);
  }
  60% { /* 6 - 9s: data flow travels */
    transform: rotateX(60deg) rotateZ(58deg);
  }
  80% { /* 9 - 12s: continues rotating */
    transform: rotateX(60deg) rotateZ(75deg);
  }
  100% { /* 12 - 15s: simulation layer & loop reset */
    transform: rotateX(60deg) rotateZ(10deg);
  }
}

/* Base Factory Hologram Floor Plate */
.twin-base-plate {
  position: absolute;
  inset: -20px;
  border-radius: 12px;
  border: 1px solid rgba(60, 255, 176, 0.35);
  background: radial-gradient(circle, rgba(60, 255, 176, 0.08) 0%, transparent 75%);
  box-shadow: 0 0 25px -5px rgba(60, 255, 176, 0.3), inset 0 0 15px rgba(60, 255, 176, 0.15);
  transform: translateZ(0px);
}

/* 3D Building Boxes */
.twin-box {
  position: absolute;
  transform-style: preserve-3d;
}

.twin-box .face {
  position: absolute;
  background: rgba(8, 28, 24, 0.45);
  border: 1px solid rgba(60, 255, 176, 0.65);
  box-shadow: inset 0 0 8px rgba(60, 255, 176, 0.2);
  -webkit-backface-visibility: visible;
  backface-visibility: visible;
}

.twin-box .face--top {
  background: rgba(60, 255, 176, 0.22);
  border-color: #3CFFB0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Inter Tight', ui-monospace, monospace;
  font-size: 7px;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.1em;
  text-shadow: 0 0 4px var(--neon);
}

/* Main Plant Building: 80x60, H=50 */
.twin-box--main {
  width: 80px;
  height: 60px;
  left: 30px;
  top: 40px;
  transform: translateZ(0);
}
.twin-box--main .face--front  { width: 80px; height: 50px; transform: rotateX(-90deg) translateZ(0px); transform-origin: bottom; }
.twin-box--main .face--back   { width: 80px; height: 50px; transform: rotateX(90deg) translateZ(-60px); transform-origin: top; }
.twin-box--main .face--left   { width: 60px; height: 50px; transform: rotateY(-90deg) translateZ(0px); transform-origin: left; }
.twin-box--main .face--right  { width: 60px; height: 50px; transform: rotateY(90deg) translateZ(-80px); transform-origin: right; }
.twin-box--main .face--top    { width: 80px; height: 60px; transform: translateZ(50px); }

/* Assembly Cell (Highlight area at 4-6s): 60x50, H=65 */
.twin-box--cell {
  width: 60px;
  height: 50px;
  left: 130px;
  top: 35px;
  transform: translateZ(0);
  animation: cellHighlight 15s ease-in-out infinite;
}
.twin-box--cell .face--front  { width: 60px; height: 65px; transform: rotateX(-90deg) translateZ(0px); transform-origin: bottom; }
.twin-box--cell .face--back   { width: 60px; height: 65px; transform: rotateX(90deg) translateZ(-50px); transform-origin: top; }
.twin-box--cell .face--left   { width: 50px; height: 65px; transform: rotateY(-90deg) translateZ(0px); transform-origin: left; }
.twin-box--cell .face--right  { width: 50px; height: 65px; transform: rotateY(90deg) translateZ(-60px); transform-origin: right; }
.twin-box--cell .face--top    { width: 60px; height: 50px; transform: translateZ(65px); }

@keyframes cellHighlight {
  0%, 25% {
    filter: drop-shadow(0 0 2px rgba(60, 255, 176, 0.4));
  }
  26.6%, 40% { /* 4s - 6s highlight */
    filter: drop-shadow(0 0 14px rgba(60, 255, 176, 1)) drop-shadow(0 0 24px rgba(0, 194, 122, 0.8));
  }
  41%, 100% {
    filter: drop-shadow(0 0 2px rgba(60, 255, 176, 0.4));
  }
}

/* Logistics Bay: 70x45, H=38 */
.twin-box--logistics {
  width: 70px;
  height: 45px;
  left: 60px;
  top: 125px;
  transform: translateZ(0);
}
.twin-box--logistics .face--front  { width: 70px; height: 38px; transform: rotateX(-90deg) translateZ(0px); transform-origin: bottom; }
.twin-box--logistics .face--back   { width: 70px; height: 38px; transform: rotateX(90deg) translateZ(-45px); transform-origin: top; }
.twin-box--logistics .face--left   { width: 45px; height: 38px; transform: rotateY(-90deg) translateZ(0px); transform-origin: left; }
.twin-box--logistics .face--right  { width: 45px; height: 38px; transform: rotateY(90deg) translateZ(-70px); transform-origin: right; }
.twin-box--logistics .face--top    { width: 70px; height: 45px; transform: translateZ(38px); }

/* Silo Tower: 26x26, H=85 */
.twin-box--silo {
  width: 26px;
  height: 26px;
  left: 170px;
  top: 115px;
  transform: translateZ(0);
}
.twin-box--silo .face--front  { width: 26px; height: 85px; transform: rotateX(-90deg) translateZ(0px); transform-origin: bottom; }
.twin-box--silo .face--back   { width: 26px; height: 85px; transform: rotateX(90deg) translateZ(-26px); transform-origin: top; }
.twin-box--silo .face--left   { width: 26px; height: 85px; transform: rotateY(-90deg) translateZ(0px); transform-origin: left; }
.twin-box--silo .face--right  { width: 26px; height: 85px; transform: rotateY(90deg) translateZ(-26px); transform-origin: right; }
.twin-box--silo .face--top    { width: 26px; height: 26px; transform: translateZ(85px); }

/* Data Flow Conveyor Lines (6s - 9s flow) */
.twin-flow-path {
  position: absolute;
  height: 2px;
  background: linear-gradient(90deg, transparent, #3CFFB0, transparent);
  box-shadow: 0 0 8px #3CFFB0;
  transform: translateZ(2px);
  animation: dataFlowPulse 15s ease-in-out infinite;
}
.twin-flow-path--1 {
  width: 90px;
  left: 90px;
  top: 80px;
  transform: rotateZ(35deg) translateZ(4px);
}
.twin-flow-path--2 {
  width: 75px;
  left: 105px;
  top: 130px;
  transform: rotateZ(-25deg) translateZ(4px);
}

@keyframes dataFlowPulse {
  0%, 39% { opacity: 0.3; }
  40%, 60% { /* 6s - 9s */ opacity: 1; filter: drop-shadow(0 0 10px #3CFFB0); }
  61%, 100% { opacity: 0.3; }
}

/* Simulation Layer (12s - 15s brief appearance) */
.twin-sim-layer {
  position: absolute;
  inset: -10px;
  border-radius: 8px;
  background: repeating-linear-gradient(
    45deg,
    rgba(60, 255, 176, 0.08) 0px,
    rgba(60, 255, 176, 0.08) 6px,
    transparent 6px,
    transparent 12px
  );
  border: 1.5px solid rgba(60, 255, 176, 0.7);
  box-shadow: 0 0 24px rgba(60, 255, 176, 0.5), inset 0 0 16px rgba(60, 255, 176, 0.25);
  transform: translateZ(75px);
  animation: simLayerFade 15s ease-in-out infinite;
  pointer-events: none;
}

@keyframes simLayerFade {
  0%, 79% {
    opacity: 0;
    transform: translateZ(75px) scale(0.9);
  }
  80%, 96% { /* 12s - 15s */
    opacity: 0.9;
    transform: translateZ(75px) scale(1);
  }
  98%, 100% {
    opacity: 0;
    transform: translateZ(75px) scale(1.02);
  }
}

/* SVG Table Elements */
.twin-grid-line {
  fill: none;
  stroke: rgba(60, 255, 176, 0.28);
  stroke-width: 1px;
}
.twin-ring {
  fill: none;
  stroke: rgba(60, 255, 176, 0.35);
  stroke-width: 1px;
  stroke-dasharray: 4 6;
  transform-origin: 640px 700px;
  animation: twinRingSpin 30s linear infinite;
}
@keyframes twinRingSpin {
  to { transform: rotate(360deg); }
}

/* Table Simulation Sweep */
.twin-sim-sweep {
  fill: none;
  stroke: var(--neon);
  stroke-width: 1.8px;
  opacity: 0.75;
  filter: drop-shadow(0 0 8px var(--neon));
  animation: twinSweepMotion 5s ease-in-out infinite;
}
@keyframes twinSweepMotion {
  0% { transform: translateX(0px); opacity: 0; }
  15% { opacity: 0.85; }
  85% { opacity: 0.85; }
  100% { transform: translateX(340px); opacity: 0; }
}

/* Sensor Nodes */
.twin-sensor-node {
  fill: var(--neon);
  filter: drop-shadow(0 0 5px var(--neon));
  animation: statusBlink 2.2s ease-in-out infinite;
}

/* Technical Indicator Badges */
.twin-badge-panel {
  fill: rgba(4, 18, 16, 0.88);
  stroke: rgba(60, 255, 176, 0.55);
  stroke-width: 1px;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.twin-metric-track {
  fill: rgba(255, 255, 255, 0.12);
  rx: 2px;
}
.twin-metric-fill {
  fill: var(--neon);
  rx: 2px;
  filter: drop-shadow(0 0 4px var(--neon));
}
.twin-metric-fill--87 { width: 78px; animation: metricPulse87 4s ease-in-out infinite; }
.twin-metric-fill--92 { width: 83px; animation: metricPulse92 4s ease-in-out infinite 0.5s; }

@keyframes metricPulse87 {
  0%, 100% { width: 78px; }
  50% { width: 82px; }
}
@keyframes metricPulse92 {
  0%, 100% { width: 83px; }
  50% { width: 87px; }
}

/* Robot Visor Illumination & Sensor Scan */
.twin-robot-visor {
  fill: var(--neon);
  filter: drop-shadow(0 0 6px var(--neon)) drop-shadow(0 0 12px rgba(60, 255, 176, 0.8));
  animation: visorPulse 3s ease-in-out infinite;
}
@keyframes visorPulse {
  0%, 100% { opacity: 0.65; }
  50% { opacity: 1; filter: drop-shadow(0 0 9px var(--neon)) drop-shadow(0 0 18px rgba(60, 255, 176, 0.95)); }
}
.twin-robot-reticle {
  fill: none;
  stroke: rgba(60, 255, 176, 0.45);
  stroke-width: 1px;
  stroke-dasharray: 4 4;
  animation: jointPulse 4s ease-in-out infinite;
}

/* =============================================================================
   Robotics Ecosystem (Scene 04): Industrial Robotic Arms Digital Kinematics Overlay
   ========================================================================== */
.tech-overlay--ecosystem {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none; z-index: 2; overflow: hidden;
}

.eco-arm-bone {
  fill: none;
  stroke: var(--neon, #00E08E);
  stroke-width: 1.5px;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 5px rgba(60, 255, 176, 0.7));
}

.eco-arm-bone--thin {
  fill: none;
  stroke: rgba(60, 255, 176, 0.6);
  stroke-width: 1px;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 3px rgba(60, 255, 176, 0.4));
}

.eco-arm-pulse {
  fill: none;
  stroke: #3CFFB0;
  stroke-width: 1.8px;
  stroke-dasharray: 8 16;
  stroke-linecap: round;
  filter: drop-shadow(0 0 7px #3CFFB0);
  animation: ecoPulseFlow 2.8s linear infinite;
}

@keyframes ecoPulseFlow {
  to { stroke-dashoffset: -48; }
}

.eco-data-line {
  fill: none;
  stroke: rgba(60, 255, 176, 0.45);
  stroke-width: 1px;
  stroke-dasharray: 4 6;
  animation: ecoDataFlow 3s linear infinite;
}

@keyframes ecoDataFlow {
  to { stroke-dashoffset: -20; }
}

.eco-arm-ring {
  fill: none;
  stroke: var(--neon, #00E08E);
  stroke-width: 1.2px;
  stroke-dasharray: 4 4;
  filter: drop-shadow(0 0 4px rgba(60, 255, 176, 0.6));
}

.eco-work-arc {
  fill: none;
  stroke: rgba(60, 255, 176, 0.35);
  stroke-width: 1px;
  stroke-dasharray: 4 6;
}

.eco-joint-node {
  fill: var(--neon, #00E08E);
  filter: drop-shadow(0 0 6px #3CFFB0);
}

.eco-joint-ring {
  fill: none;
  stroke: #3CFFB0;
  stroke-width: 1.2px;
  stroke-dasharray: 3 3;
  transform-origin: center;
  animation: ecoJointSpin 12s linear infinite;
}

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

.eco-tcp-laser {
  fill: none;
  stroke: #3CFFB0;
  stroke-width: 1.2px;
  stroke-dasharray: 4 6;
  animation: ecoLaserPulse 2s ease-in-out infinite;
}

@keyframes ecoLaserPulse {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; filter: drop-shadow(0 0 6px #3CFFB0); }
}

.eco-laser-beam {
  fill: none;
  stroke: #00E5A0;
  stroke-width: 1.5px;
  stroke-dasharray: 6 10;
  filter: drop-shadow(0 0 8px rgba(0, 229, 160, 0.85));
  animation: ecoBeamFlow 1.6s linear infinite;
}

@keyframes ecoBeamFlow {
  to { stroke-dashoffset: -32; }
}

.eco-print-sweep {
  fill: none;
  stroke: #3CFFB0;
  stroke-width: 1.2px;
  stroke-dasharray: 4 6;
  filter: drop-shadow(0 0 5px rgba(60, 255, 176, 0.75));
  animation: ecoPrintSweep 2.2s ease-in-out infinite alternate;
}

@keyframes ecoPrintSweep {
  0% { opacity: 0.4; stroke-dashoffset: 0; }
  100% { opacity: 1; stroke-dashoffset: 30; }
}

.eco-touch-pulse {
  fill: none;
  stroke: #00E5A0;
  stroke-width: 1.5px;
  stroke-dasharray: 4 4;
  transform-box: fill-box;
  transform-origin: center;
  filter: drop-shadow(0 0 8px rgba(0, 229, 160, 0.9));
  animation: ecoTouchPulse 1.8s ease-out infinite;
}

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

.eco-hud-box {
  fill: rgba(4, 18, 16, 0.82);
  stroke: rgba(60, 255, 176, 0.55);
  stroke-width: 1px;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.eco-hud-text {
  font-family: 'Inter Tight', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.14em;
  fill: #3CFFB0;
  text-shadow: 0 0 6px rgba(0, 0, 0, 0.9);
}

.eco-hud-sub {
  font-family: 'Inter', sans-serif;
  font-size: 7.5px;
  font-weight: 500;
  letter-spacing: 0.08em;
  fill: rgba(220, 255, 240, 0.85);
  text-shadow: 0 0 4px rgba(0, 0, 0, 0.9);
}

.eco-tcp-crosshair {
  stroke: #3CFFB0;
  stroke-width: 1px;
}

/* Collaborative Arm HUD Badge with clamp padding, max-width and shared HUD styling */
.eco-arm-hud {
  position: absolute;
  top: clamp(210px, 25vh, 265px);
  right: clamp(16px, 3vw, 48px);
  max-width: 240px;
  padding: 3px 8px;
  background: rgba(5, 15, 12, 0.72);
  border: 1px solid rgba(46, 242, 165, 0.35);
  border-radius: 4px;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.6);
  pointer-events: none;
  z-index: 5;
  display: inline-flex;
  flex-direction: column;
  gap: 2px;
}
.eco-arm-hud .eco-hud-title {
  display: block;
  font-family: 'Inter Tight', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: clamp(10px, 0.75vw, 12px);
  font-weight: 600;
  letter-spacing: 0.08em;
  color: #2EF2A5;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
  white-space: nowrap;
}
.eco-arm-hud .eco-hud-sub {
  display: block;
  font-family: 'Inter Tight', sans-serif;
  font-size: clamp(9px, 0.65vw, 10.5px);
  font-weight: 500;
  letter-spacing: 0.06em;
  color: rgba(220, 255, 240, 0.85);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
  white-space: nowrap;
}

/* ---------- Prefers-Reduced-Motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .1s !important;
  }
  .scan { display: none; }
}




/* ROBONIX CONSULTING HERO — COMPLETE 3D LAYERED UI DESIGN SYSTEM */

/* Layer 1/6: Left-Side Dark Contrast Scrim for Flawless Typography Legibility */
.consulting-scrim-left {
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  background: linear-gradient(90deg, rgba(2, 10, 8, 0.82) 0%, rgba(2, 10, 8, 0.70) 55%, rgba(2, 10, 8, 0.28) 80%, transparent 100%);
  pointer-events: none;
  z-index: 5;
}

/* Layer 5: Foreground Workbench Sheen & Edge Reflection Depth Plane */
.consulting-workbench-sheen {
  position: absolute;
  left: 700px;
  bottom: 0;
  width: 1220px;
  height: 160px;
  background: linear-gradient(180deg, rgba(60, 255, 176, 0.10) 0%, rgba(2, 12, 9, 0.40) 50%, rgba(0, 0, 0, 0.75) 100%);
  border-top: 1px solid rgba(60, 255, 176, 0.32);
  box-shadow: 0 -10px 30px rgba(0, 229, 160, 0.08);
  pointer-events: none;
  z-index: 8;
}

/* 3D Perspective Stage for Layered Elements */
.consulting-3d-stage {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  perspective: 1400px;
  perspective-origin: 65% 50%;
  pointer-events: none;
  z-index: 10;
}

/* Layer 3: Central Floating Digital Twin Translucent Glass Panel */
.consulting-glass-panel {
  position: absolute;
  left: 850px;
  top: 220px;
  width: 590px;
  height: 530px;
  background: linear-gradient(145deg, rgba(6, 26, 20, 0.78) 0%, rgba(3, 14, 11, 0.88) 100%);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid rgba(60, 255, 176, 0.38);
  border-radius: 14px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.7), 0 0 35px rgba(0, 229, 160, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.18);
  transform: rotateY(-6deg) rotateX(2deg) translateZ(20px);
  transform-style: preserve-3d;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease, border-color 0.4s ease;
  pointer-events: auto;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.consulting-glass-panel:hover {
  transform: rotateY(-4deg) rotateX(1deg) translateY(-4px) translateZ(35px);
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.75), 0 0 45px rgba(60, 255, 176, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.25);
  border-color: rgba(60, 255, 176, 0.6);
}

.glass-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 18px;
  background: rgba(3, 16, 12, 0.75);
  border-bottom: 1px solid rgba(60, 255, 176, 0.2);
}

.glass-panel-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: #3CFFB0;
  text-transform: uppercase;
}

.glass-pulse-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #00FFB2;
  box-shadow: 0 0 8px #00FFB2;
  animation: sensorBlink 2s infinite;
}

.glass-panel-id {
  font-family: monospace;
  font-size: 9.5px;
  letter-spacing: 0.08em;
  color: rgba(180, 230, 210, 0.65);
}

.glass-panel-canvas {
  flex: 1;
  position: relative;
  width: 100%;
  height: 100%;
}

.glass-panel-canvas svg {
  width: 100%;
  height: 100%;
  display: block;
}

.glass-panel-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 18px;
  background: rgba(2, 12, 9, 0.85);
  border-top: 1px solid rgba(60, 255, 176, 0.18);
  font-family: monospace;
  font-size: 9.5px;
  letter-spacing: 0.06em;
  color: #A7F3D0;
}

.telemetry-chip {
  display: flex;
  align-items: center;
  gap: 5px;
}

.telemetry-val {
  font-weight: 700;
  color: #34F0A8;
}

/* Layer 4: Vertical Floating Process Cards Stack (Right Side) */
.consulting-process-stack {
  position: absolute;
  left: 1480px;
  top: 235px;
  width: 350px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  pointer-events: auto;
  transform-style: preserve-3d;
}

.process-glass-card {
  position: relative;
  background: linear-gradient(135deg, rgba(6, 24, 19, 0.82) 0%, rgba(3, 14, 11, 0.92) 100%);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(60, 255, 176, 0.32);
  border-radius: 10px;
  padding: 16px 20px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6), 0 0 20px rgba(0, 229, 160, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease, border-color 0.35s ease;
  cursor: pointer;
  text-decoration: none;
  display: block;
}

.process-card--s1 {
  transform: perspective(1000px) rotateY(-8deg) translateZ(10px);
}

.process-card--s2 {
  transform: perspective(1000px) rotateY(-6deg) translateZ(30px);
  border-color: rgba(60, 255, 176, 0.48);
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.65), 0 0 26px rgba(0, 229, 160, 0.2);
}

.process-card--s3 {
  transform: perspective(1000px) rotateY(-4deg) translateZ(18px);
}

.process-glass-card:hover {
  transform: perspective(1000px) rotateY(-2deg) translateY(-4px) translateZ(48px);
  border-color: #3CFFB0;
  box-shadow: 0 24px 55px rgba(0, 0, 0, 0.75), 0 0 35px rgba(60, 255, 176, 0.3);
}

.process-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}

.process-card-step {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: #3CFFB0;
  text-transform: uppercase;
}

.process-card-status {
  font-family: monospace;
  font-size: 9px;
  letter-spacing: 0.06em;
  color: #6EE7B7;
  background: rgba(0, 229, 160, 0.12);
  padding: 2px 7px;
  border-radius: 4px;
  border: 1px solid rgba(0, 229, 160, 0.25);
}

.process-card-title {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #FFFFFF;
  margin-bottom: 4px;
}

.process-card-desc {
  font-size: 11px;
  line-height: 1.4;
  color: rgba(209, 250, 229, 0.75);
}

/* Connecting Telemetry Lines SVG */
.consulting-bridge-svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 12;
}

/* Responsive Overrides */
@media (max-width: 1440px) {
  .consulting-glass-panel {
    left: 780px;
    width: 480px;
    height: 480px;
  }
  .consulting-process-stack {
    left: 1290px;
    width: 280px;
  }
}

@media (max-width: 1200px) {
  .consulting-glass-panel {
    left: 680px;
    width: 420px;
    height: 450px;
  }
  .consulting-process-stack {
    left: 1130px;
    width: 260px;
  }
}

@media (max-width: 900px) {
  .consulting-3d-stage {
    display: none !important;
  }
}


/* Active glowing state for S3 - OPTIMIZATION matching reference image */
.consulting-step-card.is-active,
.consulting-step-card--s3.is-active {
  border: 1.8px solid #00E08E !important;
  background: rgba(4, 28, 20, 0.94) !important;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.8), 0 0 16px rgba(0, 224, 142, 0.6), inset 0 0 10px rgba(0, 224, 142, 0.22) !important;
  color: #FFFFFF !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
}

.consulting-step-card.is-active .consulting-step-dot,
.consulting-step-card--s3.is-active .consulting-step-dot {
  background: #00E08E !important;
  box-shadow: 0 0 8px #00E08E !important;
  transform: scale(1.2) !important;
}


/* =============================================================================
   ENLARGED FOREGROUND DIGITAL TWIN (Consulting Hero) - higher clarity & contrast
   ============================================================================= */
.twin-glass-platter {
  fill: rgba(60, 255, 176, 0.09);
  stroke: rgba(60, 255, 176, 0.75);
  stroke-width: 0.9px;
  filter: drop-shadow(0 0 10px rgba(0, 229, 160, 0.45));
}
.twin-glass-platter-edge {
  fill: rgba(0, 229, 160, 0.22);
  stroke: rgba(60, 255, 176, 0.6);
  stroke-width: 0.7px;
}
.twin-levitation-tether {
  stroke: rgba(60, 255, 176, 0.7);
  stroke-width: 0.9px;
  stroke-dasharray: 2 3;
  filter: drop-shadow(0 0 4px rgba(60, 255, 176, 0.6));
}
.twin-factory-digital-twin--hero { filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.55)); }
.twin-factory-digital-twin--hero .factory-floor-base { fill: rgba(3, 20, 15, 0.92); stroke: #3CFFB0; stroke-width: 1.1px; }
.twin-factory-digital-twin--hero .factory-grid-line { stroke: rgba(60, 255, 176, 0.38); stroke-width: 0.7px; }
.twin-factory-digital-twin--hero .factory-grid-line--center { stroke: rgba(60, 255, 176, 0.6); }
.twin-factory-digital-twin--hero .factory-wall { fill: rgba(8, 40, 31, 0.5); stroke: rgba(80, 255, 190, 0.85); stroke-width: 0.9px; }
.twin-factory-digital-twin--hero .factory-truss { stroke: rgba(80, 255, 190, 0.6); stroke-width: 0.7px; }
.twin-factory-digital-twin--hero .factory-zone-outline { fill: rgba(0, 229, 160, 0.14); stroke: #3CFFB0; stroke-width: 1px; }
.twin-factory-digital-twin--hero .factory-conveyor-surface { fill: rgba(14, 58, 46, 0.9); stroke: #5BFFC3; stroke-width: 0.9px; }
.twin-factory-digital-twin--hero .factory-conveyor-rail { stroke: #7DFFD2; stroke-width: 1.1px; }
.twin-factory-digital-twin--hero .factory-machine-top { fill: rgba(60, 255, 176, 0.5); stroke: #7DFFD2; stroke-width: 0.9px; }
.twin-factory-digital-twin--hero .factory-machine-left,
.twin-factory-digital-twin--hero .factory-machine-right { stroke: #3CFFB0; stroke-width: 0.9px; }
.twin-factory-digital-twin--hero .factory-robot-mast,
.twin-factory-digital-twin--hero .factory-robot-arm,
.twin-factory-digital-twin--hero .factory-robot-forearm { stroke: #7DFFD2; stroke-width: 1.5px; }
.twin-factory-digital-twin--hero .factory-material-flow-path { stroke-width: 1.5px; }
.twin-factory-digital-twin--hero .factory-tag-bg { fill: rgba(3, 14, 11, 0.94); stroke: rgba(80, 255, 190, 0.85); }
.twin-factory-digital-twin--hero .factory-tag-text { fill: #E8FFF6; }


/* Tablet: keep the strategy card clear of the left-hand headline */
@media (min-width: 768px) and (max-width: 1100px) {
  .scene[data-index="2"].is-active .twin-metrics {
    animation: none;
    opacity: 1;
    transform: translate(1250px, 248px);
  }
}


/* =============================================================================
   HOLOGRAPHIC 3D FACTORY DIGITAL TWIN (Consulting Hero)
   ============================================================================= */
.dt-root { pointer-events: none; }
.dt-float { animation: dtFloat 6s ease-in-out infinite; filter: drop-shadow(0 10px 18px rgba(0,0,0,0.55)) drop-shadow(0 0 14px rgba(0,229,160,0.28)); }
@keyframes dtFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }

.dt-slab-top   { fill: url(#dtSlabGrad); stroke: #7DFFD2; stroke-width: 1.6px; stroke-linejoin: round; }
.dt-slab-south { fill: rgba(60,255,176,0.38); stroke: #7DFFD2; stroke-width: 1.2px; }
.dt-slab-east  { fill: rgba(0,200,140,0.26); stroke: #5BFFC3; stroke-width: 1.2px; }
.dt-grid { stroke: rgba(125,255,210,0.30); stroke-width: 1px; }

.dt-wall { fill: url(#dtWallGrad); stroke: none; }
.dt-wall-rim { stroke: rgba(125,235,255,0.85); stroke-width: 1.3px; }
.dt-wall-post { stroke: rgba(125,235,255,0.35); stroke-width: 1px; }

.dt-zone { stroke-width: 1.4px; stroke-dasharray: 6 5; }
.dt-zone--assembly { fill: rgba(60,255,176,0.20); stroke: #3CFFB0; }
.dt-zone--line { fill: rgba(53,230,255,0.10); stroke: rgba(125,235,255,0.7); }

.dt-top   { fill: rgba(80,255,190,0.46); stroke: #9BFFDD; stroke-width: 1.2px; stroke-linejoin: round; }
.dt-south { fill: rgba(6,48,37,0.92); stroke: rgba(125,255,210,0.9); stroke-width: 1.1px; stroke-linejoin: round; }
.dt-east  { fill: rgba(3,30,24,0.95); stroke: rgba(80,255,190,0.75); stroke-width: 1.1px; stroke-linejoin: round; }

.dt-belt-top   { fill: rgba(14,70,56,0.95); stroke: #7DFFD2; stroke-width: 1.1px; }
.dt-belt-south { fill: rgba(4,30,24,0.95); stroke: rgba(125,255,210,0.8); stroke-width: 1px; }
.dt-belt-east  { fill: rgba(3,24,19,0.95); stroke: rgba(125,255,210,0.6); stroke-width: 1px; }
.dt-roller { stroke: rgba(155,255,221,0.55); stroke-width: 1px; }

.dt-cy-top   { fill: rgba(53,230,255,0.55); stroke: #A5F3FF; stroke-width: 1.1px; }
.dt-cy-south { fill: rgba(8,52,66,0.92); stroke: #7DEBFF; stroke-width: 1px; }
.dt-cy-east  { fill: rgba(4,34,44,0.95); stroke: rgba(125,235,255,0.7); stroke-width: 1px; }
.dt-laser { fill: rgba(53,230,255,0.28); stroke: #7DEBFF; stroke-width: 1px; animation: dtLaser 2.2s ease-in-out infinite; }
@keyframes dtLaser { 0%,100% { opacity: 0.35; } 50% { opacity: 1; } }

.dt-gl-top   { fill: rgba(53,230,255,0.20); stroke: #9DF1FF; stroke-width: 1.3px; }
.dt-gl-south { fill: rgba(53,230,255,0.13); stroke: rgba(157,241,255,0.9); stroke-width: 1.2px; }
.dt-gl-east  { fill: rgba(53,230,255,0.08); stroke: rgba(157,241,255,0.75); stroke-width: 1.2px; }

.dt-pkg-top   { fill: #B8FFE6; stroke: #FFFFFF; stroke-width: 0.8px; }
.dt-pkg-south { fill: #1FD69A; stroke: #7DFFD2; stroke-width: 0.8px; }
.dt-pkg-east  { fill: #0E9E72; stroke: #7DFFD2; stroke-width: 0.8px; }
.dt-pkg-top, .dt-pkg-south, .dt-pkg-east { filter: drop-shadow(0 0 5px rgba(60,255,176,0.9)); }
.dt-agv-top   { fill: rgba(125,235,255,0.85); stroke: #FFFFFF; stroke-width: 1px; }
.dt-agv-south { fill: rgba(20,120,150,0.95); stroke: #7DEBFF; stroke-width: 1px; }
.dt-agv-east  { fill: rgba(10,80,104,0.95); stroke: #7DEBFF; stroke-width: 1px; }

.dt-lane { fill: none; stroke: rgba(125,235,255,0.85); stroke-width: 1.8px; stroke-dasharray: 8 7; animation: dtLane 1.4s linear infinite; }
@keyframes dtLane { to { stroke-dashoffset: -30; } }

.dt-arm-out { fill: none; stroke: #7DFFD2; stroke-width: 7px; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 6px rgba(60,255,176,0.8)); }
.dt-arm-in  { fill: none; stroke: #04261E; stroke-width: 3px; stroke-linecap: round; stroke-linejoin: round; }
.dt-joint { fill: #00FFB2; stroke: #021A14; stroke-width: 1.2px; filter: drop-shadow(0 0 5px #00FFB2); }
.dt-tip { fill: #FFFFFF; filter: drop-shadow(0 0 6px #FFFFFF); }
.dt-sensor { fill: #FFFFFF; filter: drop-shadow(0 0 6px #3CFFB0); }
.dt-sensor-ring { fill: none; stroke: #3CFFB0; stroke-width: 1.4px; }

.dt-scan { fill: url(#dtScanGrad); mix-blend-mode: screen; }

.dt-emitter-glow { fill: rgba(60,255,176,0.20); filter: blur(5px); }
.dt-ring { fill: none; }
.dt-ring--outer { stroke: #7DFFD2; stroke-width: 1.8px; filter: drop-shadow(0 0 8px rgba(60,255,176,0.9)); }
.dt-ring--inner { stroke: rgba(60,255,176,0.8); stroke-width: 1.3px; stroke-dasharray: 7 6; animation: tableRingRotate 12s linear infinite; }
.dt-ring--core  { stroke: rgba(125,235,255,0.8); stroke-width: 1.2px; stroke-dasharray: 3 4; animation: tableRingRotate 7s linear infinite reverse; }
.dt-orbit-dot { fill: #FFFFFF; filter: drop-shadow(0 0 8px #3CFFB0) drop-shadow(0 0 16px #3CFFB0); }
.dt-field { fill: url(#dtFieldGrad); stroke: none; }
.dt-tether { stroke: rgba(125,255,210,0.7); stroke-width: 1.2px; stroke-dasharray: 3 4; }

.dt-leader { stroke: rgba(125,255,210,0.85); stroke-width: 1.3px; stroke-dasharray: 3 3; }
.dt-leader-dot { fill: #3CFFB0; stroke: #021A14; stroke-width: 1px; filter: drop-shadow(0 0 6px #3CFFB0); }
.dt-label-bg { fill: rgba(3,16,12,0.92); stroke: rgba(125,255,210,0.85); stroke-width: 1.2px; filter: drop-shadow(0 4px 10px rgba(0,0,0,0.6)); }
.dt-label-dot { fill: #3CFFB0; filter: drop-shadow(0 0 5px #3CFFB0); }
.dt-label-text { font-family: 'Inter Tight', 'Inter', sans-serif; font-size: 12.5px; font-weight: 600; letter-spacing: 0.09em; fill: #EFFFF8; }
.dt-callout--active .dt-label-bg { stroke: #00E08E; fill: rgba(5,34,26,0.95); }
.dt-callout--active .dt-label-text { fill: #5DFFC0; }
.dt-callout--active .dt-label-dot { animation: dtDot 1.6s ease-in-out infinite; }
@keyframes dtDot { 0%,100% { opacity: 0.55; } 50% { opacity: 1; } }

@media (prefers-reduced-motion: reduce) { .dt-float, .dt-lane, .dt-laser, .dt-ring--inner, .dt-ring--core { animation: none; } }


/* =============================================================================
   3D HOLOGRAPHIC SMART FACTORY DIGITAL TWIN (TABLETOP ANCHORED)
   Ultra-realistic spatial holographic digital twin simulation for ROBONIX Consulting
   ============================================================================= */
.holo-table-anchor {
  pointer-events: none;
}

.holo-factory-wrapper {
  pointer-events: none;
}

.twin-float-group {
  animation: holoModelFloat 5s ease-in-out infinite;
}

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

.holo-model-img {
  pointer-events: none;
  user-select: none;
}

.gloss-card {
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
}

.holo-top-capsule {
  pointer-events: auto;
  cursor: pointer;
  transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1), filter 0.25s ease;
}

.holo-top-capsule:hover {
  transform: translate(0, -153px);
  filter: drop-shadow(0 0 14px rgba(0, 224, 142, 0.75));
}

.holo-stage-dock {
  pointer-events: auto;
}

.holo-stage-dock .stage-seg {
  cursor: pointer;
  transition: transform 0.2s ease, opacity 0.2s ease, filter 0.2s ease;
}

.holo-stage-dock .stage-seg:hover {
  transform: translateY(-2px);
  filter: drop-shadow(0 0 8px rgba(0, 224, 142, 0.6));
}

.stage-seg--kpi {
  cursor: default !important;
}

.stage-seg--kpi:hover {
  transform: none !important;
  filter: none !important;
}

/* Tablet Viewport Refinement for 3D Holographic Twin */
@media (min-width: 768px) and (max-width: 1150px) {
  .tech-overlay--consulting .tech-svg {
    transform: none !important;
  }
}

/* =============================================================================
   ROBONIX R&D HERO — HUMANOID ROBOTICS, DIGITAL TWIN & CONNECTED WORKFLOW
   ============================================================================= */

/* Left-Side Dark Contrast Scrim for Flawless Typography Legibility */
.rnd-scrim-left {
  position: absolute;
  top: 0;
  left: 0;
  width: 48%;
  height: 100%;
  background: linear-gradient(90deg, rgba(2, 10, 8, 0.82) 0%, rgba(2, 10, 8, 0.68) 50%, rgba(2, 10, 8, 0.28) 80%, transparent 100%);
  pointer-events: none;
  z-index: 5;
}

/* R&D 4 Minimal Capability Cards (Task 2) */
.rnd-cap-box {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  height: 100%;
  padding: 6px 12px;
  background: rgba(3, 16, 12, 0.78);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(0, 229, 160, 0.35);
  border-radius: 6px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.6), 0 0 12px rgba(0, 229, 160, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  color: #fff;
  font-family: 'Inter Tight', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  box-sizing: border-box;
  cursor: pointer;
  pointer-events: auto;
  user-select: none;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.25s ease, box-shadow 0.25s ease;
}

.rnd-cap-box:hover,
.rnd-cap-box:focus-visible {
  transform: scale(1.03) translateY(-1px);
  border-color: #3CFFB0;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.8), 0 0 20px rgba(60, 255, 176, 0.35);
  outline: none;
}

.rnd-cap-icon {
  width: 22px;
  height: 22px;
  min-width: 22px;
  border-radius: 4px;
  background: rgba(0, 229, 160, 0.12);
  border: 1px solid rgba(0, 229, 160, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #00FFB2;
  flex-shrink: 0;
  filter: drop-shadow(0 0 4px rgba(0, 229, 160, 0.5));
}

.rnd-cap-icon svg {
  width: 13px;
  height: 13px;
}

.rnd-cap-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #FFFFFF;
  text-transform: uppercase;
  margin: 0;
  line-height: 1;
  white-space: nowrap;
}

/* Connector Lines & Animated Data Packets */
.rnd-pulse-line {
  stroke: #00E5A0;
  stroke-width: 1.2;
  fill: none;
  filter: drop-shadow(0 0 3px rgba(0, 229, 160, 0.6));
}

.rnd-pulse-line--cyan {
  stroke: #00F0FF;
  stroke-width: 1.2;
  fill: none;
  filter: drop-shadow(0 0 3px rgba(0, 240, 255, 0.6));
}

.rnd-pulse-packet {
  fill: none;
  filter: drop-shadow(0 0 4px #FFFFFF);
  pointer-events: none;
}



/* =============================================================================
   TASK 1: RIGHT-SIDE HERO IMAGE BALANCING (~10% Reduction & Visual Breathing Room)
   - Preserves humanoid robot as primary focal point, engineer clearly visible.
   - Sits clear of robot head, torso, and engineer hands.
   - Adds subtle atmospheric perimeter vignette for seamless blend.
   ============================================================================= */
@media (min-width: 769px) {
  .scene[data-index="1"] picture,
  .scene[data-index="1"] .tech-overlay--rnd {
    transform: scale(0.91);
    transform-origin: 76% 50%;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .scene[data-index="1"]::after {
    content: "";
    position: absolute;
    inset: 0;
    background: 
      linear-gradient(to left, rgba(2, 6, 5, 0.55) 0%, rgba(2, 6, 5, 0.2) 8%, transparent 20%),
      linear-gradient(to bottom, rgba(2, 6, 5, 0.4) 0%, transparent 12%),
      linear-gradient(to top, rgba(2, 6, 5, 0.45) 0%, transparent 14%);
    pointer-events: none;
    z-index: 1;
  }

  .scene[data-index="1"] img {
    filter: brightness(0.94) contrast(1.03);
  }
}

/* =============================================================================
   ROBONIX CONSULTING HERO — INTERACTIVE DIGITAL MAP OVERLAY (GOOGLE MAPS PINS)
   ============================================================================= */
/* =============================================================================
   ROBONIX CONSULTING HERO — CAMERA STAGE & INDUSTRIAL MAP ANIMATION
   Sequence: Map Camera Leads -> Marker Jumps -> Industrial Pathways -> Text Reveal
   ============================================================================= */

.consulting-camera-stage {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
  transform-origin: 67% 59%;
  transform: none;
}

/* Smooth camera pan & zoom across the 4 smart factory stations */
@keyframes consultingCameraSequence {
  0% {
    transform: translate3d(-3.2%, 1.8%, 0) scale(1.14);
  }
  20% {
    /* Station 1: FACTORY */
    transform: translate3d(-3.2%, 1.8%, 0) scale(1.14);
  }
  28% {
    /* Transition to ROBOT ARMS */
    transform: translate3d(1.0%, 1.4%, 0) scale(1.14);
  }
  45% {
    /* Station 2: ROBOT ARMS */
    transform: translate3d(1.0%, 1.4%, 0) scale(1.14);
  }
  52% {
    /* Transition to SIMULATION */
    transform: translate3d(3.8%, 0%, 0) scale(1.14);
  }
  68% {
    /* Station 3: SIMULATION */
    transform: translate3d(3.8%, 0%, 0) scale(1.14);
  }
  75% {
    /* Transition to PRODUCTION */
    transform: translate3d(0.6%, -2.2%, 0) scale(1.14);
  }
  88% {
    /* Station 4: PRODUCTION */
    transform: translate3d(0.6%, -2.2%, 0) scale(1.14);
  }
  100% {
    /* Glide smoothly back to balanced Full Overview */
    transform: translate3d(0, 0, 0) scale(1);
  }
}

.stage[data-slide="2"].is-consulting-map-animating .consulting-camera-stage {
  animation: none;
}

/* ================= DYNAMIC INDUSTRIAL CONNECTING PATHWAYS ================= */
.c-map-network {
  pointer-events: none;
}

.c-map-track {
  fill: none !important;
  stroke: rgba(0, 229, 160, 0.24);
  stroke-width: 1.4;
  stroke-dasharray: 4 4;
}

.c-map-flow-path {
  fill: none !important;
  stroke: #00FFB2;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  opacity: 0;
  filter: drop-shadow(0 0 5px rgba(0, 255, 178, 0.8));
}

.c-map-flow-pulse {
  fill: none !important;
  stroke: #FFFFFF;
  stroke-width: 3.2;
  stroke-linecap: round;
  stroke-dasharray: 60 1000;
  stroke-dashoffset: 1000;
  opacity: 0;
  filter: drop-shadow(0 0 6px #00FFB2) drop-shadow(0 0 12px #00F0FF);
}

/* Sequential Pathway Drawing Animations */
@keyframes cMapFlow1 {
  0%, 6% { stroke-dashoffset: 1000; opacity: 0; }
  6.1% { stroke-dashoffset: 1000; opacity: 1; }
  25%, 100% { stroke-dashoffset: 0; opacity: 1; }
}
@keyframes cMapPulse1 {
  0%, 6% { stroke-dashoffset: 1000; opacity: 0; }
  6.1% { stroke-dashoffset: 1000; opacity: 1; }
  24% { stroke-dashoffset: 0; opacity: 1; }
  25%, 100% { stroke-dashoffset: 0; opacity: 0; }
}

@keyframes cMapFlow2 {
  0%, 28% { stroke-dashoffset: 1000; opacity: 0; }
  28.1% { stroke-dashoffset: 1000; opacity: 1; }
  48%, 100% { stroke-dashoffset: 0; opacity: 1; }
}
@keyframes cMapPulse2 {
  0%, 28% { stroke-dashoffset: 1000; opacity: 0; }
  28.1% { stroke-dashoffset: 1000; opacity: 1; }
  47% { stroke-dashoffset: 0; opacity: 1; }
  48%, 100% { stroke-dashoffset: 0; opacity: 0; }
}

@keyframes cMapFlow3 {
  0%, 50% { stroke-dashoffset: 1000; opacity: 0; }
  50.1% { stroke-dashoffset: 1000; opacity: 1; }
  70%, 100% { stroke-dashoffset: 0; opacity: 1; }
}
@keyframes cMapPulse3 {
  0%, 50% { stroke-dashoffset: 1000; opacity: 0; }
  50.1% { stroke-dashoffset: 1000; opacity: 1; }
  69% { stroke-dashoffset: 0; opacity: 1; }
  70%, 100% { stroke-dashoffset: 0; opacity: 0; }
}

@keyframes cMapFlow4 {
  0%, 72% { stroke-dashoffset: 1000; opacity: 0; }
  72.1% { stroke-dashoffset: 1000; opacity: 1; }
  92%, 100% { stroke-dashoffset: 0; opacity: 1; }
}
@keyframes cMapPulse4 {
  0%, 72% { stroke-dashoffset: 1000; opacity: 0; }
  72.1% { stroke-dashoffset: 1000; opacity: 1; }
  91% { stroke-dashoffset: 0; opacity: 1; }
  92%, 100% { stroke-dashoffset: 0; opacity: 0; }
}

.stage[data-slide="2"].is-consulting-map-animating .c-map-flow-path--1 { animation: cMapFlow1 3.4s linear forwards; }
.stage[data-slide="2"].is-consulting-map-animating .c-map-flow-pulse--1 { animation: cMapPulse1 3.4s linear forwards; }
.stage[data-slide="2"].is-consulting-map-animating .c-map-flow-path--2 { animation: cMapFlow2 3.4s linear forwards; }
.stage[data-slide="2"].is-consulting-map-animating .c-map-flow-pulse--2 { animation: cMapPulse2 3.4s linear forwards; }
.stage[data-slide="2"].is-consulting-map-animating .c-map-flow-path--3 { animation: cMapFlow3 3.4s linear forwards; }
.stage[data-slide="2"].is-consulting-map-animating .c-map-flow-pulse--3 { animation: cMapPulse3 3.4s linear forwards; }
.stage[data-slide="2"].is-consulting-map-animating .c-map-flow-path--4 { animation: cMapFlow4 3.4s linear forwards; }
.stage[data-slide="2"].is-consulting-map-animating .c-map-flow-pulse--4 { animation: cMapPulse4 3.4s linear forwards; }

.stage[data-slide="2"].is-consulting-text-revealed .c-map-flow-path {
  opacity: 0.85;
  stroke-dashoffset: 0;
}

/* ================= CONSULTING HERO & FLASHCARD SYNC =================
   Immediate, rock-solid visibility and responsive card interaction.
   ============================================================================= */
.stage[data-slide="2"] #consultingSubflash.is-active {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

.consulting-map-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 12;
}

.c-pin-item {
  position: absolute;
  left: var(--pin-x);
  top: var(--pin-y);
  pointer-events: auto;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  z-index: 20;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.c-pin-item:focus {
  outline: none;
}

.c-pin-item:focus-visible .c-pin-marker {
  outline: 2px solid #00F0FF;
  outline-offset: 4px;
  border-radius: 50%;
}

/* 1. Subtle target highlight when pin is selected or hovered */
.c-pin-target-highlight {
  position: absolute;
  left: 0;
  top: 0;
  width: 22px;
  height: 22px;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.c-target-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1.5px solid rgba(0, 255, 178, 0.4);
  opacity: 0.4;
  transform: scale(0.85);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
}

.c-target-core {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 5px;
  height: 5px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: #00FFB2;
  box-shadow: 0 0 6px #00FFB2;
  opacity: 0.6;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.c-pin-item:hover .c-target-ring,
.c-pin-item.is-active .c-target-ring {
  transform: scale(1.4);
  opacity: 1;
  border-color: #00F0FF;
  box-shadow: 0 0 16px rgba(0, 240, 255, 0.85), inset 0 0 8px rgba(0, 224, 142, 0.45);
}

.c-pin-item.is-active .c-target-core {
  transform: translate(-50%, -50%) scale(1.4);
  opacity: 1;
  background: #00F0FF;
  box-shadow: 0 0 10px #00F0FF;
}

/* 2. Google Maps teardrop marker */
.c-pin-marker {
  position: absolute;
  left: 0;
  top: 0;
  transform: translate(-50%, -100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.75));
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), filter 0.28s ease;
}

.c-pin-svg {
  width: 27px;
  height: 35px;
  display: block;
}

.c-pin-item:hover:not(.is-active) .c-pin-marker {
  transform: translate(-50%, -105%) scale(1.06);
  filter: drop-shadow(0 0 10px rgba(0, 224, 142, 0.6)) drop-shadow(0 4px 8px rgba(0, 0, 0, 0.8));
}

.c-pin-item.is-active .c-pin-marker {
  transform: translate(-50%, -110%) scale(1.12);
  filter: drop-shadow(0 0 16px rgba(0, 255, 178, 0.85)) drop-shadow(0 6px 12px rgba(0, 0, 0, 0.85));
}

/* 3. Compact popup label — All 4 visible & populated by default */
.c-pin-popup {
  position: absolute;
  background: rgba(3, 16, 12, 0.90);
  border: 1px solid rgba(0, 224, 142, 0.45);
  border-radius: 6px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding: 5px 11px;
  color: #FFFFFF;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.18);
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto;
  transform: scale(1);
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.28s ease,
              box-shadow 0.28s ease,
              background 0.28s ease,
              color 0.28s ease;
  display: flex;
  align-items: center;
  gap: 6px;
  z-index: 25;
}

.c-pin-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #00E08E;
  box-shadow: 0 0 6px #00E08E;
  flex-shrink: 0;
  transition: background 0.25s ease, box-shadow 0.25s ease;
}

.c-pin-title {
  display: inline-block;
  line-height: 1;
}

/* Directional popup placement per specification */
.c-pin-popup--above-left {
  right: 16px;
  bottom: 34px;
  transform-origin: bottom right;
}

.c-pin-popup--right {
  left: 16px;
  top: -58px;
  transform-origin: bottom left;
}

.c-pin-popup--left {
  right: 18px;
  top: -22px;
  transform-origin: right center;
}

.c-pin-popup--below-right {
  left: 16px;
  top: 4px;
  transform-origin: top left;
}

/* Hover and active states */
.c-pin-item:hover:not(.is-active) .c-pin-popup {
  border-color: rgba(0, 240, 255, 0.8);
  box-shadow: 0 0 12px rgba(0, 224, 142, 0.4), 0 4px 14px rgba(0, 0, 0, 0.65);
  transform: scale(1.03);
}

.c-pin-item.is-active .c-pin-popup {
  border-color: #00F0FF !important;
  box-shadow: 0 0 18px rgba(0, 255, 178, 0.55), 0 6px 20px rgba(0, 0, 0, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.32) !important;
  background: rgba(4, 28, 22, 0.98) !important;
  color: #00FFB2 !important;
  transform: scale(1.08) translateY(-2px);
}

.c-pin-item.is-active .c-pin-dot {
  background: #00F0FF !important;
  box-shadow: 0 0 10px #00F0FF !important;
}

/* Sequential entry animation when scene 03 becomes active */
.stage[data-slide="2"] .c-pin-item--factory {
  animation: cPinReveal 0.45s cubic-bezier(0.16, 1, 0.3, 1) 0.1s backwards;
}
.stage[data-slide="2"] .c-pin-item--robot-arms {
  animation: cPinReveal 0.45s cubic-bezier(0.16, 1, 0.3, 1) 0.25s backwards;
}
.stage[data-slide="2"] .c-pin-item--simulation {
  animation: cPinReveal 0.45s cubic-bezier(0.16, 1, 0.3, 1) 0.4s backwards;
}
.stage[data-slide="2"] .c-pin-item--production {
  animation: cPinReveal 0.45s cubic-bezier(0.16, 1, 0.3, 1) 0.55s backwards;
}

@keyframes cPinReveal {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.9);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Tablet adjustments */
@media (max-width: 1024px) {
  .c-pin-svg { width: 22px; height: 30px; }
  .c-pin-popup { font-size: 9.5px; padding: 4px 8px; }
  .c-pin-popup--right { top: -48px; left: 12px; }
}

/* Mobile: clean location pin cards (< 768px) */
.c-mob-map-card {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  cursor: pointer !important;
  transition: all 0.25s ease !important;
}

.c-mob-pin-svg {
  width: 14px !important;
  height: 18px !important;
  flex-shrink: 0 !important;
}

.c-mob-map-card.is-active,
.c-mob-map-card:hover {
  border-color: #00F0FF !important;
  background: rgba(4, 24, 18, 0.95) !important;
  color: #00FFB2 !important;
  box-shadow: 0 4px 14px rgba(0, 224, 142, 0.35) !important;
}

@media (max-width: 768px) {
  .consulting-map-overlay {
    display: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .c-pin-item,
  .c-pin-marker,
  .c-pin-target-ring,
  .c-pin-popup,
  .c-pin-marker.is-jumping,
  .c-pin-popup.is-jumping,
  .c-target-ring.is-pulsing,
  .c-mob-map-card.is-jumping {
    transition: none !important;
    animation: none !important;
    transform: none !important;
  }
}

/* ==========================================================================
   ROBONIX CONSULTING HERO — FLASHCARD MARKER POP-UP SPRING ANIMATION
   All 4 labels remain populated and visible.
   Triggered on active pin / card activation:
   - Upward spring leap: ~10-12px
   - Spring overshoot: 118% scale
   - Vivid emerald (#00FFB2) & cyan (#00F0FF) radiant glow at peak
   - Settles smoothly into active elevated position
   - Synchronized pop-up label bounce and ground target pulsing
   - Complete isolation: only active pin jumps, other 3 pins remain still
   - Instant replay via DOM reflow
   ========================================================================== */

@keyframes markerPopJump {
  0% {
    transform: translate(-50%, -100%) scale(1);
    filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.75));
  }
  35% {
    transform: translate(-50%, -136%) scale(1.18);
    filter: drop-shadow(0 0 22px #00FFB2) drop-shadow(0 0 12px #00F0FF) drop-shadow(0 8px 14px rgba(0, 0, 0, 0.85));
  }
  65% {
    transform: translate(-50%, -106%) scale(1.08);
    filter: drop-shadow(0 0 14px rgba(0, 255, 178, 0.6));
  }
  82% {
    transform: translate(-50%, -114%) scale(1.13);
    filter: drop-shadow(0 0 16px rgba(0, 255, 178, 0.7));
  }
  100% {
    transform: translate(-50%, -110%) scale(1.12);
    filter: drop-shadow(0 0 14px rgba(0, 255, 178, 0.75)) drop-shadow(0 5px 10px rgba(0, 0, 0, 0.85));
  }
}

.c-pin-marker.is-jumping {
  animation: markerPopJump 0.5s cubic-bezier(0.22, 1, 0.36, 1) forwards !important;
}

@keyframes popupPopJump {
  0% {
    transform: scale(1) translateY(0);
  }
  35% {
    transform: scale(1.14) translateY(-10px);
    box-shadow: 0 0 24px rgba(0, 240, 255, 0.7), 0 6px 18px rgba(0, 0, 0, 0.8);
  }
  65% {
    transform: scale(1.05) translateY(-1px);
  }
  82% {
    transform: scale(1.10) translateY(-4px);
  }
  100% {
    transform: scale(1.08) translateY(-2px);
    box-shadow: 0 0 18px rgba(0, 255, 178, 0.55), 0 6px 20px rgba(0, 0, 0, 0.75);
  }
}

.c-pin-item.is-active .c-pin-popup.is-jumping {
  animation: popupPopJump 0.5s cubic-bezier(0.22, 1, 0.36, 1) forwards !important;
}

@keyframes targetJumpPulse {
  0% {
    transform: scale(0.85);
    opacity: 0.5;
  }
  35% {
    transform: scale(1.6);
    opacity: 1;
    border-color: #00F0FF;
    box-shadow: 0 0 18px rgba(0, 240, 255, 0.9), inset 0 0 8px rgba(0, 224, 142, 0.6);
  }
  100% {
    transform: scale(1.4);
    opacity: 1;
    border-color: #00F0FF;
    box-shadow: 0 0 14px rgba(0, 240, 255, 0.8), inset 0 0 8px rgba(0, 224, 142, 0.45);
  }
}

.c-pin-item.is-active .c-target-ring.is-pulsing {
  animation: targetJumpPulse 0.5s cubic-bezier(0.22, 1, 0.36, 1) forwards !important;
}

/* Mobile dock card subtle jump feedback */
@keyframes mobCardJump {
  0% { transform: translateY(0) scale(1); }
  35% { transform: translateY(-4px) scale(1.04); box-shadow: 0 6px 18px rgba(0, 224, 142, 0.5); }
  65% { transform: translateY(1px) scale(0.99); }
  100% { transform: translateY(0) scale(1); }
}

.c-mob-map-card.is-jumping {
  animation: mobCardJump 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) forwards !important;
}