:root {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #f7f4ff;
  background: #09070d;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  --accent: #9b7af7;
  --bg: #09070d;
  --surface: rgba(18, 15, 25, 0.88);
  --surface-strong: rgba(24, 20, 32, 0.96);
  --surface-soft: rgba(155, 122, 247, 0.08);
  --line: rgba(255, 255, 255, 0.1);
  --line-strong: rgba(255, 255, 255, 0.17);
  --muted: rgba(244, 240, 255, 0.62);
  --soft: rgba(155, 122, 247, 0.12);
  --green: #77d9a3;
  --amber: #efb45f;
  --red: #ef7e86;
  --ease: cubic-bezier(.2,.8,.2,1);
}

* { box-sizing: border-box; }
html, body, #root { width: 100%; height: 100%; margin: 0; overflow: hidden; }
html { background: var(--bg); }
body {
  background: var(--bg);
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
  color: #f7f4ff;
}
button, a { font: inherit; }
button, [role="button"] { -webkit-tap-highlight-color: transparent; }
button { color: inherit; }
img { -webkit-user-drag: none; user-drag: none; }
button:focus-visible, a:focus-visible, [role="button"]:focus-visible {
  outline: 3px solid #d7ccff;
  outline-offset: 4px;
}

.scene-shell { width: 100%; height: 100%; animation: sceneIn .48s var(--ease) both; }
.scene {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background:
    radial-gradient(circle at 74% 24%, rgba(155,122,247,.12), transparent 28%),
    radial-gradient(circle at 14% 92%, rgba(155,122,247,.07), transparent 26%),
    linear-gradient(180deg, #0b0910 0%, #08070b 100%);
}
.scene::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 20;
  background: linear-gradient(180deg, rgba(255,255,255,.012), transparent 22%, transparent 76%, rgba(0,0,0,.22));
}
@keyframes sceneIn { from { opacity: 0; transform: scale(.995); } to { opacity: 1; transform: none; } }

.brand-mark { display: inline-flex; align-items: center; z-index: 12; }
.brand-mark img { width: clamp(190px, 12.5vw, 360px); height: auto; display: block; object-fit: contain; }
.brand-mark.is-stacked img { width: clamp(160px, 10vw, 300px); }

.eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  color: rgba(226,219,255,.72);
  letter-spacing: .22em;
  font-size: clamp(10px, .7vw, 13px);
  font-weight: 800;
  text-transform: uppercase;
}
.eyebrow > span { width: 28px; height: 1px; background: var(--accent); box-shadow: 0 0 16px rgba(155,122,247,.9); }
.eyebrow.centered { justify-content: center; }

.button {
  min-height: 64px;
  min-width: 180px;
  padding: 0 26px;
  border-radius: 999px;
  border: 1px solid transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  font-weight: 850;
  font-size: clamp(12px, .85vw, 16px);
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform .2s var(--ease), background .2s, border-color .2s, box-shadow .2s;
}
.button:active { transform: scale(.985); }
.button-primary {
  background: linear-gradient(135deg, #b39bf9, #8e6af0);
  color: #120d1a;
  box-shadow: 0 18px 50px rgba(82,51,160,.28), inset 0 1px 0 rgba(255,255,255,.38);
}
.button-primary:hover { box-shadow: 0 22px 60px rgba(98,63,185,.38), inset 0 1px 0 rgba(255,255,255,.44); }
.button-secondary {
  background: rgba(255,255,255,.04);
  color: #f7f4ff;
  border-color: rgba(255,255,255,.16);
}

/* ATTRACT */
.attract-scene { cursor: default; }
.attract-logo { position: absolute; top: 5.2vh; left: 4.7vw; }
.ambient-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size: 5vw 5vw;
  mask-image: linear-gradient(90deg, rgba(0,0,0,.9), rgba(0,0,0,.24) 62%, transparent 90%);
}
.attract-copy {
  position: absolute;
  left: 6.8vw;
  top: 23vh;
  width: 48vw;
  z-index: 6;
}
.attract-copy h1 {
  margin: 22px 0 18px;
  max-width: 900px;
  font-size: clamp(52px, 4.65vw, 132px);
  line-height: .96;
  letter-spacing: -.055em;
  font-weight: 900;
}
.attract-copy h1 em { color: #b8a3fb; font-style: normal; text-shadow: 0 0 45px rgba(155,122,247,.22); }
.attract-copy p {
  margin: 0;
  max-width: 980px;
  color: var(--muted);
  font-size: clamp(18px, 1.3vw, 25px);
  line-height: 1.46;
}
.attract-button { margin-top: 38px; min-width: 310px; animation: attractPulse 2.6s ease-in-out infinite; }
@keyframes attractPulse { 50% { transform: translateY(-3px); box-shadow: 0 24px 70px rgba(93,59,180,.42); } }

.camera-atmosphere {
  position: absolute;
  right: 4.8vw;
  top: 13vh;
  width: 37vw;
  height: 70vh;
  min-height: 460px;
  z-index: 4;
  overflow: hidden;
  border-radius: 30px;
  border: 1px solid rgba(255,255,255,.11);
  background: #0f0d13;
  box-shadow: 0 40px 110px rgba(0,0,0,.52), inset 0 0 80px rgba(155,122,247,.03);
}
.camera-atmosphere img { width: 100%; height: 100%; object-fit: cover; object-position: center; filter: saturate(.72) brightness(.64) contrast(1.08); }
.camera-vignette { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(7,6,10,.22), transparent 42%, rgba(7,6,10,.74)), radial-gradient(circle at 58% 50%, transparent 24%, rgba(8,7,11,.35) 72%); }
.camera-topline {
  position: absolute; top: 24px; left: 24px;
  display: flex; align-items: center; gap: 10px;
  font-size: clamp(12px, .64vw, 19px); letter-spacing: .14em; font-weight: 800; color: rgba(255,255,255,.65);
}
.live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 16px rgba(155,122,247,.95); display: inline-block; }
.camera-focus-frame { position: absolute; left: 39%; top: 37%; width: 30%; height: 31%; border: 1px solid rgba(186,163,255,.58); box-shadow: 0 0 36px rgba(155,122,247,.13); }
.camera-focus-frame i { position: absolute; width: 22px; height: 22px; border-color: #d7ccff; }
.camera-focus-frame i:nth-child(1){left:-2px;top:-2px;border-left:3px solid;border-top:3px solid}
.camera-focus-frame i:nth-child(2){right:-2px;top:-2px;border-right:3px solid;border-top:3px solid}
.camera-focus-frame i:nth-child(3){left:-2px;bottom:-2px;border-left:3px solid;border-bottom:3px solid}
.camera-focus-frame i:nth-child(4){right:-2px;bottom:-2px;border-right:3px solid;border-bottom:3px solid}
.camera-timer {
  position: absolute; right: 24px; top: 24px; min-width: 150px;
  padding: 14px 17px; border-radius: 15px;
  background: rgba(8,7,11,.82); border: 1px solid rgba(255,255,255,.11);
  display: flex; flex-direction: column; align-items: flex-end;
  font-variant-numeric: tabular-nums;
}
.camera-timer small { font-size: clamp(11px, .56vw, 17px); letter-spacing: .18em; color: rgba(255,255,255,.46); }
.camera-timer strong { font-size: clamp(32px, 2.4vw, 70px); line-height: 1; color: #d7ccff; }
.camera-signal { position: absolute; left: 24px; bottom: 24px; padding: 10px 13px; border-radius: 999px; background: rgba(8,7,11,.78); border: 1px solid rgba(155,122,247,.26); color: #d2c4ff; font-size: clamp(12px, .6vw, 18px); font-weight: 800; letter-spacing: .15em; }

/* ambient network */
.network-field { position:absolute; inset:0; z-index:1; opacity:.38; pointer-events:none; }
.network-field svg { position:absolute; inset:0; width:100%; height:100%; }
.network-line { stroke:rgba(155,122,247,.16); stroke-width:.12; stroke-dasharray:.8 1; animation:lineFlow 5s linear infinite; }
.branch-node { position:absolute; width:105px; height:60px; transform:translate(-50%,-50%); opacity:.46; animation:branchWake 3s ease-in-out infinite; }
.node-core { position:absolute; left:50%; top:50%; width:6px; height:6px; margin:-3px; border-radius:50%; background:#b49cff; box-shadow:0 0 20px rgba(155,122,247,.9); }
.node-ring { position:absolute; left:50%; top:50%; width:26px; height:26px; margin:-13px; border-radius:50%; border:1px solid rgba(155,122,247,.28); animation:ring 2.2s ease-out infinite; }
.branch-node small { position:absolute; left:63%; top:50%; transform:translateY(-50%); font-size: clamp(10px, .52vw, 16px); letter-spacing:.12em; white-space:nowrap; color:rgba(229,221,255,.48); }
@keyframes lineFlow { to { stroke-dashoffset:-10; } }
@keyframes branchWake { 50%{opacity:.68;} }
@keyframes ring { 80%,100% { transform:scale(1.8); opacity:0; } }

/* shared content */
.content-scene { padding: 0 4.7vw 4vh; }
.scene-header {
  height: 11.5vh;
  min-height: 78px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(255,255,255,.075);
  position: relative;
  z-index: 5;
}
.scene-step { display: flex; align-items: center; gap: 14px; color: rgba(255,255,255,.46); }
.scene-step span { font-variant-numeric: tabular-nums; font-size: clamp(13px, .68vw, 20px); letter-spacing: .14em; }
.scene-step b { font-size: clamp(13px, .68vw, 20px); letter-spacing: .18em; color: rgba(230,223,255,.7); }
.center-stage { position: relative; z-index: 4; text-align: center; }

/* global controls */
.global-controls {
  position: fixed;
  top: calc(11.5vh + 18px);
  right: 4.7vw;
  z-index: 80;
  display: flex;
  gap: 10px;
}
.utility-button {
  min-height: 64px;
  min-width: 118px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(11,9,16,.74);
  color: rgba(244,240,255,.72);
  border-radius: 999px;
  padding: 0 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: clamp(12px, .64vw, 19px);
  letter-spacing: .14em;
  font-weight: 850;
  cursor: pointer;
  backdrop-filter: blur(14px);
}
.sound-toggle-global {
  position: fixed;
  z-index: 90;
  right: 4.7vw;
  bottom: 3.2vh;
  min-width: 132px;
  min-height: 64px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(11,9,16,.72);
  color: rgba(244,240,255,.55);
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font-size: clamp(12px, .6vw, 18px);
  letter-spacing: .12em;
  cursor: pointer;
  backdrop-filter: blur(14px);
}
.sound-toggle-global.is-on { color: #d8ccff; border-color: rgba(155,122,247,.38); }

/* BRANCH SELECTION */
.branch-stage { height: calc(100vh - 11.5vh - 4vh); padding-top: 0; display: flex; flex-direction: column; justify-content: center; transform: translateY(-1vh); }
.branch-stage h1 {
  margin: 18px auto 12px;
  font-size: clamp(46px, 4vw, 112px);
  line-height: 1;
  letter-spacing: -.045em;
  font-weight: 900;
}
.branch-stage > p { margin: 0 auto; color: var(--muted); font-size: clamp(16px, 1.15vw, 22px); }
.branch-options {
  width: min(1540px, 91vw);
  margin: clamp(34px, 4.8vh, 58px) auto 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(12px, 1.2vw, 22px);
}
.branch-option {
  position: relative;
  min-height: clamp(210px, 26vh, 300px);
  padding: 24px 18px;
  border-radius: 24px;
  border: 1px solid rgba(255,255,255,.11);
  background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.015));
  color: #f7f4ff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform .22s var(--ease), border-color .22s, background .22s, box-shadow .22s;
}
.branch-option span { font-size: clamp(36px, 2.9vw, 84px); font-weight: 900; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.branch-option small { margin-top: 6px; font-size: clamp(12px, .64vw, 19px); letter-spacing: .17em; text-transform: uppercase; color: rgba(255,255,255,.42); }
.branch-option:hover { transform: translateY(-4px); border-color: rgba(155,122,247,.42); }
.branch-option.is-selected {
  border-color: rgba(188,169,255,.72);
  background: linear-gradient(180deg, rgba(155,122,247,.18), rgba(155,122,247,.07));
  box-shadow: 0 24px 80px rgba(86,51,165,.22), inset 0 0 0 1px rgba(255,255,255,.04);
}
.choice-lock { position: absolute; bottom: 18px; font-size: clamp(11px, .56vw, 17px); letter-spacing: .12em; color: #d8ceff; }
.branch-option:disabled { opacity: .42; cursor: default; }
.branch-option.is-selected:disabled { opacity: 1; }
.selection-confirmation {
  margin: 22px auto 0;
  min-height: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 9px;
  opacity: 0;
  color: rgba(222,214,255,.75);
  font-size: clamp(12px, .6vw, 18px);
  letter-spacing: .15em;
  transition: opacity .25s;
}
.selection-confirmation.is-visible { opacity: 1; }
.confirmation-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 16px rgba(155,122,247,.9); }

/* EXPLAIN */
.explain-layout {
  position: relative;
  z-index: 4;
  height: calc(100vh - 11.5vh - 4vh);
  display: grid;
  grid-template-columns: .82fr 1.18fr;
  gap: 4vw;
  align-items: center;
  padding: 3vh 1vw 2vh 2vw;
}
.explain-copy { max-width: 650px; }
.operational-timer {
  margin: 22px 0 18px;
  display: flex;
  align-items: baseline;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.06em;
  transition: color .35s, transform .35s;
}
.operational-timer span { font-size: clamp(70px, 6.4vw, 195px); font-weight: 300; color: rgba(255,255,255,.42); }
.operational-timer strong { font-size: clamp(96px, 8.2vw, 248px); line-height: .9; font-weight: 900; color: #c6b6ff; text-shadow: 0 0 45px rgba(155,122,247,.28); }
.operational-timer.is-delayed strong { color: var(--amber); text-shadow: 0 0 45px rgba(239,180,95,.2); transform: translateY(-2px); }
.explain-copy h1 { margin: 0 0 14px; font-size: clamp(38px, 3.2vw, 94px); line-height: 1.02; letter-spacing: -.042em; font-weight: 900; }
.explain-copy p { margin: 0 0 26px; color: var(--muted); font-size: clamp(16px, 1.16vw, 22px); line-height: 1.5; }
.capacity-visual {
  min-height: 590px;
  border-radius: 28px;
  border: 1px solid rgba(255,255,255,.1);
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.012));
  padding: clamp(25px, 2.3vw, 44px);
  box-shadow: 0 34px 90px rgba(0,0,0,.32), inset 0 0 70px rgba(155,122,247,.025);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.capacity-head { display: grid; grid-template-columns: 1fr auto 1fr; gap: 18px; align-items: center; }
.capacity-head > div:not(.capacity-arrow) { display: grid; grid-template-columns: 1fr auto; align-items: baseline; column-gap: 12px; }
.capacity-head small { grid-column: 1 / -1; font-size: clamp(11px, .56vw, 17px); letter-spacing: .15em; color: rgba(255,255,255,.42); }
.capacity-head strong { font-size: clamp(34px, 2.7vw, 78px); font-variant-numeric: tabular-nums; letter-spacing: -.035em; }
.capacity-head span { color: var(--muted); font-size: clamp(12px, .64vw, 19px); }
.capacity-head .capacity-delayed strong { color: var(--amber); }
.capacity-arrow { color: rgba(255,255,255,.24); font-size: 28px; }
.service-stream {
  position: relative;
  height: 170px;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(8,7,11,.42);
  display: grid;
  grid-template-columns: repeat(20, 1fr);
  gap: 6px;
  align-items: center;
  padding: 34px 34px 42px;
}
.service-stream::before { content: ""; position: absolute; left: 34px; right: 34px; top: 50%; height: 2px; background: linear-gradient(90deg, rgba(155,122,247,.15), rgba(155,122,247,.6), rgba(155,122,247,.15)); }
.service-stream > i {
  --order-index: 0;
  position: relative;
  height: 30px;
  border-radius: 9px;
  background: rgba(185,165,255,.18);
  border: 1px solid rgba(185,165,255,.3);
  animation: orderPulse 3.6s ease-in-out infinite;
  animation-delay: calc(var(--order-index) * 65ms);
  transition: transform 1s var(--ease), opacity .5s, background .5s, border-color .5s;
}
.service-stream.is-delayed > i:last-of-type { transform: translateX(72%); opacity: .45; background: rgba(239,180,95,.18); border-color: rgba(239,180,95,.5); }
.stream-window { position: absolute; right: 34px; top: 18px; bottom: 18px; width: 2px; background: rgba(255,255,255,.42); box-shadow: 0 0 18px rgba(255,255,255,.13); }
.stream-window span { position: absolute; right: 8px; top: -2px; white-space: nowrap; font-size: clamp(10px, .52vw, 16px); letter-spacing: .12em; color: rgba(255,255,255,.42); }
.fractional-order { position: absolute; right: 22px; bottom: 13px; opacity: 0; font-size: clamp(10px, .52vw, 16px); letter-spacing: .11em; color: var(--amber); transition: opacity .6s .5s; }
.fractional-order span { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 12px rgba(239,180,95,.65); margin-right: 5px; }
.service-stream.is-delayed .fractional-order { opacity: 1; }
@keyframes orderPulse { 50% { background: rgba(190,170,255,.26); } }
.busy-window-math { display: grid; grid-template-columns: 1fr 1fr 1.12fr; gap: 10px; }
.busy-window-math > div { padding: 15px 16px; border-radius: 15px; border: 1px solid rgba(255,255,255,.07); background: rgba(255,255,255,.018); display: flex; flex-direction: column; }
.busy-window-math small { font-size: clamp(10px, .52vw, 16px); letter-spacing: .11em; color: rgba(255,255,255,.4); }
.busy-window-math strong { margin-top: 5px; font-size: clamp(20px, 1.6vw, 30px); font-variant-numeric: tabular-nums; }
.busy-window-math span { margin-top: 2px; color: var(--muted); font-size: clamp(12px, .6vw, 18px); }
.busy-window-math .math-difference { border-color: rgba(155,122,247,.26); background: rgba(155,122,247,.07); }
.capacity-note { margin: 0; color: rgba(244,240,255,.48); font-size: clamp(13px, .68vw, 20px); line-height: 1.5; }

/* OPPORTUNITY */
.opportunity-layout {
  position: relative;
  z-index: 4;
  height: calc(100vh - 11.5vh - 4vh);
  display: grid;
  grid-template-columns: 1.22fr .78fr;
  align-items: center;
  gap: 4vw;
  padding: 2vh 1vw 1vh 2vw;
}
.opportunity-main { max-width: 950px; }
.opportunity-main h1 { margin: 20px 0 12px; max-width: 930px; font-size: clamp(34px, 2.8vw, 82px); line-height: 1.05; letter-spacing: -.04em; font-weight: 900; }
.revenue-counter { display: flex; align-items: baseline; gap: 16px; font-variant-numeric: tabular-nums; }
.revenue-counter strong { font-size: clamp(78px, 7.2vw, 224px); line-height: .9; letter-spacing: -.065em; font-weight: 920; color: #c8b8ff; text-shadow: 0 0 54px rgba(155,122,247,.18); }
.revenue-counter span { font-size: clamp(22px, 1.65vw, 48px); font-weight: 800; color: rgba(255,255,255,.6); }
.orders-equivalent { margin: 17px 0 0; color: var(--muted); font-size: clamp(15px, 1.05vw, 20px); line-height: 1.5; }
.orders-equivalent b { color: #f1edff; }
.per-branch-notice { margin-top: 22px; min-height: 90px; border-left: 2px solid var(--accent); padding: 13px 0 13px 18px; display: grid; grid-template-columns: auto 1fr; column-gap: 14px; align-items: baseline; width: min(760px, 100%); }
.per-branch-notice small { grid-column: 1 / -1; color: rgba(255,255,255,.38); font-size: clamp(11px, .56vw, 17px); letter-spacing: .14em; }
.per-branch-notice strong { font-size: clamp(23px, 1.7vw, 50px); color: #d9ceff; }
.per-branch-notice span { color: var(--muted); font-size: clamp(14px, .72vw, 21px); }
.range-basis { color: rgba(255,255,255,.48); font-size: clamp(13px, .68vw, 20px); }
.range-basis b { color: rgba(255,255,255,.75); }
.opportunity-cta { margin-top: 22px; min-width: 420px; }
.calculation-disclosure {
  border-radius: 26px;
  border: 1px solid rgba(255,255,255,.1);
  background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.012));
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(0,0,0,.28);
}
.disclosure-toggle {
  width: 100%; min-height: 82px; padding: 0 22px;
  border: 0; border-bottom: 1px solid rgba(255,255,255,.07);
  background: transparent; color: #f7f4ff;
  display: flex; align-items: center; justify-content: space-between; text-align: left; cursor: pointer;
}
.disclosure-toggle span { display: flex; flex-direction: column; gap: 4px; }
.disclosure-toggle small { font-size: clamp(10px, .52vw, 16px); letter-spacing: .14em; color: rgba(255,255,255,.38); }
.disclosure-toggle b { font-size: clamp(14px, .72vw, 21px); letter-spacing: .12em; }
.disclosure-toggle i { width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(155,122,247,.26); display: grid; place-items: center; font-style: normal; color: #cfc0ff; }
.disclosure-body { max-height: 0; overflow: hidden; opacity: 0; padding: 0 22px; transition: max-height .35s var(--ease), opacity .25s, padding .35s; }
.calculation-disclosure.is-open .disclosure-body { max-height: 230px; opacity: 1; padding: 18px 22px 20px; }
.disclosure-body p { margin: 0; color: var(--muted); font-size: clamp(14px, .72vw, 21px); line-height: 1.56; }
.disclosure-body strong { display: block; margin-top: 10px; color: #e8e1ff; font-size: clamp(13px, .68vw, 20px); line-height: 1.5; }
.assumption-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: rgba(255,255,255,.06); }
.assumption-grid span { min-height: 82px; background: rgba(13,11,18,.96); padding: 16px 18px; display: flex; flex-direction: column; justify-content: center; }
.assumption-grid small { font-size: clamp(10px, .52vw, 16px); letter-spacing: .12em; color: rgba(255,255,255,.35); }
.assumption-grid b { margin-top: 3px; font-size: clamp(18px, 1.25vw, 24px); font-variant-numeric: tabular-nums; }

/* DASHBOARD */
.dashboard-scene { background: #09080c; padding: 0 3.1vw 3.5vh; }
.dashboard-header { height: 10.5vh; min-height: 74px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; border-bottom: 1px solid rgba(255,255,255,.075); position: relative; z-index: 6; }
.dashboard-context { text-align: center; display: flex; align-items: center; justify-content: center; }
.dashboard-context b { font-size: clamp(16px, .95vw, 26px); letter-spacing: .1em; }
.dashboard-live { justify-self: end; display: flex; align-items: center; gap: 8px; color: rgba(255,255,255,.42); font-size: clamp(11px, .56vw, 17px); letter-spacing: .13em; }
.dashboard-live span { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 14px rgba(155,122,247,.8); }
.dashboard-shell { height: calc(100vh - 10.5vh - 10vh); margin-top: 2vh; display: grid; grid-template-columns: 250px 1fr; gap: 24px; position: relative; z-index: 4; }
.dashboard-sidebar { border-radius: 19px; border: 1px solid rgba(255,255,255,.075); background: rgba(16,14,20,.82); padding: 22px 16px; display: flex; flex-direction: column; }
.sidebar-title { padding: 0 6px 14px; border-bottom: 1px solid rgba(255,255,255,.07); display: flex; flex-direction: column; gap: 3px; }
.sidebar-title small { font-size: clamp(10px, .52vw, 16px); letter-spacing: .13em; color: rgba(255,255,255,.35); }
.sidebar-title b { font-size: clamp(12px, .64vw, 19px); letter-spacing: .12em; }
.tour-step { min-height: 58px; border-bottom: 1px solid rgba(255,255,255,.045); display: grid; grid-template-columns: 36px 1fr; align-items: center; color: rgba(255,255,255,.28); font-size: clamp(11px, .56vw, 17px); letter-spacing: .09em; transition: color .3s, background .3s; padding: 0 10px; }
.tour-step span { font-variant-numeric: tabular-nums; }
.tour-step.is-complete { color: rgba(205,191,255,.55); }
.tour-step.is-active { color: #f7f4ff; background: rgba(155,122,247,.08); border-radius: 8px; border-bottom-color: transparent; }
.dashboard-workspace { position: relative; overflow: hidden; border-radius: 22px; border: 1px solid rgba(255,255,255,.08); background: radial-gradient(circle at 70% 20%, rgba(155,122,247,.07), transparent 31%), #0d0b11; }
.tour-caption { position: absolute; left: 22px; top: 18px; z-index: 22; min-height: 68px; padding: 0 24px 0 12px; border-radius: 999px; background: rgba(8,7,11,.82); border: 1px solid rgba(255,255,255,.08); display: flex; align-items: center; gap: 12px; backdrop-filter: blur(12px); }
.tour-caption span { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: rgba(155,122,247,.16); color: #cdbdff; font-size: clamp(11px, .56vw, 17px); font-weight: 900; }
.tour-caption strong { max-width: 980px; font-size: clamp(12px, .64vw, 19px); letter-spacing: .06em; }
.network-panel { position: absolute; inset: 0; padding: 92px 28px 28px; transition: transform .7s var(--ease), opacity .55s, filter .55s; }
.network-panel.is-deemphasized { transform: translateX(-37%) scale(.86); opacity: .46; filter: blur(.2px); }
.panel-heading { display: flex; align-items: flex-end; justify-content: space-between; }
.panel-heading span { display: flex; flex-direction: column; gap: 3px; }
.panel-heading small { font-size: clamp(10px, .52vw, 16px); letter-spacing: .14em; color: rgba(255,255,255,.35); }
.panel-heading b { font-size: clamp(24px, 2vw, 38px); letter-spacing: -.035em; }
.panel-heading em { font-style: normal; padding: 7px 10px; border-radius: 999px; border: 1px solid rgba(255,255,255,.09); color: rgba(255,255,255,.45); font-size: clamp(11px, .56vw, 17px); letter-spacing: .1em; }
.branch-network-grid { margin-top: 24px; height: calc(100% - 110px); display: grid; grid-template-columns: repeat(10, 1fr); grid-template-rows: repeat(3, 1fr); gap: clamp(7px, .7vw, 13px); }
.network-branch { border-radius: 12px; border: 1px solid rgba(255,255,255,.07); background: rgba(255,255,255,.018); position: relative; display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,.25); font-size: clamp(11px, .56vw, 17px); font-variant-numeric: tabular-nums; transition: border-color .6s, background .6s, box-shadow .6s, transform .6s, opacity .6s; }
.network-branch i { position: absolute; right: 9px; top: 9px; width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,.16); }
.network-branch.within { border-color: rgba(119,217,163,.18); background: rgba(119,217,163,.055); color: rgba(213,255,229,.68); }
.network-branch.within i { background: var(--green); box-shadow: 0 0 11px rgba(119,217,163,.55); }
.network-branch.over { border-color: rgba(239,180,95,.42); background: rgba(239,180,95,.09); color: #f5d7aa; }
.network-branch.over i { background: var(--amber); box-shadow: 0 0 13px rgba(239,180,95,.65); }
.network-branch.is-focused { transform: scale(1.12); z-index: 5; border-color: rgba(239,180,95,.86); box-shadow: 0 0 0 4px rgba(239,180,95,.08), 0 18px 40px rgba(0,0,0,.26); }
.network-legend { position: absolute; left: 28px; bottom: 24px; display: flex; gap: 16px; font-size: clamp(10px, .52vw, 16px); letter-spacing: .1em; color: rgba(255,255,255,.35); }
.network-legend span::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 6px; }
.legend-green::before { background: var(--green); }
.legend-amber::before { background: var(--amber); }
.legend-muted::before { background: rgba(255,255,255,.16); }
.branch-detail-panel { position: absolute; right: 26px; top: 86px; bottom: 26px; width: 58%; border-radius: 19px; border: 1px solid rgba(255,255,255,.1); background: linear-gradient(180deg, rgba(28,23,37,.96), rgba(13,11,17,.97)); padding: 22px; transform: translateX(110%); opacity: 0; transition: transform .7s var(--ease), opacity .55s; box-shadow: -30px 20px 80px rgba(0,0,0,.35); }
.branch-detail-panel.is-visible { transform: translateX(0); opacity: 1; }
.focused-branch-head { display: flex; justify-content: space-between; align-items: center; padding-bottom: 16px; border-bottom: 1px solid rgba(255,255,255,.07); }
.focused-branch-head > div:first-child { display: flex; flex-direction: column; gap: 4px; }
.focused-branch-head small { font-size: clamp(10px, .52vw, 16px); letter-spacing: .13em; color: rgba(255,255,255,.38); }
.focused-branch-head b { font-size: clamp(22px, 1.55vw, 30px); }
.branch-time { display: grid; grid-template-columns: auto auto; column-gap: 10px; align-items: baseline; text-align: right; font-variant-numeric: tabular-nums; }
.branch-time small { grid-column: 1 / -1; }
.branch-time strong { color: var(--amber); font-size: clamp(30px, 2.3vw, 45px); line-height: 1; transition: color .6s; }
.branch-time span { font-size: clamp(11px, .56vw, 17px); color: rgba(255,255,255,.42); }
.branch-time.is-improving strong { color: #b8e9c8; }
.timeline-module { margin-top: 18px; opacity: 0; transform: translateY(8px); transition: opacity .45s, transform .45s; }
.timeline-module.is-visible { opacity: 1; transform: none; }
.timeline-title { display: flex; justify-content: space-between; align-items: center; }
.timeline-title small { font-size: clamp(10px, .52vw, 16px); letter-spacing: .13em; color: rgba(255,255,255,.35); }
.timeline-title b { font-size: clamp(11px, .56vw, 17px); letter-spacing: .09em; color: rgba(255,255,255,.55); }
.timeline-bar { margin-top: 12px; height: 92px; position: relative; display: flex; gap: 5px; padding-bottom: 22px; }
.phase { height: 100%; border-radius: 10px; border: 1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.035); display: flex; flex-direction: column; justify-content: center; padding: 0 12px; min-width: 0; transition: flex-basis .7s var(--ease), background .45s, border-color .45s; }
.phase.order { flex: 38; }
.phase.prep { flex: 132; }
.phase.handoff { flex: 44; }
.stage-7 .phase.prep, .stage-8 .phase.prep { flex: 102; }
.phase span { font-size: clamp(10px, .52vw, 16px); letter-spacing: .11em; color: rgba(255,255,255,.38); }
.phase b { font-size: clamp(16px, 1.1vw, 22px); font-variant-numeric: tabular-nums; }
.phase.prep.is-highlighted { background: rgba(239,180,95,.1); border-color: rgba(239,180,95,.38); box-shadow: inset 0 0 35px rgba(239,180,95,.045); }
.target-marker { position: absolute; left: 84%; top: -4px; bottom: 14px; width: 1px; background: rgba(119,217,163,.58); }
.target-marker span { position: absolute; bottom: -18px; right: 6px; white-space: nowrap; color: var(--green); font-size: clamp(10px, .52vw, 16px); letter-spacing: .09em; font-style: normal; }
.diagnostic-callout { margin-top: 12px; min-height: 82px; border-radius: 13px; border: 1px solid rgba(239,180,95,.18); background: rgba(239,180,95,.045); display: flex; gap: 12px; align-items: center; padding: 12px 14px; opacity: 0; transform: translateY(8px); transition: opacity .45s, transform .45s; }
.diagnostic-callout.is-visible { opacity: 1; transform: none; }
.diagnostic-icon { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; color: var(--amber); background: rgba(239,180,95,.08); border: 1px solid rgba(239,180,95,.2); }
.diagnostic-callout div { display: flex; flex-direction: column; }
.diagnostic-callout small { font-size: clamp(10px, .52vw, 16px); letter-spacing: .11em; color: rgba(255,255,255,.35); }
.diagnostic-callout b { margin-top: 3px; font-size: clamp(13px, .68vw, 20px); }
.diagnostic-callout p { margin: 3px 0 0; color: var(--muted); font-size: clamp(12px, .6vw, 18px); }
.action-card { margin-top: 12px; min-height: 82px; border-radius: 13px; border: 1px solid rgba(155,122,247,.22); background: rgba(155,122,247,.06); padding: 12px 14px; display: flex; flex-direction: column; justify-content: center; opacity: 0; transform: translateY(8px); transition: opacity .45s, transform .45s; }
.action-card.is-visible { opacity: 1; transform: none; }
.action-card small { font-size: clamp(10px, .52vw, 16px); letter-spacing: .1em; color: rgba(255,255,255,.35); }
.action-card strong { margin-top: 4px; font-size: clamp(14px, .72vw, 21px); }
.action-card span { margin-top: 4px; color: var(--muted); font-size: clamp(12px, .6vw, 18px); }
.opportunity-reframe { position: absolute; inset: 0; z-index: 30; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 5vh 10vw; background: radial-gradient(circle at 50% 45%, rgba(155,122,247,.16), transparent 32%), rgba(9,8,12,.96); opacity: 0; pointer-events: none; transform: scale(1.015); transition: opacity .7s, transform .7s var(--ease); }
.opportunity-reframe.is-visible { opacity: 1; pointer-events: auto; transform: none; }
.opportunity-reframe > small { font-size: clamp(11px, .56vw, 17px); letter-spacing: .16em; color: rgba(255,255,255,.42); }
.opportunity-reframe h1 { margin: 15px 0 16px; max-width: 1050px; font-size: clamp(36px, 3.4vw, 66px); line-height: 1; letter-spacing: -.045em; }
.dashboard-revenue { display: flex; align-items: baseline; gap: 14px; font-variant-numeric: tabular-nums; }
.dashboard-revenue strong { font-size: clamp(66px, 5.7vw, 110px); line-height: .92; letter-spacing: -.06em; color: #c8b8ff; }
.dashboard-revenue span { color: rgba(255,255,255,.58); font-size: 22px; font-weight: 800; }
.opportunity-reframe p { max-width: 910px; margin: 15px 0 24px; color: var(--muted); font-size: clamp(12px, .9vw, 17px); line-height: 1.5; }
.opportunity-reframe p b { color: #f2eeff; }
.final-actions { display: flex; align-items: center; justify-content: center; gap: clamp(28px, 3.4vw, 56px); }
.payoff-qr { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.payoff-qr img { width: clamp(200px, 11.2vw, 380px); height: clamp(200px, 11.2vw, 380px); border-radius: 18px; background: #fff; padding: clamp(12px, 1vw, 20px); box-shadow: 0 18px 50px rgba(0,0,0,.4), 0 0 0 1px rgba(255,255,255,.06); }
.payoff-qr small { color: rgba(255,255,255,.42); font-size: clamp(11px, .68vw, 16px); font-weight: 750; letter-spacing: .14em; }
.dashboard-controls { position: absolute; left: calc(3.1vw + 274px); right: 3.1vw; bottom: 2.2vh; height: 64px; z-index: 55; display: flex; justify-content: center; gap: 10px; }
.dashboard-controls button { min-height: 64px; min-width: 140px; padding: 0 18px; border-radius: 999px; border: 1px solid rgba(255,255,255,.1); background: rgba(15,13,19,.94); color: rgba(245,241,255,.68); font-size: clamp(12px, .6vw, 18px); font-weight: 800; letter-spacing: .1em; cursor: pointer; display: flex; justify-content: center; align-items: center; gap: 9px; }
.dashboard-controls button:first-child { border-color: rgba(155,122,247,.26); color: #d7ccff; }


/* PRODUCT-FAITHFUL SCENE 5 · SIDE 1.1 */
.product-proof-scene .dashboard-workspace { background: radial-gradient(circle at 76% 18%, rgba(155,122,247,.08), transparent 30%), #0b0a0f; }
.product-proof-scene .tour-caption { z-index: 70; }
.proof-panel { position: absolute; inset: 0; padding: 104px 42px 34px; opacity: 0; transform: translateY(14px) scale(.992); pointer-events: none; transition: opacity .48s ease, transform .6s var(--ease); }
.proof-panel.is-visible { opacity: 1; transform: none; pointer-events: auto; }
.proof-kicker { font-size: clamp(10px, .52vw, 16px); letter-spacing: .14em; color: rgba(255,255,255,.34); }
.proof-heading { margin-top: 12px; display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; }
.proof-heading small, .vehicles-toolbar small, .evidence-meta small, .assistant-header small { font-size: clamp(10px, .52vw, 16px); letter-spacing: .14em; color: rgba(255,255,255,.36); }
.proof-heading h2, .vehicles-toolbar h2, .evidence-meta h2, .assistant-header h2 { margin: 3px 0 0; font-size: clamp(29px, 2.2vw, 66px); line-height: .98; letter-spacing: -.045em; }
.proof-heading p, .assistant-header p { margin: 6px 0 0; color: var(--muted); font-size: clamp(13px, .68vw, 20px); }
.proof-range { padding: 10px 13px; border: 1px solid rgba(155,122,247,.18); border-radius: 11px; background: rgba(155,122,247,.055); display: flex; flex-direction: column; align-items: flex-end; }
.proof-range small { font-size: clamp(10px, .52vw, 16px); letter-spacing: .11em; color: rgba(255,255,255,.35); }
.proof-range b { margin-top: 2px; font-size: 15px; color: #d7ccff; }
.overview-kpis { margin-top: 25px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.overview-kpis article { min-height: 150px; padding: 22px 24px; border-radius: 14px; background: rgba(255,255,255,.022); border: 1px solid rgba(255,255,255,.075); display: flex; flex-direction: column; justify-content: center; }
.overview-kpis small { font-size: clamp(10px, .52vw, 16px); letter-spacing: .11em; color: rgba(255,255,255,.34); }
.overview-kpis strong { margin-top: 5px; font-size: clamp(31px, 2.25vw, 70px); line-height: 1; font-variant-numeric: tabular-nums; }
.overview-kpis span { margin-top: 6px; font-size: clamp(11px, .56vw, 17px); color: rgba(255,255,255,.33); }
.over-goal-card, .under-goal-card { position: absolute; bottom: 34px; min-height: 150px; width: calc(50% - 47px); border-radius: 16px; padding: 18px 20px; display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; align-items: center; text-align: left; }
.over-goal-card { left: 42px; border: 1px solid rgba(235,102,105,.46); background: linear-gradient(135deg, rgba(235,102,105,.12), rgba(235,102,105,.045)); color: inherit; cursor: pointer; box-shadow: 0 0 0 0 rgba(235,102,105,0); animation: signalPulse 2.2s ease-in-out infinite; }
.under-goal-card { right: 42px; border: 1px solid rgba(119,217,163,.22); background: rgba(119,217,163,.055); }
.over-goal-card span, .under-goal-card span { display: flex; flex-direction: column; gap: 3px; }
.over-goal-card small, .under-goal-card small { font-size: clamp(10px, .52vw, 16px); letter-spacing: .12em; color: rgba(255,255,255,.36); }
.over-goal-card span b, .under-goal-card span b { font-size: 14px; letter-spacing: .06em; }
.over-goal-card > strong, .under-goal-card > strong { grid-row: 1 / 3; grid-column: 2; font-size: clamp(40px, 3.1vw, 90px); font-variant-numeric: tabular-nums; }
.over-goal-card > strong { color: #ff9b9f; }
.under-goal-card > strong { color: #a9e8c2; }
.over-goal-card em, .under-goal-card em { font-style: normal; font-size: clamp(11px, .56vw, 17px); color: rgba(255,255,255,.46); }
@keyframes signalPulse { 0%,100%{box-shadow:0 0 0 0 rgba(235,102,105,0)} 50%{box-shadow:0 0 0 5px rgba(235,102,105,.055),0 0 42px rgba(235,102,105,.07)} }

.vehicles-toolbar { display: flex; align-items: flex-end; gap: 10px; padding-bottom: 14px; border-bottom: 1px solid rgba(255,255,255,.065); }
.vehicles-toolbar > div:first-child { margin-right: auto; }
.filter-pill { min-height: 34px; padding: 0 13px; border-radius: 999px; border: 1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.025); display: grid; place-items: center; font-size: clamp(11px, .56vw, 17px); color: rgba(255,255,255,.45); }
.filter-pill.is-active { border-color: rgba(235,102,105,.34); background: rgba(235,102,105,.09); color: #ffb8bb; }
.vehicle-table { margin-top: 17px; border: 1px solid rgba(255,255,255,.07); border-radius: 15px; overflow: hidden; background: rgba(8,7,11,.48); }
.vehicle-row { min-height: 96px; display: grid; grid-template-columns: 1.05fr 1fr .82fr .82fr 1.25fr .85fr 1.15fr; align-items: center; gap: 10px; padding: 0 20px; border-bottom: 1px solid rgba(255,255,255,.055); color: rgba(255,255,255,.67); font-size: clamp(12px, .6vw, 18px); font-variant-numeric: tabular-nums; }
.vehicle-head { min-height: 39px; color: rgba(255,255,255,.3); font-size: clamp(10px, .5vw, 15px); letter-spacing: .1em; }
.vehicle-record { width: 100%; border: 0; border-bottom: 1px solid rgba(155,122,247,.18); background: rgba(155,122,247,.055); text-align: left; color: rgba(255,255,255,.78); cursor: pointer; }
.vehicle-record:hover, .vehicle-record:focus-visible { background: rgba(155,122,247,.09); outline: 2px solid rgba(155,122,247,.5); outline-offset: -2px; }
.vehicle-row > span:first-child { display: flex; flex-direction: column; gap: 3px; }
.vehicle-row > span:first-child b { font-size: clamp(14px, .76vw, 22px); letter-spacing: .04em; color: #f7f4ff; }
.vehicle-row > span:first-child small { font-size: clamp(10px, .48vw, 15px); letter-spacing: .1em; color: #a995ec; }
.muted-record { opacity: .42; }
.service-cell { display: flex; flex-direction: column; gap: 7px; }
.service-cell b { color: #f4d0a0; }
.service-cell i { display: block; width: 100%; height: 4px; border-radius: 999px; background: rgba(255,255,255,.07); overflow: hidden; }
.service-cell u { display: block; height: 100%; border-radius: inherit; background: var(--amber); text-decoration: none; }
.status-served { font-style: normal; padding: 6px 8px; border-radius: 999px; background: rgba(119,217,163,.08); border: 1px solid rgba(119,217,163,.18); color: #b8ebcb; font-size: clamp(10px, .52vw, 16px); }
.camera-open { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 999px; background: linear-gradient(135deg, rgba(155,122,247,.24), rgba(136,105,231,.16)); border: 1px solid rgba(155,122,247,.45); color: #f1ecff; font-weight: 850; font-size: clamp(15px, 1.05vw, 21px); letter-spacing: .04em; box-shadow: 0 0 22px rgba(155,122,247,.16); justify-self: start; }
.camera-open i { font-style: normal; color: #cdbdff; }
.vehicle-record:hover .camera-open, .vehicle-record:focus-visible .camera-open { background: linear-gradient(135deg, rgba(155,122,247,.36), rgba(136,105,231,.26)); border-color: rgba(178,157,255,.7); }

.evidence-proof { padding-top: 78px; }
.evidence-meta { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; }
.record-facts { display: flex; gap: 10px; }
.record-facts span { min-width: 115px; padding: 9px 11px; border-radius: 10px; border: 1px solid rgba(255,255,255,.07); background: rgba(255,255,255,.025); display: flex; flex-direction: column; }
.record-facts small { font-size: clamp(10px, .48vw, 15px); letter-spacing: .1em; color: rgba(255,255,255,.32); }
.record-facts b { margin-top: 2px; font-size: clamp(12px, .64vw, 19px); }
.evidence-tabs { margin-top: 13px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.evidence-tab { min-height: 58px; border-radius: 12px; border: 1px solid rgba(255,255,255,.09); background: rgba(255,255,255,.025); color: rgba(255,255,255,.5); font-weight: 850; font-size: clamp(12px, .64vw, 19px); letter-spacing: .08em; cursor: pointer; }
.evidence-tab.is-active { background: linear-gradient(90deg, rgba(155,122,247,.88), rgba(136,105,231,.82)); border-color: transparent; color: #fff; box-shadow: 0 12px 28px rgba(87,60,164,.2); }
.evidence-frame { position: relative; margin-top: 9px; height: min(59vh, 760px); min-height: 340px; overflow: hidden; border-radius: 16px; border: 1px solid rgba(255,255,255,.09); background: #06070a; }
.evidence-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .35s ease; filter: saturate(.82) brightness(.85) contrast(1.05); }
.evidence-video.is-active { opacity: 1; }
.evidence-frame::after { content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(180deg,rgba(3,3,6,.08),transparent 58%,rgba(3,3,6,.46)),radial-gradient(circle at 50% 50%,transparent 48%,rgba(4,3,7,.24)); }
.evidence-overlay { position: absolute; z-index: 4; left: 16px; right: 16px; top: 14px; display: flex; justify-content: space-between; align-items: center; font-size: clamp(11px, .56vw, 17px); letter-spacing: .1em; color: rgba(255,255,255,.72); font-variant-numeric: tabular-nums; }
.evidence-overlay span { display: flex; align-items: center; gap: 8px; }
.evidence-overlay i { width: 7px; height: 7px; border-radius: 50%; background: #e94d59; box-shadow: 0 0 12px rgba(233,77,89,.7); }
.evidence-badge { position: absolute; z-index: 4; right: 15px; bottom: 14px; padding: 8px 10px; border-radius: 999px; background: rgba(6,5,9,.74); border: 1px solid rgba(155,122,247,.22); color: #cdbdff; font-size: clamp(10px, .5vw, 15px); letter-spacing: .11em; backdrop-filter: blur(10px); }
.evidence-disclaimer { margin: 9px 2px 0; color: rgba(255,255,255,.34); font-size: clamp(10px, .54vw, 16px); line-height: 1.45; }

.assistant-proof { padding-top: 92px; }
.assistant-header { display: flex; justify-content: space-between; gap: 20px; align-items: flex-start; padding-bottom: 16px; border-bottom: 1px solid rgba(255,255,255,.065); }
.assistant-header > div { max-width: 700px; }
.assistant-context { padding: 8px 11px; border-radius: 999px; background: rgba(155,122,247,.06); border: 1px solid rgba(155,122,247,.16); color: rgba(219,208,255,.7); font-size: clamp(10px, .52vw, 16px); letter-spacing: .08em; white-space: nowrap; }
.assistant-question { margin-top: 30px; min-height: 84px; width: min(980px, 88%); padding: 0 20px; border-radius: 15px; border: 1px solid rgba(155,122,247,.32); background: rgba(155,122,247,.075); color: #f2eeff; text-align: left; display: flex; align-items: center; justify-content: space-between; font-size: clamp(14px, 1.1vw, 20px); font-weight: 750; cursor: pointer; }
.assistant-question span { color: #bca9ff; font-size: 24px; }
.assistant-thinking { margin-top: 54px; min-height: 150px; display: none; align-items: center; justify-content: center; gap: 8px; color: rgba(230,222,255,.75); }
.assistant-thinking.is-visible { display: flex; }
.assistant-thinking i { width: 9px; height: 9px; border-radius: 50%; background: var(--accent); animation: thinkDot 1s ease-in-out infinite; }
.assistant-thinking i:nth-child(2){animation-delay:.14s}.assistant-thinking i:nth-child(3){animation-delay:.28s}
.assistant-thinking b { margin-left: 9px; font-size: clamp(12px, .6vw, 18px); letter-spacing: .15em; }
@keyframes thinkDot { 0%,100%{transform:translateY(0);opacity:.35}50%{transform:translateY(-5px);opacity:1} }
.assistant-answer { margin-top: 26px; display: none; border-left: 3px solid var(--accent); padding: 9px 0 10px 25px; }
.assistant-answer.is-visible { display: block; animation: answerIn .5s var(--ease) both; }
@keyframes answerIn { from{opacity:0;transform:translateY(12px)} to{opacity:1;transform:none} }
.assistant-answer > small { font-size: clamp(10px, .52vw, 16px); letter-spacing: .13em; color: rgba(255,255,255,.36); }
.assistant-answer > strong { display: block; margin-top: 12px; font-size: clamp(70px, 7.4vw, 230px); line-height: .82; letter-spacing: -.065em; color: #d4c8ff; font-variant-numeric: tabular-nums; }
.assistant-answer h3 { margin: 10px 0 14px; font-size: clamp(22px, 1.8vw, 54px); letter-spacing: -.025em; }
.assistant-scope { display: flex; flex-wrap: wrap; gap: 8px; }
.assistant-scope span { padding: 7px 9px; border-radius: 999px; border: 1px solid rgba(255,255,255,.09); color: rgba(255,255,255,.55); font-size: clamp(10px, .52vw, 16px); letter-spacing: .06em; }
.assistant-answer p { margin: 12px 0 0; color: rgba(255,255,255,.35); font-size: clamp(11px, .56vw, 17px); }

.product-payoff { position: absolute; inset: 0; z-index: 80; padding: 7vh 7vw; background: radial-gradient(circle at 50% 42%, rgba(155,122,247,.17), transparent 31%), rgba(8,7,11,.975); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; opacity: 0; transform: scale(1.012); pointer-events: none; transition: opacity .6s, transform .7s var(--ease); }
.product-payoff.is-visible { opacity: 1; transform: none; pointer-events: auto; }
.product-payoff > small { font-size: clamp(10px, .52vw, 16px); letter-spacing: .15em; color: rgba(255,255,255,.38); }
.product-payoff h1 { margin: 16px 0; max-width: 1400px; font-size: clamp(48px, 4vw, 116px); line-height: .94; letter-spacing: -.05em; }
.product-payoff p { max-width: 1180px; margin: 0; color: var(--muted); font-size: clamp(16px, .9vw, 26px); line-height: 1.55; }
.product-payoff p b { color: #f3efff; }
.payoff-rail { margin: 32px 0 34px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: center; }
.payoff-rail span { padding: 8px 11px; border-radius: 999px; border: 1px solid rgba(155,122,247,.2); background: rgba(155,122,247,.055); color: #cbbcff; font-size: clamp(10px, .52vw, 16px); letter-spacing: .08em; }
.payoff-rail i { color: rgba(255,255,255,.22); font-style: normal; }

.restart-link { min-height: 64px; padding: 0 18px; border: 0; background: transparent; color: rgba(244,240,255,.46); font-size: clamp(12px,.68vw,18px); font-weight: 800; letter-spacing: .12em; cursor: pointer; text-decoration: underline; text-decoration-color: rgba(255,255,255,.14); text-underline-offset: 6px; }
.restart-link:active { color: #d9ceff; }

html[data-dashboard-stage="6"] .dashboard-shell { grid-template-columns: 1fr; }
html[data-dashboard-stage="6"] .dashboard-sidebar,
html[data-dashboard-stage="6"] .dashboard-controls,
html[data-dashboard-stage="6"] .global-controls,
html[data-dashboard-stage="6"] .sound-toggle-global,
html[data-dashboard-stage="6"] .dashboard-sidebar { display: none; }

@media (min-width: 2560px) and (min-height: 1300px) {
  .scene-header { min-height: 132px; }
  .button { min-height: 94px; min-width: 260px; padding: 0 40px; font-size: clamp(18px,.7vw,28px); }
  .utility-button, .sound-toggle-global { min-height: 86px; min-width: 180px; font-size: clamp(16px,.5vw,21px); }
  .attract-copy { top: 21vh; width: 49vw; }
  .attract-copy p { max-width: 980px; font-size: clamp(24px,1.1vw,38px); }
  .attract-button { min-width: 480px; margin-top: 54px; }
  .camera-atmosphere { width: 38vw; height: 72vh; border-radius: 42px; }
  .camera-topline, .camera-signal { font-size: clamp(15px,.48vw,20px); }
  .branch-options { max-width: 1900px; gap: 30px; }
  .branch-option { min-height: 340px; border-radius: 34px; }
  .branch-option small { font-size: clamp(16px,.48vw,20px); }
  .capacity-visual { min-height: 920px; border-radius: 38px; }
  .service-stream { height: 270px; }
  .opportunity-main { max-width: 1450px; }
  .calculation-disclosure { border-radius: 34px; }
  .disclosure-toggle { min-height: 124px; }
  .assumption-grid span { min-height: 118px; }
  .dashboard-header { min-height: 132px; }
  .dashboard-shell { grid-template-columns: 340px 1fr; gap: 30px; }
  .dashboard-sidebar { padding: 30px 22px; border-radius: 28px; }
  .tour-step { min-height: 82px; grid-template-columns: 48px 1fr; }
  .dashboard-workspace { border-radius: 30px; }
  .proof-panel { padding: 146px 58px 48px; }
  .overview-kpis article { min-height: 210px; border-radius: 22px; }
  .over-goal-card, .under-goal-card { min-height: 205px; bottom: 48px; border-radius: 22px; }
  .vehicle-row { min-height: 132px; padding: 0 28px; }
  .evidence-frame { height: min(60vh, 1280px); min-height: 720px; border-radius: 24px; }
  .evidence-tabs { margin-top: 20px; }
  .evidence-tab { min-height: 82px; }
  .assistant-question { min-height: 110px; width: min(1420px, 90%); }
  .assistant-thinking { min-height: 220px; }
  .product-payoff { padding: 8vh 8vw; }
  .payoff-rail { gap: 16px; }
  .payoff-rail span { padding: 14px 18px; }
  .dashboard-controls { left: calc(3.1vw + 364px); height: 90px; }
  .dashboard-controls button { min-height: 84px; min-width: 190px; padding: 0 26px; }
  .idle-warning-card { width: min(320px, 60vw); padding: 36px; }
  .idle-warning-ring { width: 130px; height: 130px; }
  .idle-warning-ring span { font-size: 52px; }
}

@media (max-width: 1450px), (max-height: 820px) {
  .proof-panel { padding: 73px 20px 18px; }
  .overview-kpis { margin-top: 16px; gap: 8px; }
  .overview-kpis article { min-height: 92px; padding: 13px 14px; }
  .over-goal-card, .under-goal-card { bottom: 18px; min-height: 92px; padding: 13px 15px; }
  .over-goal-card { left: 20px; }
  .under-goal-card { right: 20px; }
  .vehicle-row { min-height: 61px; padding: 0 11px; gap: 7px; font-size: clamp(11px, .56vw, 17px); }
  .vehicle-head { min-height: 32px; font-size: clamp(10px, .48vw, 15px); }
  .evidence-proof { padding-top: 66px; }
  .record-facts span { min-width: 96px; padding: 7px 8px; }
  .evidence-tabs { margin-top: 8px; }
  .evidence-tab { min-height: 46px; }
  .evidence-frame { height: 49vh; min-height: 250px; }
  .assistant-proof { padding-top: 73px; }
  .assistant-question { margin-top: 18px; min-height: 62px; }
  .assistant-thinking { margin-top: 24px; min-height: 80px; }
  .assistant-answer { margin-top: 16px; }
  .assistant-answer > strong { font-size: clamp(60px, 6.4vw, 105px); }
  .product-payoff { padding: 5vh 5vw; }
  .product-payoff h1 { font-size: clamp(38px, 3.6vw, 68px); }
  .payoff-rail { margin: 18px 0 20px; }
}

/* Idle and contact overlays */
.idle-warning, .contact-overlay { position: fixed; inset: 0; z-index: 300; display: grid; place-items: center; background: rgba(5,4,8,.82); backdrop-filter: blur(18px); }
.idle-warning-card { width: min(360px, 62vw); min-height: 0; padding: 44px; border-radius: 32px; border: 1px solid rgba(155,122,247,.28); background: radial-gradient(120% 140% at 50% 0%, rgba(155,122,247,.14), transparent 60%), linear-gradient(180deg, rgba(28,23,38,.98), rgba(11,9,15,.99)); box-shadow: 0 60px 160px rgba(0,0,0,.6), 0 0 90px rgba(155,122,247,.1); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.idle-warning-ring { width: clamp(140px, 12vw, 200px); height: clamp(140px, 12vw, 200px); border-radius: 50%; border: 1.5px solid rgba(155,122,247,.5); display: grid; place-items: center; box-shadow: inset 0 0 60px rgba(155,122,247,.14), 0 0 70px rgba(155,122,247,.16); }
.idle-warning-ring span { font-size: clamp(64px, 6vw, 96px); font-weight: 800; font-variant-numeric: tabular-nums; color: #e4dbff; letter-spacing: -.02em; text-shadow: 0 0 34px rgba(155,122,247,.5); }
.idle-keep-link { background: none; border: none; padding: 8px 10px; color: rgba(255,255,255,.4); font-size: clamp(13px, .8vw, 18px); font-weight: 700; letter-spacing: .1em; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
.idle-keep-link:hover, .idle-keep-link:focus-visible { color: rgba(255,255,255,.7); }
.contact-card { width: min(720px, 82vw); padding: 42px; border-radius: 28px; border: 1px solid rgba(255,255,255,.13); background: linear-gradient(180deg, rgba(28,23,38,.98), rgba(13,11,18,.98)); box-shadow: 0 50px 140px rgba(0,0,0,.55); text-align: center; }
.contact-card small { font-size: clamp(11px, .56vw, 17px); letter-spacing: .15em; color: rgba(255,255,255,.35); }
.contact-card h2 { margin: 10px 0 10px; font-size: clamp(36px, 3vw, 88px); letter-spacing: -.04em; }
.contact-card p { margin: 0 auto 24px; max-width: 520px; color: var(--muted); line-height: 1.5; }

/* hidden page / reduced motion */
html[data-page-visibility="hidden"] *, html[data-page-visibility="hidden"] *::before, html[data-page-visibility="hidden"] *::after { animation-play-state: paused !important; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .001ms !important; }
}

/* 1366x768 / tighter 16:9 */
@media (max-width: 1500px), (max-height: 820px) {
  .attract-copy { top: 20vh; width: 51vw; }
  .attract-copy h1 { font-size: clamp(46px, 4.55vw, 68px); }
  .camera-atmosphere { top: 13.5vh; height: 67vh; min-height: 0; width: 36.5vw; }
  .global-controls { top: calc(11.5vh + 10px); }
  .branch-stage { padding-top: 0; }
  .branch-options { margin-top: 4.2vh; }
  .branch-option { min-height: 185px; }
  .explain-layout { grid-template-columns: .82fr 1.18fr; gap: 2.5vw; padding-top: 1.5vh; }
  .capacity-visual { min-height: 510px; padding: 24px; }
  .service-stream { height: 145px; padding: 30px 26px 38px; }
  .stream-window { right: 26px; }
  .opportunity-layout { gap: 2.7vw; padding-top: 1vh; }
  .revenue-counter strong { font-size: clamp(70px, 6.9vw, 105px); }
  .opportunity-main h1 { font-size: clamp(31px, 2.7vw, 43px); }
  .opportunity-cta { margin-top: 14px; min-height: 62px; }
  .assumption-grid span { min-height: 68px; padding: 12px 14px; }
  .dashboard-shell { grid-template-columns: 205px 1fr; gap: 12px; }
  .dashboard-sidebar { padding: 12px 10px; }
  .tour-step { min-height: 41px; }
  .network-panel { padding: 78px 20px 22px; }
  .branch-detail-panel { right: 18px; top: 74px; bottom: 18px; width: 60%; padding: 16px; }
  .diagnostic-callout, .action-card { min-height: 72px; margin-top: 8px; padding: 9px 11px; }
  .timeline-bar { height: 78px; }
  .dashboard-controls { left: calc(3.1vw + 217px); height: 60px; bottom: 1.7vh; }
  .dashboard-controls button { min-height: 64px; min-width: 118px; }
}

@media (max-width: 1180px) {
  .branch-options { grid-template-columns: repeat(2, 1fr); max-width: 820px; }
  .branch-option { min-height: 125px; }
  .branch-stage { padding-top: 0; }
  .explain-layout, .opportunity-layout { gap: 18px; }
  .dashboard-sidebar { display: none; }
  .dashboard-shell { grid-template-columns: 1fr; }
  .dashboard-controls { left: 3.1vw; }
}

/* Plate recognition hero treatment — exhibition enhancement.
   Coordinates below were measured directly from extracted video frames
   (see PLATE_COORDINATE_NOTES.md) rather than guessed. Because a simple
   CSS keyframe cannot reliably track a vehicle following a real, curving
   drive-thru path without drifting onto the vehicle body, this uses a
   single verified detection-lock moment per camera instead of continuous
   motion (deterministic, JS-scheduled — see syncEvidencePlayback in app.js). */
.plate-tracking { position:absolute; inset:0; z-index:5; pointer-events:none; color:#fff; }
.plate-target {
  position:absolute;
  width:6.5%; height:2.8%;
  min-width:56px; min-height:24px;
  transform:translate(-50%,-50%) scale(.82);
  border-radius:7px;
  background:rgba(155,122,247,.05);
  box-shadow:0 0 0 1px rgba(155,122,247,.4),0 0 24px rgba(155,122,247,.2);
  opacity:0;
  transition:opacity .45s ease, transform .45s cubic-bezier(.2,.8,.3,1);
}
.plate-target::before { content:""; position:absolute; inset:-9px; border-radius:12px; background:radial-gradient(circle at 50% 50%,rgba(155,122,247,.2),transparent 68%); filter:blur(4px); }
.plate-target i { position:absolute; width:26%; height:38%; border-color:#b9a5ff; border-style:solid; filter:drop-shadow(0 0 7px rgba(155,122,247,.55)); }
.plate-target i:nth-child(1){left:0;top:0;border-width:2px 0 0 2px;border-radius:7px 0 0 0}
.plate-target i:nth-child(2){right:0;top:0;border-width:2px 2px 0 0;border-radius:0 7px 0 0}
.plate-target i:nth-child(3){left:0;bottom:0;border-width:0 0 2px 2px;border-radius:0 0 0 7px}
.plate-target i:nth-child(4){right:0;bottom:0;border-width:0 2px 2px 0;border-radius:0 0 7px 0}
.plate-target span { position:absolute; left:8%; right:8%; top:50%; height:1px; background:linear-gradient(90deg,transparent,#cbbcff,transparent); opacity:0; box-shadow:0 0 8px rgba(155,122,247,.8); }

/* Acquiring: brief scan pulse right before the lock confirms */
.plate-tracking.is-acquiring .plate-target { opacity:1; transform:translate(-50%,-50%) scale(1.06); }
.plate-tracking.is-acquiring .plate-target span { opacity:.85; animation:plateScan .5s ease-in-out infinite; }
@keyframes plateScan { 0%,100%{transform:translateY(-7px);opacity:.3} 50%{transform:translateY(7px);opacity:1} }

/* Locked: steady, settled, no more motion — this is the payoff moment */
.plate-tracking.is-locked .plate-target { opacity:1; transform:translate(-50%,-50%) scale(1); box-shadow:0 0 0 1.5px rgba(178,157,255,.65),0 0 30px rgba(155,122,247,.32); }
.plate-tracking.is-locked .plate-target span { opacity:0; }

/* Fading: hold ends, return to a clean, unobstructed view of the evidence */
.plate-tracking.is-fading .plate-target,
.plate-tracking.is-fading .plate-hero { opacity:0; transition:opacity .8s ease; }

.evidence-frame.is-entry .plate-target { left:55.2%; top:58.5%; }
.evidence-frame.is-exit .plate-target { left:59.8%; top:37.5%; width:4.4%; height:2.1%; min-width:44px; min-height:19px; }

.plate-hero { position:absolute; left:22px; bottom:22px; min-width:300px; max-width:min(38%,620px); padding:15px 18px 16px; border-radius:14px; border:1px solid rgba(155,122,247,.32); background:linear-gradient(135deg,rgba(13,10,20,.88),rgba(22,16,35,.72)); backdrop-filter:blur(14px); box-shadow:0 18px 50px rgba(0,0,0,.34),0 0 32px rgba(155,122,247,.11); opacity:0; transform:translateY(10px); transition:opacity .5s ease, transform .5s cubic-bezier(.2,.8,.3,1); }
.plate-tracking.is-locked .plate-hero { opacity:1; transform:translateY(0); pointer-events:auto; }
.plate-hero small { display:flex; align-items:center; gap:9px; color:#cbbcff; font-size:clamp(11px,.58vw,18px); font-weight:850; letter-spacing:.12em; }
.plate-hero small em { font-style:normal; padding:4px 7px; border-radius:999px; background:rgba(155,122,247,.12); color:rgba(235,229,255,.62); font-size:.72em; letter-spacing:.08em; }
.plate-hero strong { display:block; margin-top:7px; color:#fff; font-size:clamp(34px,2.55vw,76px); line-height:.95; letter-spacing:.055em; font-variant-numeric:tabular-nums; text-shadow:0 0 28px rgba(155,122,247,.26); }
.plate-hero > span { display:block; margin-top:7px; color:rgba(255,255,255,.56); font-size:clamp(11px,.56vw,17px); letter-spacing:.08em; }

@media (min-width:2560px) and (min-height:1300px) {
  .plate-target { min-width:96px; min-height:34px; border-radius:12px; }
  .plate-hero { left:36px; bottom:34px; min-width:520px; padding:24px 28px 26px; border-radius:22px; }
}

@media (max-width:1500px), (max-height:820px) {
  .plate-target { min-width:46px; min-height:20px; }
  .plate-hero { left:14px; bottom:14px; min-width:230px; max-width:44%; padding:10px 12px 11px; border-radius:11px; }
  .plate-hero strong { font-size:clamp(28px,2.2vw,42px); }
  .plate-hero small { font-size:clamp(10px,.54vw,14px); }
  .plate-hero > span { font-size:clamp(10px,.52vw,14px); }
  .evidence-badge { bottom:12px; }
}