/* ============================================================
   SCENES CSS — All 20 scene-specific styles
   ============================================================ */

/* ════════════════════════════════════════════════════════════
   SCENE 01 — OPENING
   ════════════════════════════════════════════════════════════ */

.scene--opening {
  min-height: 100dvh;
  justify-content: center;
}

.opening__hero {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: var(--space-4);
  margin-bottom: clamp(1rem, 2.5vh, 1.8rem);
  overflow: hidden;
}

.opening__num {
  font-size: var(--text-hero);
  font-weight: var(--weight-extrabold);
  letter-spacing: var(--ls-tight);
  color: var(--c-light-text);
  line-height: 1;
  will-change: transform;
}

.opening__word {
  font-size: clamp(1.2rem, 3vw, 2.2rem);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--ls-wider);
  color: var(--c-light-mid);
  align-self: center;
}

.opening__narrative {
  margin-bottom: clamp(1.2rem, 2.8vh, 2rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
}

.opening__taxonomy {
  display: flex;
  align-items: center;
  gap: clamp(0.5rem, 1.2vw, 1rem);
  flex-wrap: wrap;
  justify-content: center;
}

.opening__tax-item {
  font-size: clamp(1rem, 1.6vw, 1.35rem);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--ls-normal);
  color: var(--c-light-text);
}

.opening__tax-item--highlight {
  color: var(--c-accent);
}

.opening__tax-dot {
  color: var(--c-light-muted);
  opacity: 0.5;
}

.opening__subline {
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--ls-wider);
  color: var(--c-light-muted);
  text-transform: uppercase;
}

.opening__question {
  font-size: clamp(1.45rem, 2.8vw, 2.35rem);
  font-family: var(--font-hand);
  font-weight: 600;
  color: var(--c-light-text);
  line-height: 1.35;
  max-width: 780px;
  margin: 0 auto clamp(1.2rem, 2.8vh, 2rem);
  text-align: center;
  transform: rotate(-0.8deg);
}

.opening__author {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  letter-spacing: var(--ls-wide);
  color: var(--c-light-mid);
}

.opening__author-name {
  font-weight: var(--weight-bold);
  color: var(--c-light-text);
}

.opening__author-sep {
  color: var(--c-accent);
}

/* ════════════════════════════════════════════════════════════
   SCENE 02 — ORIGIN
   ════════════════════════════════════════════════════════════ */

.origin__left {
  padding-top: clamp(0.8rem, 2vh, 1.8rem);
}

.origin__headline {
  font-size: var(--text-display);
  font-weight: var(--weight-bold);
  letter-spacing: var(--ls-tight);
  line-height: 1.1;
  color: var(--c-light-text);
  margin-bottom: var(--space-3);
}

.origin__institution {
  font-size: var(--text-xs);
  letter-spacing: var(--ls-wide);
  color: var(--c-accent);
  text-transform: uppercase;
  font-weight: var(--weight-medium);
  margin-bottom: var(--space-4);
}

.origin__statement {
  font-size: var(--text-lg);
  font-weight: var(--weight-light);
  color: var(--c-light-text);
  margin-bottom: var(--space-3);
  line-height: 1.4;
}

.origin__body {
  font-size: var(--text-sm);
  color: var(--c-light-mid);
  line-height: var(--lh-loose);
  max-width: 440px;
}

/* ── Tech grid ────────────────────────────────────────────── */
.tech-grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding-top: clamp(0.8rem, 2vh, 1.8rem);
}

.tech-fragment {
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

/* Code block */
.code-block {
  background: #0F0F0E;
}

.code-block__header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.code-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
}
.code-dot--red    { background: #FF5F57; }
.code-dot--yellow { background: #FFBD2E; }
.code-dot--green  { background: #28C840; }

.code-block__title {
  font-size: 11px;
  color: var(--c-light-muted);
  font-family: monospace;
  margin-left: var(--space-2);
}

.code-block__body {
  padding: var(--space-3) var(--space-5);
  font-size: var(--text-xs);
  line-height: 1.8;
  color: var(--c-light-mid);
  overflow-x: auto;
}

.c-comment { color: var(--c-light-muted); }
.c-kw      { color: #C792EA; }
.c-fn      { color: #82AAFF; }
.c-type    { color: #FFCB6B; }

/* CS Disciplines Grid */
.cs-disciplines-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2);
  padding: var(--space-3);
  background: rgba(255, 255, 255, 0.02);
}

.cs-discipline {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  color: var(--c-light-text);
  font-weight: var(--weight-medium);
}

.cs-num {
  font-size: 10px;
  color: var(--c-accent);
  font-weight: var(--weight-semibold);
}

/* ════════════════════════════════════════════════════════════
   SCENE 03 — SERVICE
   ════════════════════════════════════════════════════════════ */

.service__period {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-3);
  max-width: 280px;
}

.service__headline {
  font-size: var(--text-display);
  font-weight: var(--weight-bold);
  letter-spacing: var(--ls-tight);
  line-height: 1.15;
  color: var(--c-ink);
  margin-bottom: clamp(1.2rem, 3vh, 2.2rem);
  max-width: 720px;
}

.service__headline em {
  color: var(--c-ink-mid);
}

.service__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1rem, 2vw, 2.5rem);
  margin-bottom: clamp(1.2rem, 2.8vh, 2rem);
}

.service__card {
  padding: var(--space-4) 0 0 0;
  background: transparent;
  border: none;
  border-top: 1.5px solid var(--c-rule);
  border-radius: 0;
  box-shadow: none;
  display: flex;
  flex-direction: column;
  transition: border-top-color var(--dur-fast) var(--ease-out);
}

.service__card:hover {
  border-top-color: var(--c-accent);
}

.service__card-num {
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  color: var(--c-accent);
  letter-spacing: 0.1em;
  margin-bottom: var(--space-2);
}

.service__card-title {
  font-size: clamp(1.15rem, 1.4vw, 1.35rem);
  font-weight: var(--weight-bold);
  letter-spacing: var(--ls-tight);
  color: var(--c-ink);
  margin-bottom: var(--space-2);
}

.service__card-desc {
  font-size: clamp(0.85rem, 0.95vw, 0.92rem);
  color: var(--c-ink-mid);
  line-height: 1.6;
}

.service__note {
  font-family: var(--font-hand);
  font-size: clamp(1.15rem, 1.5vw, 1.35rem);
  font-weight: 600;
  color: var(--c-ink);
  line-height: 1.4;
  border-left: 2px solid var(--c-accent);
  padding-left: var(--space-4);
  max-width: 620px;
  transform: rotate(-0.6deg);
}

@media (max-width: 768px) {
  .service__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ════════════════════════════════════════════════════════════
   SCENE 04 — ENGINEER
   ════════════════════════════════════════════════════════════ */

.engineer__year-tag {
  margin-bottom: var(--space-3);
}

.engineer__headline {
  font-size: var(--text-display);
  font-weight: var(--weight-bold);
  letter-spacing: var(--ls-tight);
  line-height: 1.15;
  color: var(--c-ink);
  margin-bottom: clamp(1.2rem, 3vh, 2.2rem);
  max-width: 740px;
}

.engineer__headline em {
  color: var(--c-ink-mid);
}

.engineer__grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: var(--space-6);
  width: 100%;
  align-items: stretch;
}

.engineer__companies {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.company-card {
  padding: clamp(0.9rem, 1.8vh, 1.3rem) clamp(1rem, 1.8vw, 1.5rem);
  border: 1px solid var(--c-rule);
  border-radius: var(--radius-lg);
  background: var(--glass-bg-light);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  box-shadow: 0 4px 20px -4px rgba(0, 0, 0, 0.05);
  display: flex;
  flex-direction: column;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.company-card:hover {
  transform: translateY(-2px);
  border-color: rgba(217, 79, 44, 0.35);
  box-shadow: 0 10px 28px -4px rgba(217, 79, 44, 0.08), 0 4px 16px rgba(0, 0, 0, 0.05);
}

.company-card__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: var(--space-2);
  gap: var(--space-3);
}

.company-card__brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.company-logo {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  object-fit: contain;
  background: #FFF;
  border: 1px solid var(--c-rule);
  padding: 2px;
}

.company-card__name {
  font-size: var(--text-base);
  font-weight: var(--weight-bold);
  letter-spacing: var(--ls-tight);
  color: var(--c-ink);
}

.company-card__role {
  font-size: 11.5px;
  color: var(--c-accent);
  font-weight: var(--weight-medium);
  margin-top: 1px;
}

.company-card__flag {
  font-size: 10.5px;
  color: var(--c-ink-muted);
  white-space: nowrap;
  padding: 2px 7px;
  border: 1px solid var(--c-rule);
  border-radius: var(--radius-sm);
  background: rgba(0, 0, 0, 0.02);
}

.company-card__body {
  font-size: 11.5px;
  color: var(--c-ink-mid);
  line-height: 1.55;
  margin-bottom: var(--space-3);
  flex-grow: 1;
}

.company-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.tech-tag {
  font-size: 10.5px;
  padding: 2px 7px;
  background: rgba(0, 0, 0, 0.04);
  border: 1px solid var(--c-rule);
  border-radius: var(--radius-sm);
  color: var(--c-ink);
  font-weight: var(--weight-medium);
}

/* Systems Architecture Right Card */
.engineer__arch-card {
  padding: clamp(0.9rem, 1.8vh, 1.3rem) clamp(1rem, 1.8vw, 1.5rem);
  border: 1px solid var(--c-rule);
  border-radius: var(--radius-lg);
  background: var(--c-white);
  box-shadow: 0 4px 20px -4px rgba(0, 0, 0, 0.05);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.engineer__arch-card:hover {
  transform: translateY(-2px);
  border-color: rgba(217, 79, 44, 0.35);
  box-shadow: 0 10px 28px -4px rgba(217, 79, 44, 0.08), 0 4px 16px rgba(0, 0, 0, 0.05);
}

.engineer__arch-header {
  margin-bottom: var(--space-3);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--c-rule);
}

.engineer__arch-badge {
  font-size: 10px;
  font-weight: var(--weight-bold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-accent);
  display: block;
  margin-bottom: 2px;
}

.engineer__arch-title {
  font-size: var(--text-base);
  font-weight: var(--weight-bold);
  color: var(--c-ink);
  letter-spacing: var(--ls-tight);
}

.engineer__arch-items {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  flex-grow: 1;
  margin-bottom: var(--space-3);
}

.engineer__arch-item {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
}

.engineer__arch-item-num {
  font-size: 11px;
  font-weight: var(--weight-bold);
  color: var(--c-accent);
  background: rgba(217, 79, 44, 0.08);
  border-radius: var(--radius-sm);
  padding: 2px 5px;
  line-height: 1;
  margin-top: 2px;
  flex-shrink: 0;
}

.engineer__arch-item-title {
  font-size: 12.5px;
  font-weight: var(--weight-semibold);
  color: var(--c-ink);
  margin-bottom: 2px;
}

.engineer__arch-item-desc {
  font-size: 11px;
  color: var(--c-ink-mid);
  line-height: 1.45;
}

.engineer__note {
  font-family: var(--font-hand);
  font-size: clamp(1.1rem, 1.3vw, 1.25rem);
  font-weight: 600;
  color: var(--c-ink);
  line-height: 1.35;
  border-left: 2px solid var(--c-accent);
  padding-left: var(--space-3);
  transform: rotate(-0.5deg);
  margin-top: auto;
}

@media (max-width: 860px) {
  .engineer__grid {
    grid-template-columns: 1fr;
  }
}

/* ════════════════════════════════════════════════════════════
   SCENE 05 — THE SHIFT
   ════════════════════════════════════════════════════════════ */

.scene--shift {
  flex-direction: column;
}

.shift__intro {
  margin-bottom: clamp(1rem, 2vh, 1.8rem);
}

.shift__header-top {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-2);
}

.shift__badge {
  font-size: 11px;
  font-weight: var(--weight-semibold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--c-accent);
  background: var(--c-accent-bg);
  padding: 3px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(217, 79, 44, 0.22);
}

.shift__headline {
  font-size: var(--text-display);
  font-weight: var(--weight-bold);
  letter-spacing: var(--ls-tight);
  line-height: 1.15;
  color: var(--c-light-text);
  margin-bottom: var(--space-2);
}

.shift__headline em {
  color: var(--c-light-mid);
  font-style: italic;
}

.shift__tech-stream {
  font-size: var(--text-xs);
  color: var(--c-light-muted);
  letter-spacing: 0.02em;
  line-height: 1.8;
}

.shift__tech-stream span { margin-right: 4px; }

.stream-dot {
  color: rgba(255, 255, 255, 0.18);
}

/* Split comparison */
.shift__split {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: clamp(0.8rem, 1.8vw, 1.8rem);
  margin-bottom: clamp(1rem, 2.2vh, 1.8rem);
  align-items: stretch;
}

.shift__panel {
  padding: clamp(1.2rem, 2.2vh, 1.8rem);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.025);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}

.shift__panel--product {
  border-color: rgba(217, 79, 44, 0.28);
  background: rgba(217, 79, 44, 0.04);
}

.shift__panel-label {
  font-size: 11px;
  letter-spacing: var(--ls-wider);
  color: var(--c-light-muted);
  text-transform: uppercase;
  margin-bottom: var(--space-2);
  font-weight: var(--weight-bold);
}

.shift__panel-label--accent {
  color: var(--c-accent);
}

.shift__panel-question {
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  letter-spacing: var(--ls-tight);
  color: var(--c-light-text);
  margin-bottom: var(--space-3);
  line-height: 1.25;
}

.shift__panel--product .shift__panel-question {
  color: var(--c-light-text);
}

.shift__panel-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.shift__panel-list li {
  font-size: var(--text-xs);
  color: var(--c-light-mid);
  padding-left: var(--space-4);
  position: relative;
  line-height: 1.5;
}

.shift__panel-list li::before {
  content: '—';
  position: absolute;
  left: 0;
  color: var(--c-light-muted);
}

.shift__panel--product .shift__panel-list li {
  color: var(--c-light-text);
}

.shift__panel--product .shift__panel-list li::before {
  color: var(--c-accent);
}

.shift__divider {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0 var(--space-1);
}

.shift__divider-line {
  display: none;
}

.shift__divider-label {
  font-size: var(--text-xl);
  color: var(--c-accent);
  font-weight: var(--weight-bold);
}

/* Quote */
.shift__quote-block {
  max-width: 820px;
  margin: 0;
  text-align: left;
  border-left: 2px solid var(--c-accent);
  padding-left: var(--space-4);
}

.shift__quote {
  font-family: var(--font-hand);
  font-size: clamp(1.25rem, 1.8vw, 1.6rem);
  font-weight: 600;
  color: var(--c-light-text);
  line-height: 1.4;
  margin-bottom: 6px;
  transform: rotate(-0.8deg);
  display: inline-block;
}

.shift__conclusion {
  font-size: var(--text-xs);
  color: var(--c-light-muted);
  line-height: 1.5;
}

@media (max-width: 900px) {
  .shift__split {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }

  .shift__divider {
    flex-direction: row;
    padding: 0;
  }

  .shift__divider-line {
    width: 40px;
    height: 1px;
  }
}

/* ════════════════════════════════════════════════════════════
   SCENE 06 — EXPLORATION
   ════════════════════════════════════════════════════════════ */

.exploration__header {
  max-width: 1200px;
  margin-inline: auto;
  width: 100%;
  margin-bottom: clamp(0.5rem, 1.2vh, 1.25rem);
}

.exploration__period {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  letter-spacing: var(--ls-wide);
  color: var(--c-ink-muted);
  margin-bottom: var(--space-2);
  text-transform: uppercase;
}

.exploration__arrow { opacity: 0.4; }

.exploration__headline {
  font-size: var(--text-display);
  font-weight: var(--weight-bold);
  letter-spacing: var(--ls-tight);
  line-height: 1.1;
  color: var(--c-ink);
  max-width: 760px;
}

.exploration__headline em { color: var(--c-ink-mid); }

/* Expansive Spatial Map Canvas */
.map-container {
  position: relative;
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
  height: clamp(220px, 35vh, 310px);
  margin-bottom: clamp(0.75rem, 1.5vh, 1.25rem);
  border: none;
  border-radius: 0;
  overflow: visible;
  background: transparent;
  box-shadow: none;
}

.map-bg {
  position: absolute;
  inset: 0;
  color: var(--c-ink);
}

.map-svg {
  width: 100%;
  height: 100%;
  display: block;
}

.world-countries path {
  fill: #D3CBBC;
  stroke: #736B5E;
  stroke-width: 1;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: fill 0.25s ease, stroke 0.25s ease;
}

.world-countries path:hover {
  fill: #B8ADA0;
}

.world-countries #EG,
.world-countries #SA {
  fill: #C6B69E;
  stroke: #D94F2C;
  stroke-width: 2.8;
}

.world-countries .Turkey,
.world-countries .Canada,
.world-countries .Australia {
  fill: #CBC1B1;
  stroke: #4A443A;
  stroke-width: 1.4;
}

.map-connection-arc {
  fill: none;
  stroke: rgba(217, 79, 44, 0.85);
  stroke-width: 2.5;
  stroke-dasharray: 8 8;
  animation: map-arc-flow 25s linear infinite;
}

@keyframes map-arc-flow {
  to {
    stroke-dashoffset: -200;
  }
}

.map-grid {
  color: var(--c-ink);
}

/* ── SVG Map Pins & Badges (Mathematically Locked to Geography) ── */
.map-pins {
  cursor: pointer;
}

.map-pin {
  outline: none;
  cursor: pointer;
  transform-box: fill-box;
  transform-origin: center center;
}

.map-pin__pulse {
  fill: none;
  stroke: rgba(217, 79, 44, 0.45);
  stroke-width: 2;
  animation: svg-pulse 2.4s ease-out infinite;
  transform-origin: center center;
  transform-box: fill-box;
}

.map-pin--hub .map-pin__pulse {
  stroke: rgba(217, 79, 44, 0.85);
  stroke-width: 2.5;
}

.map-pin__ring {
  fill: none;
  stroke: #D94F2C;
  stroke-width: 2;
  opacity: 0.85;
}

.map-pin__dot {
  fill: #141413;
  stroke: #FFFFFF;
  stroke-width: 3;
  transition: transform 0.2s ease, fill 0.2s ease;
  transform-box: fill-box;
  transform-origin: center center;
}

.map-pin--hub .map-pin__dot {
  fill: #D94F2C;
  stroke: #FFFFFF;
  stroke-width: 3.5;
}

.map-pin:hover .map-pin__dot,
.map-pin:focus .map-pin__dot {
  fill: #D94F2C;
  transform: scale(1.4);
}

.map-pin__badge-bg {
  fill: #141413;
  stroke: rgba(255, 255, 255, 0.3);
  stroke-width: 1.5;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,0.3));
  transition: fill 0.2s ease, transform 0.2s ease;
}

.map-pin--hub .map-pin__badge-bg {
  fill: #D94F2C;
  stroke: rgba(255, 255, 255, 0.5);
}

.map-pin__badge-text {
  fill: #FFFFFF;
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.03em;
  pointer-events: none;
}

/* Hover Card Popover in SVG */
.map-pin__popover {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s cubic-bezier(0.16, 1, 0.3, 1), transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  transform: translateY(6px);
}

.map-pin:hover .map-pin__popover,
.map-pin:focus .map-pin__popover {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.map-pin__popover-bg {
  fill: #0C0C0B;
  stroke: rgba(217, 79, 44, 0.75);
  stroke-width: 2;
  filter: drop-shadow(0 12px 28px rgba(0,0,0,0.45));
}

.map-pin__popover-title {
  fill: #FFFFFF;
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.map-pin__popover-desc {
  fill: #CCC9C2;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
}

@keyframes svg-pulse {
  0% {
    r: 12;
    opacity: 0.95;
  }
  100% {
    r: 44;
    opacity: 0;
  }
}

/* Stats row */
.exploration__stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
  max-width: 980px;
  margin-inline: auto;
  width: 100%;
}

.exploration__stat {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: clamp(0.35rem, 0.8vh, 0.75rem) 0;
  border-top: 1px solid var(--c-rule);
}

.exploration__stat-num {
  font-size: clamp(1.4rem, 2.2vw, 1.875rem);
  font-weight: var(--weight-extrabold);
  letter-spacing: var(--ls-tight);
  color: var(--c-ink);
}

.exploration__stat-label {
  font-size: var(--text-xs);
  letter-spacing: var(--ls-wide);
  color: var(--c-ink-muted);
  text-transform: uppercase;
}

@media (max-width: 768px) {
  .exploration__stats { grid-template-columns: repeat(2, 1fr); }
  .map-container { height: 260px; }
}

/* ════════════════════════════════════════════════════════════
   SCENES 07 & 08 — CASE STUDIES
   ════════════════════════════════════════════════════════════ */

.case-study__split {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: var(--space-6);
  width: 100%;
  align-items: stretch;
}

.case-study__col-narrative {
  display: flex;
  flex-direction: column;
}

.case-study__col-showcase {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.case-study__brand-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: clamp(0.35rem, 0.8vh, 0.65rem);
  gap: var(--space-4);
}

.case-study__brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.case-study__logo {
  width: 38px;
  height: 38px;
  border-radius: var(--radius-sm);
  object-fit: contain;
  background: #FFF;
  border: 1px solid var(--c-rule);
  padding: 3px;
  flex-shrink: 0;
}

.case-study__label {
  font-size: 10px;
  letter-spacing: var(--ls-wider);
  color: var(--c-accent);
  text-transform: uppercase;
  font-weight: var(--weight-bold);
  display: block;
  margin-bottom: 2px;
}

.case-study__name {
  font-size: clamp(1.4rem, 2.4vw, 2rem);
  font-weight: var(--weight-bold);
  letter-spacing: var(--ls-tight);
  color: var(--c-ink);
  line-height: 1.1;
}

.case-study__context {
  font-size: 11.5px;
  color: var(--c-ink-muted);
  margin-top: 2px;
}

.case-study__kpi {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  flex-shrink: 0;
}

.case-study__kpi-num {
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  font-weight: var(--weight-extrabold);
  letter-spacing: var(--ls-tight);
  color: var(--c-accent);
  line-height: 1;
}

.case-study__kpi-unit {
  font-size: 11px;
  color: var(--c-ink-muted);
  letter-spacing: var(--ls-wide);
  text-align: right;
  text-transform: uppercase;
}

.case-study__framing {
  font-size: 12px;
  color: var(--c-ink-mid);
  line-height: 1.5;
  margin-bottom: clamp(0.5rem, 1vh, 0.85rem);
}

/* 2x2 Process Grid for Quran */
.case-study__process-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
  margin-bottom: clamp(0.5rem, 1vh, 0.85rem);
}

.case-study__process-grid .process-step {
  padding: clamp(0.4rem, 0.8vh, 0.65rem) clamp(0.5rem, 0.8vw, 0.75rem);
  border: 1px solid var(--c-rule);
  border-radius: var(--radius-md);
  background: var(--c-white);
  box-shadow: 0 2px 10px rgba(0,0,0,0.03);
  transition: border-color var(--dur-fast), transform var(--dur-fast), box-shadow var(--dur-fast);
}

.case-study__process-grid .process-step:hover {
  border-color: rgba(217, 79, 44, 0.4);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(217, 79, 44, 0.08);
}

.process-step__num {
  font-size: 10px;
  font-weight: var(--weight-bold);
  letter-spacing: var(--ls-wider);
  color: var(--c-accent);
  margin-bottom: 2px;
}

.process-step__title {
  font-size: 12.5px;
  font-weight: var(--weight-semibold);
  color: var(--c-ink);
  margin-bottom: 3px;
}

.process-step__list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.process-step__list li {
  font-size: 11px;
  color: var(--c-ink-muted);
  line-height: 1.4;
  padding-left: var(--space-3);
  position: relative;
}

.process-step__list li::before {
  content: '·';
  position: absolute;
  left: 0;
  color: var(--c-accent);
}

.case-study__note {
  font-family: var(--font-hand);
  font-size: clamp(1.1rem, 1.3vw, 1.25rem);
  font-weight: 600;
  color: var(--c-ink);
  line-height: 1.35;
  border-left: 2px solid var(--c-accent);
  padding-left: var(--space-3);
  transform: rotate(-0.5deg);
  margin-top: auto;
}

/* Quran Showcase Card */
.showcase-card {
  border: 1px solid var(--c-rule);
  border-radius: var(--radius-lg);
  background: var(--c-white);
  box-shadow: 0 6px 24px -4px rgba(0, 0, 0, 0.06);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.showcase-card:hover {
  transform: translateY(-2px);
  border-color: rgba(217, 79, 44, 0.35);
  box-shadow: 0 12px 28px -4px rgba(217, 79, 44, 0.08), 0 4px 16px rgba(0, 0, 0, 0.05);
}

.showcase-card__screen {
  width: 100%;
  height: clamp(170px, 24vh, 230px);
  background: #F4F1EA;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--c-rule);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
}

.showcase-card__img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center center;
  display: block;
}

.showcase-card__footer {
  margin-top: var(--space-3);
}

.showcase-card__pills {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-bottom: var(--space-2);
}

.showcase-pill {
  font-size: 10.5px;
  padding: 2px 7px;
  background: rgba(0, 0, 0, 0.03);
  border: 1px solid var(--c-rule);
  border-radius: var(--radius-sm);
  color: var(--c-ink);
  font-weight: var(--weight-medium);
}

.showcase-card__meta-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: var(--space-2);
  border-top: 1px solid var(--c-rule);
  font-size: 11px;
}

.showcase-card__badge {
  color: var(--c-accent);
  font-weight: var(--weight-semibold);
}

.showcase-card__region {
  color: var(--c-ink-muted);
}

/* Hangouts Pillars */
.hangouts__pillars {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: clamp(0.5rem, 1vh, 0.85rem);
}

.hangouts__pillar {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  padding: clamp(0.4rem, 0.8vh, 0.6rem) clamp(0.5rem, 0.8vw, 0.75rem);
  border: 1px solid var(--c-rule);
  border-radius: var(--radius-md);
  background: var(--c-white);
  box-shadow: 0 2px 8px rgba(0,0,0,0.02);
  transition: border-color var(--dur-fast), transform var(--dur-fast);
}

.hangouts__pillar:hover {
  border-color: rgba(217, 79, 44, 0.35);
  transform: translateY(-1px);
}

.hangouts__pillar-num {
  font-size: 10.5px;
  font-weight: var(--weight-bold);
  color: var(--c-accent);
  background: rgba(217, 79, 44, 0.08);
  border-radius: var(--radius-sm);
  padding: 2px 5px;
  line-height: 1;
  margin-top: 2px;
  flex-shrink: 0;
}

.hangouts__pillar-title {
  font-size: 12px;
  font-weight: var(--weight-semibold);
  color: var(--c-ink);
  margin-bottom: 1px;
}

.hangouts__pillar-desc {
  font-size: 11px;
  color: var(--c-ink-mid);
  line-height: 1.4;
}

/* Hangouts Showcase Right Column */
/* Hangouts Showcase Right Column: Smartphone Mockup & Mobile Screen */
.hangouts__showcase-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(0.35rem, 0.7vh, 0.6rem);
  width: 100%;
}

.hangouts__mobile-frame {
  width: min(100%, 318px);
  background: #18181B;
  border: 6px solid #232326;
  border-radius: 32px;
  box-shadow:
    0 16px 36px -8px rgba(0, 0, 0, 0.22),
    0 4px 12px rgba(0, 0, 0, 0.08),
    0 0 0 1px rgba(255, 255, 255, 0.12),
    inset 0 0 0 1px rgba(0, 0, 0, 0.6);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.hangouts__mobile-frame:hover {
  transform: translateY(-2px);
  box-shadow:
    0 22px 42px -8px rgba(0, 0, 0, 0.28),
    0 6px 16px rgba(0, 0, 0, 0.1),
    0 0 0 1px rgba(217, 79, 44, 0.35);
}

/* Mobile Phone Hardware Top: Dynamic Island & Status Bar */
.mobile-phone-top {
  background: #FFFFFF;
  padding: 6px 14px 4px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(0, 0, 0, 0.04);
  position: relative;
  z-index: 3;
}

.mobile-time {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif;
  font-size: 10px;
  font-weight: 700;
  color: #18181B;
  letter-spacing: -0.02em;
  width: 32px;
}

.mobile-notch {
  width: 64px;
  height: 15px;
  background: #09090B;
  border-radius: 10px;
  flex-shrink: 0;
  box-shadow: inset 0 0 2px rgba(255, 255, 255, 0.15);
}

.mobile-icons {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  width: 32px;
}

.mobile-icon-signal {
  width: 12px;
  height: 8.5px;
  display: inline-block;
  background:
    linear-gradient(#18181B, #18181B) 0 100% / 2px 35% no-repeat,
    linear-gradient(#18181B, #18181B) 3.2px 100% / 2px 55% no-repeat,
    linear-gradient(#18181B, #18181B) 6.4px 100% / 2px 78% no-repeat,
    linear-gradient(#18181B, #18181B) 9.6px 100% / 2px 100% no-repeat;
}

.mobile-icon-battery {
  width: 15px;
  height: 8px;
  border: 1.2px solid #18181B;
  border-radius: 2.2px;
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 1px;
}

.mobile-icon-battery::before {
  content: '';
  display: block;
  width: 75%;
  height: 100%;
  background: #16A34A;
  border-radius: 1px;
}

.mobile-icon-battery::after {
  content: '';
  position: absolute;
  right: -2.5px;
  top: 1.5px;
  width: 1.2px;
  height: 2.8px;
  background: #18181B;
  border-radius: 0 1px 1px 0;
}

/* Phone Inner Screen Container */
.mobile-phone-screen {
  background: #FAF9F6;
  padding: clamp(0.5rem, 0.9vh, 0.7rem);
  display: flex;
  flex-direction: column;
  gap: clamp(0.32rem, 0.65vh, 0.48rem);
}

.mobile-home-indicator {
  width: 72px;
  height: 3px;
  background: #18181B;
  border-radius: 2px;
  margin: clamp(0.2rem, 0.4vh, 0.35rem) auto 1px;
  opacity: 0.55;
}

.hangouts__tfss-artifact {
  padding: clamp(0.75rem, 1.4vh, 1.15rem);
  border: 1px solid var(--c-rule);
  border-radius: var(--radius-lg);
  background: var(--c-white);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
  display: flex;
  flex-direction: column;
  gap: clamp(0.45rem, 0.9vh, 0.75rem);
}

.tfss-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--c-rule);
  padding-bottom: var(--space-2);
}

.tfss-badge {
  font-size: 9.5px;
  font-weight: var(--weight-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-accent);
  display: block;
  margin-bottom: 2px;
}

.tfss-title {
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  color: var(--c-ink);
  letter-spacing: var(--ls-tight);
}

.tfss-geo-pill {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  background: rgba(217, 79, 44, 0.08);
  border: 1px solid rgba(217, 79, 44, 0.25);
  font-size: 10px;
  font-weight: var(--weight-semibold);
  color: var(--c-accent);
}

.geo-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--c-accent);
  animation: pulse-dot 1.8s infinite;
}

/* TFSS Scorecard */
.tfss-scorecard {
  padding: clamp(0.5rem, 1vh, 0.75rem);
  border: 1px solid var(--c-rule);
  border-radius: var(--radius-md);
  background: rgba(0, 0, 0, 0.015);
}

.tfss-score-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: clamp(0.4rem, 0.8vh, 0.6rem);
}

.tfss-score-badge {
  display: flex;
  align-items: baseline;
  gap: 2px;
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  background: #141413;
  color: #FFF;
  font-weight: var(--weight-extrabold);
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}

.tfss-score-val {
  font-size: 17px;
  color: #F59E0B;
}

.tfss-score-max {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.6);
}

.tfss-status-tag {
  font-size: 9px;
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #166534;
  background: rgba(34, 197, 94, 0.1);
  border: 1px solid rgba(34, 197, 94, 0.3);
  border-radius: var(--radius-sm);
  padding: 1px 6px;
  display: inline-block;
  margin-bottom: 2px;
}

.tfss-loc-name {
  font-size: 12px;
  font-weight: var(--weight-bold);
  color: var(--c-ink);
  margin: 0;
}

.tfss-metrics-bars {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.tfss-bar-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.tfss-bar-meta {
  display: flex;
  justify-content: space-between;
  font-size: 9.5px;
  color: var(--c-ink-mid);
  font-weight: var(--weight-medium);
}

.tfss-bar-val {
  font-weight: var(--weight-bold);
  color: var(--c-ink);
}

.tfss-bar-track {
  width: 100%;
  height: 4px;
  border-radius: 2px;
  background: rgba(0, 0, 0, 0.06);
  overflow: hidden;
}

.tfss-bar-fill {
  height: 100%;
  border-radius: 2px;
  background: var(--c-accent);
  transition: width 0.8s ease;
}

/* Observed Activities */
.tfss-activities {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.tfss-act-label {
  font-size: 9.5px;
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--c-ink-muted);
}

.tfss-act-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.tfss-tag {
  font-size: 9.5px;
  font-weight: var(--weight-medium);
  padding: 2px 7px;
  border-radius: var(--radius-sm);
  background: rgba(0, 0, 0, 0.03);
  border: 1px solid var(--c-rule);
  color: var(--c-ink);
}

.tfss-tag--highlight {
  background: rgba(34, 197, 94, 0.08);
  border-color: rgba(34, 197, 94, 0.3);
  color: #166534;
  font-weight: var(--weight-bold);
}

/* 3-Stage Audit Pipeline */
.tfss-pipeline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  padding: clamp(0.35rem, 0.7vh, 0.55rem) var(--space-2);
  border-radius: var(--radius-md);
  background: rgba(0, 0, 0, 0.02);
  border: 1px dashed var(--c-rule);
}

.tfss-pipe-step {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.pipe-step-num {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: var(--weight-bold);
  color: var(--c-accent);
}

.pipe-step-label {
  font-size: 10px;
  font-weight: var(--weight-bold);
  color: var(--c-ink);
}

.pipe-step-desc {
  font-size: 8.5px;
  color: var(--c-ink-muted);
  line-height: 1.2;
}

.pipe-sep {
  color: var(--c-ink-muted);
  font-size: 11px;
  opacity: 0.5;
}

/* Store Mini Proof */
.hangouts__artifact-footer {
  width: min(100%, 318px);
}

.hangouts__store-mini {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: clamp(0.32rem, 0.65vh, 0.48rem) clamp(0.5rem, 0.8vw, 0.7rem);
  border: 1px solid var(--c-rule);
  border-radius: var(--radius-md);
  background: var(--c-white);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
}

.hangouts__store-mini-img {
  width: 48px;
  height: 30px;
  object-fit: contain;
  border-radius: var(--radius-xs);
  border: 1px solid var(--c-rule);
  background: #FFF;
  flex-shrink: 0;
}

.hangouts__store-mini-meta {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.hangouts__store-stars {
  font-size: 10.5px;
  font-weight: var(--weight-bold);
  color: #D94F2C;
}

.hangouts__store-count {
  font-size: 9.5px;
  color: var(--c-ink-muted);
}

@media (max-width: 860px) {
  .case-study__split {
    grid-template-columns: 1fr;
  }
}

/* ════════════════════════════════════════════════════════════
   SCENE 09 — AI ENTERS
   ════════════════════════════════════════════════════════════ */

.ai-enters__left { padding-top: var(--space-2); }

.ai-enters__period {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: clamp(0.75rem, 1.5vh, 1.5rem);
  max-width: 280px;
}

.ai-enters__headline {
  font-size: var(--text-display);
  font-weight: var(--weight-bold);
  letter-spacing: var(--ls-tight);
  line-height: 1.05;
  color: var(--c-light-text);
  margin-bottom: clamp(0.75rem, 1.5vh, 1.5rem);
}

.ai-enters__headline em {
  color: var(--c-accent-light);
  font-style: italic;
  font-family: var(--font-display);
}

.ai-enters__company {
  max-width: 400px;
}

.ai-enters__company-name {
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  color: var(--c-light-text);
  letter-spacing: var(--ls-tight);
  margin-bottom: var(--space-2);
  display: block;
}

.ai-enters__company-context {
  font-size: var(--text-sm);
  color: rgba(242, 241, 238, 0.55);
  line-height: 1.5;
}

.ai-product-tags {
  display: flex;
  flex-direction: column;
  gap: clamp(0.35rem, 0.8vh, 0.75rem);
  margin-bottom: var(--space-6);
}

.ai-tag {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: clamp(0.4rem, 1vh, 0.75rem) clamp(0.6rem, 1.2vw, 1rem);
  border: 1px solid var(--c-rule-dark);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  color: rgba(242, 241, 238, 0.75);
  transition: border-color var(--dur-fast), color var(--dur-fast);
}

.ai-tag:hover {
  border-color: var(--c-accent);
  color: var(--c-light-text);
}

.ai-tag__num {
  font-size: var(--text-xs);
  color: rgba(242, 241, 238, 0.25);
  font-weight: var(--weight-bold);
  flex-shrink: 0;
}

/* ════════════════════════════════════════════════════════════
   SCENE 10 — AI PRODUCTS
   ════════════════════════════════════════════════════════════ */

.ai-products__headline {
  font-size: var(--text-display);
  font-weight: var(--weight-bold);
  letter-spacing: var(--ls-tight);
  line-height: 1.1;
  color: var(--c-light-text);
  margin-bottom: clamp(0.75rem, 1.5vh, 1.5rem);
  max-width: 700px;
}

.ai-products__headline em {
  color: rgba(242, 241, 238, 0.5);
  font-style: italic;
  font-family: var(--font-display);
}

/* AI Products Architectural Schematics */
.ai-schematics {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(0.5rem, 1vh, 0.85rem);
}

.ai-schematic-card {
  padding: clamp(0.6rem, 1.2vh, 0.85rem) clamp(0.75rem, 1.2vw, 1rem);
  border: 1px solid var(--c-rule-dark);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.02);
  display: flex;
  flex-direction: column;
  gap: clamp(0.35rem, 0.7vh, 0.6rem);
  transition: border-color var(--dur-fast), background var(--dur-fast), transform var(--dur-fast);
}

.ai-schematic-card:hover {
  border-color: rgba(217, 79, 44, 0.45);
  background: rgba(217, 79, 44, 0.03);
  transform: translateY(-2px);
}

.ai-schematic-header {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  padding-bottom: var(--space-2);
}

.ai-schematic-num {
  font-size: 10px;
  font-weight: var(--weight-bold);
  letter-spacing: 0.08em;
  color: var(--c-accent-light);
  background: rgba(217, 79, 44, 0.12);
  padding: 2px 5px;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
  margin-top: 2px;
}

.ai-schematic-title {
  font-size: clamp(0.85rem, 1.1vw, 0.98rem);
  font-weight: var(--weight-bold);
  color: var(--c-light-text);
  letter-spacing: var(--ls-tight);
}

.ai-schematic-sub {
  font-size: 10px;
  color: rgba(242, 241, 238, 0.45);
  margin-top: 1px;
}

/* Canvas Area for Visual Schematics */
.ai-schematic-canvas {
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.04);
  border-radius: var(--radius-md);
  padding: clamp(0.4rem, 0.8vh, 0.6rem);
  min-height: 58px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* 01 Tree Node Decision Graph */
.tree-node--root {
  text-align: center;
  margin-bottom: 4px;
}

.tree-node__pill {
  font-size: 9px;
  font-weight: var(--weight-semibold);
  color: #DDD;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: var(--radius-full);
  padding: 1px 7px;
  display: inline-block;
}

.tree-connector {
  width: 1px;
  height: 6px;
  background: rgba(255, 255, 255, 0.15);
  margin: 0 auto;
}

.tree-branches {
  display: flex;
  justify-content: space-around;
  gap: 6px;
}

.tree-node__leaf {
  font-size: 8.5px;
  font-weight: var(--weight-medium);
  padding: 1px 6px;
  border-radius: var(--radius-sm);
  display: inline-block;
}

.tree-node__leaf--matched {
  color: #4ade80;
  background: rgba(74, 222, 128, 0.1);
  border: 1px solid rgba(74, 222, 128, 0.25);
}

.tree-node__leaf--fallback {
  color: #fb923c;
  background: rgba(251, 146, 60, 0.1);
  border: 1px solid rgba(251, 146, 60, 0.25);
}

/* 02 Eval Gauge */
.eval-gauge {
  margin-bottom: 4px;
}

.eval-bar {
  height: 4px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 2px;
  overflow: hidden;
  margin-bottom: 3px;
}

.eval-fill {
  height: 100%;
  background: linear-gradient(90deg, #3b82f6, var(--c-accent-light));
  border-radius: 2px;
}

.eval-metrics {
  display: flex;
  justify-content: space-between;
  font-size: 9px;
  color: rgba(242, 241, 238, 0.5);
  font-family: monospace;
}

.eval-steps {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-size: 8.5px;
}

.eval-step {
  color: rgba(242, 241, 238, 0.35);
}

.eval-step.is-complete {
  color: rgba(242, 241, 238, 0.7);
}

.eval-step.is-active {
  color: var(--c-accent-light);
  font-weight: var(--weight-bold);
}

.eval-arrow {
  color: rgba(255, 255, 255, 0.2);
}

/* 03 Telemetry Stream */
.telemetry-stream {
  position: relative;
  height: 24px;
  display: flex;
  align-items: center;
}

.telemetry-line {
  position: absolute;
  width: 100%;
  height: 1px;
  background: rgba(255, 255, 255, 0.1);
}

.telemetry-point {
  position: absolute;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  gap: 3px;
}

.point-glow {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #38bdf8;
  box-shadow: 0 0 6px #38bdf8;
}

.telemetry-point--alert .point-glow {
  background: #f43f5e;
  box-shadow: 0 0 6px #f43f5e;
}

.point-tag {
  font-size: 8px;
  color: rgba(242, 241, 238, 0.75);
  white-space: nowrap;
}

.telemetry-legend {
  display: flex;
  justify-content: space-between;
  font-size: 8.5px;
  color: rgba(242, 241, 238, 0.4);
}

.live-dot {
  color: #38bdf8;
  font-weight: var(--weight-bold);
}

/* 04 Spatial Matrix */
.spatial-matrix {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.matrix-bounding {
  position: relative;
  border: 1px dashed rgba(217, 79, 44, 0.6);
  padding: 3px 6px;
  border-radius: var(--radius-sm);
  background: rgba(217, 79, 44, 0.08);
}

.bounding-tag {
  font-size: 8.5px;
  font-family: monospace;
  color: var(--c-accent-light);
}

.status-verified {
  font-size: 8.5px;
  font-weight: var(--weight-semibold);
  color: rgba(242, 241, 238, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 2px 5px;
  border-radius: var(--radius-sm);
}

/* Schematic Challenge Callout */
.ai-schematic-challenge {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
}

.ai-schematic-badge {
  font-size: 8.5px;
  font-weight: var(--weight-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-accent-light);
  flex-shrink: 0;
}

.ai-schematic-challenge p {
  font-size: 10px;
  color: rgba(242, 241, 238, 0.55);
  line-height: 1.35;
  margin: 0;
}

/* ════════════════════════════════════════════════════════════
/* ════════════════════════════════════════════════════════════
   SCENE 11 — HUMAN IN THE LOOP (HORIZONTAL WORKFLOW)
   ════════════════════════════════════════════════════════════ */

.scene--human-loop {
  justify-content: center;
}

.scene__inner--wide {
  max-width: 1200px;
  width: 100%;
}

.human-loop__headline {
  font-size: var(--text-display);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--ls-tight);
  line-height: 1.1;
  color: var(--c-light-text);
  margin-bottom: clamp(1rem, 2vh, 1.75rem);
}

/* Dynamic Horizontal Workflow */
.pipeline-workflow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: clamp(0.5rem, 1vw, 1.25rem);
  margin-bottom: clamp(0.75rem, 1.8vh, 1.5rem);
}

.pipe-stage {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  flex: 1;
}

.pipe-stage__num {
  font-size: 10px;
  font-weight: var(--weight-bold);
  letter-spacing: 0.08em;
  color: rgba(242, 241, 238, 0.35);
}

.pipe-stage__card {
  padding: clamp(0.6rem, 1.2vh, 1rem) clamp(0.75rem, 1vw, 1rem);
  border: 1px solid var(--c-rule-dark);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.02);
  display: flex;
  flex-direction: column;
  gap: 3px;
  transition: border-color var(--dur-fast), background var(--dur-fast), transform var(--dur-fast);
}

.pipe-stage__card:hover {
  border-color: rgba(217, 79, 44, 0.5);
  background: rgba(217, 79, 44, 0.03);
  transform: translateY(-2px);
}

.pipe-stage--active .pipe-stage__card {
  border-color: var(--c-accent);
  background: rgba(217, 79, 44, 0.1);
  box-shadow: 0 0 24px rgba(217, 79, 44, 0.2);
}

.pipe-stage__icon {
  color: rgba(242, 241, 238, 0.45);
  margin-bottom: 2px;
}

.pipe-stage--active .pipe-stage__icon {
  color: var(--c-accent-light);
}

.pipe-stage__name {
  font-size: clamp(0.85rem, 1.05vw, 0.98rem);
  font-weight: var(--weight-bold);
  letter-spacing: var(--ls-tight);
  color: var(--c-light-text);
}

.pipe-stage--active .pipe-stage__name {
  color: var(--c-accent-light);
}

.pipe-stage__desc {
  font-size: 10px;
  color: rgba(242, 241, 238, 0.5);
  line-height: 1.35;
}

.pipe-stage__telemetry {
  font-size: 9px;
  font-family: monospace;
  color: rgba(242, 241, 238, 0.4);
  margin-top: 4px;
}

.pipe-stage__telemetry--warn {
  color: #fb923c;
  font-weight: var(--weight-bold);
}

.pipe-stage__tag {
  font-size: 9px;
  font-weight: var(--weight-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-accent-light);
  background: rgba(217, 79, 44, 0.2);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  display: inline-block;
  align-self: flex-start;
  margin-top: 4px;
}

/* Connecting Pulse Line */
.pipe-connector {
  position: relative;
  width: clamp(20px, 3vw, 40px);
  height: 2px;
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.pipe-line {
  width: 100%;
  height: 2px;
  background: rgba(255, 255, 255, 0.12);
}

.pipe-connector--highlight .pipe-line {
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.15), var(--c-accent));
}

.pipe-pulse {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--c-accent);
  box-shadow: 0 0 8px var(--c-accent);
  animation: pipePulse 2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

@keyframes pipePulse {
  0% { left: 0; opacity: 0; }
  50% { opacity: 1; }
  100% { left: calc(100% - 6px); opacity: 0; }
}

/* Continuous Feedback Loop Bar */
.pipe-loop-bar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: clamp(0.5rem, 1vh, 0.75rem) var(--space-4);
  border: 1px dashed rgba(217, 79, 44, 0.4);
  border-radius: var(--radius-lg);
  background: rgba(217, 79, 44, 0.04);
  margin-bottom: clamp(1rem, 2vh, 1.6rem);
}

.pipe-loop-arrow {
  font-size: 16px;
  color: var(--c-accent-light);
  animation: rotateLoop 6s linear infinite;
}

@keyframes rotateLoop {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.pipe-loop-text {
  font-size: 11px;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.04em;
  color: rgba(242, 241, 238, 0.8);
}

@media (max-width: 860px) {
  .pipeline-workflow {
    flex-direction: column;
    align-items: stretch;
  }
  .pipe-connector {
    width: 2px;
    height: 20px;
    margin: 0 auto;
  }
  .pipe-line { width: 2px; height: 100%; }
}

/* ════════════════════════════════════════════════════════════
   SCENE 12 — REFLECTION (CENTERED MONUMENTAL COMPOSITION)
   ════════════════════════════════════════════════════════════ */

.scene--reflection {
  justify-content: center;
}

.scene__inner--centered-monumental {
  max-width: 860px;
  margin-inline: auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.reflection__headline {
  font-size: clamp(2rem, 3.8vw, 3.2rem);
  font-weight: var(--weight-bold);
  letter-spacing: var(--ls-tight);
  line-height: 1.1;
  color: var(--c-light-text);
  margin-bottom: clamp(1.2rem, 2.5vh, 2rem);
}

.reflection__headline em {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--c-accent-light);
}

/* Horizontal Cognitive Progression */
.cognitive-spectrum {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: clamp(0.4rem, 0.8vw, 0.85rem);
  margin-bottom: clamp(1.5rem, 3vh, 2.5rem);
}

.cog-node {
  display: flex;
  align-items: baseline;
  gap: 5px;
  padding: 4px 10px;
  border-radius: var(--radius-full);
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.02);
  transition: border-color var(--dur-fast), background var(--dur-fast);
}

.cog-node:hover {
  border-color: rgba(217, 79, 44, 0.5);
  background: rgba(217, 79, 44, 0.05);
}

.cog-node__num {
  font-size: 9px;
  font-family: monospace;
  color: var(--c-accent-light);
  font-weight: var(--weight-bold);
}

.cog-node__label {
  font-size: 10px;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.08em;
  color: rgba(242, 241, 238, 0.7);
  text-transform: uppercase;
}

.cog-node--subconscious {
  border-style: dashed;
  border-color: rgba(255, 255, 255, 0.2);
}

.cog-node--final {
  border-color: var(--c-accent);
  background: rgba(217, 79, 44, 0.12);
}

.cog-node--final .cog-node__label {
  color: var(--c-accent-light);
  font-weight: var(--weight-bold);
}

.cog-connector {
  color: rgba(255, 255, 255, 0.2);
  font-size: 11px;
}

/* Monumental Quote */
.reflection__monument {
  max-width: 740px;
  margin: 0 auto clamp(1.2rem, 2.5vh, 2rem);
  padding: 0;
  border: none;
}

.reflection__monument-text {
  font-family: var(--font-hand);
  font-size: clamp(1.4rem, 2.2vw, 1.95rem);
  font-weight: 600;
  color: rgba(242, 241, 238, 0.95);
  line-height: 1.5;
  margin-bottom: var(--space-4);
  transform: rotate(-0.5deg);
}

.reflection__monument-text em {
  color: var(--c-accent-light);
  font-style: italic;
}

.reflection__monument-footer {
  display: block;
}

.reflection__monument-cite {
  font-size: var(--text-xs);
  color: rgba(242, 241, 238, 0.35);
  font-style: normal;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
}

.reflection__bridge {
  font-size: var(--text-sm);
  color: rgba(242, 241, 238, 0.4);
  letter-spacing: var(--ls-wide);
  font-style: italic;
}

/* ════════════════════════════════════════════════════════════
   SCENE 13 — SPEERO
   ════════════════════════════════════════════════════════════ */

.speero__period {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-3);
  max-width: 280px;
}

.speero__headline {
  font-size: clamp(1.8rem, 3.2vw, 2.75rem);
  font-weight: var(--weight-bold);
  letter-spacing: var(--ls-tight);
  color: var(--c-ink);
  line-height: 1;
}

.speero__category {
  font-size: var(--text-xs);
  color: var(--c-ink-muted);
  margin-top: 2px;
}

.speero__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: clamp(0.5rem, 1vh, 0.85rem);
  gap: var(--space-6);
}

.speero__funding {
  text-align: right;
  flex-shrink: 0;
}

.speero__funding-num {
  display: block;
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  font-weight: var(--weight-extrabold);
  letter-spacing: var(--ls-tight);
  color: var(--c-accent);
  line-height: 1;
}

.speero__funding-label {
  font-size: 11px;
  color: var(--c-ink-muted);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
}

.speero__split {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: var(--space-6);
  align-items: stretch;
  width: 100%;
}

.speero__col-narrative {
  display: flex;
  flex-direction: column;
}

.speero__col-showcase {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.speero__story-title {
  font-size: clamp(1rem, 1.4vw, 1.25rem);
  font-weight: var(--weight-bold);
  color: var(--c-ink);
  margin-bottom: var(--space-2);
}

.speero__story-body {
  font-size: 12px;
  color: var(--c-ink-mid);
  line-height: 1.5;
  margin-bottom: clamp(0.4rem, 0.8vh, 0.65rem);
}

.speero__flow-card {
  padding: clamp(0.6rem, 1.2vh, 0.9rem) clamp(0.75rem, 1.4vw, 1.1rem);
  border: 1px solid var(--c-rule);
  border-radius: var(--radius-md);
  background: var(--c-white);
  box-shadow: 0 2px 10px rgba(0,0,0,0.03);
  margin-bottom: clamp(0.4rem, 0.8vh, 0.65rem);
  transition: border-color var(--dur-fast), transform var(--dur-fast);
}

.speero__flow-card:hover {
  border-color: rgba(217, 79, 44, 0.35);
  transform: translateY(-1px);
}

.speero__flow-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-2);
  padding-bottom: 3px;
  border-bottom: 1px solid var(--c-rule);
}

.speero__flow-tag {
  font-size: 10px;
  font-weight: var(--weight-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-accent);
}

.speero__flow-confidence {
  font-size: 10px;
  font-weight: var(--weight-semibold);
  color: var(--c-ink-muted);
  background: rgba(0,0,0,0.03);
  padding: 1px 6px;
  border-radius: var(--radius-sm);
}

.speero__flow-nodes {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-2);
}

.speero__flow-node {
  flex: 1;
  padding: 5px 8px;
  border: 1px solid var(--c-rule);
  border-radius: var(--radius-sm);
  background: rgba(0,0,0,0.015);
  display: flex;
  flex-direction: column;
}

.speero__flow-node--alt {
  border-color: rgba(217, 79, 44, 0.4);
  background: rgba(217, 79, 44, 0.04);
}

.speero__node-label {
  font-size: 9px;
  color: var(--c-ink-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.speero__node-car {
  font-size: 12px;
  font-weight: var(--weight-bold);
  color: var(--c-ink);
}

.speero__flow-arrow {
  color: var(--c-accent);
  font-weight: var(--weight-bold);
  font-size: var(--text-base);
}

.speero__flow-metric {
  font-size: 11px;
  color: var(--c-accent);
  font-weight: var(--weight-semibold);
}

.speero__insight {
  font-family: var(--font-hand);
  font-size: clamp(1.1rem, 1.3vw, 1.25rem);
  font-weight: 600;
  color: var(--c-ink);
  line-height: 1.35;
  border-left: 2px solid var(--c-accent);
  padding-left: var(--space-3);
  margin-bottom: clamp(0.4rem, 0.8vh, 0.65rem);
  transform: rotate(-0.5deg);
}

.speero__disciplines {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

/* Speero Right Device Card */
.speero__device-card {
  border: 1px solid var(--c-rule);
  border-radius: var(--radius-lg);
  background: var(--c-white);
  box-shadow: 0 6px 24px -4px rgba(0,0,0,0.06);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.speero__device-card:hover {
  transform: translateY(-2px);
  border-color: rgba(217, 79, 44, 0.35);
  box-shadow: 0 12px 28px -4px rgba(217, 79, 44, 0.08), 0 4px 16px rgba(0,0, 0, 0.05);
}

.speero__device-frame {
  width: 100%;
  height: clamp(180px, 25vh, 240px);
  background: #FAF9F6;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--c-rule);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
}

.speero__device-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.speero__device-footer {
  margin-top: var(--space-3);
}

.speero__device-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.speero-pill {
  font-size: 10.5px;
  padding: 2px 7px;
  background: rgba(0, 0, 0, 0.03);
  border: 1px solid var(--c-rule);
  border-radius: var(--radius-sm);
  color: var(--c-ink);
  font-weight: var(--weight-medium);
}

@media (max-width: 860px) {
  .speero__split {
    grid-template-columns: 1fr;
  }
}

/* ════════════════════════════════════════════════════════════
   SCENE 14 — COCA-COLA HBC
   ════════════════════════════════════════════════════════════ */

.coca-cola__period {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-3);
  max-width: 280px;
}

.coca-cola__headline {
  font-size: var(--text-display);
  font-weight: var(--weight-bold);
  letter-spacing: var(--ls-tight);
  line-height: 1.05;
  color: var(--c-ink);
  margin-bottom: clamp(0.5rem, 1vh, 0.85rem);
  max-width: 600px;
}

.coca-cola__company {
  margin-bottom: clamp(0.5rem, 1vh, 0.85rem);
}

.coca-cola__name {
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  color: var(--c-ink);
  letter-spacing: var(--ls-tight);
  display: block;
  margin-bottom: 2px;
}

.coca-cola__context {
  font-size: var(--text-xs);
  color: var(--c-ink-muted);
  line-height: 1.45;
}

/* Coca-Cola Framing Paragraph */
.coca-cola__framing {
  font-size: clamp(0.78rem, 1vw, 0.92rem);
  color: var(--c-ink-mid);
  line-height: 1.55;
  max-width: 950px;
  margin-bottom: clamp(0.6rem, 1.2vh, 1rem);
}

/* 4-Product Quad Layout */
.cc-products--quad {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(0.5rem, 0.9vw, 0.9rem);
  width: 100%;
  margin-bottom: clamp(0.65rem, 1.2vh, 1.05rem);
}

.cc-card {
  padding: clamp(0.65rem, 1.2vh, 0.95rem) clamp(0.65rem, 1vw, 0.9rem);
  border: 1px solid var(--c-rule);
  border-radius: var(--radius-md);
  background: var(--c-white);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
  display: flex;
  flex-direction: column;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.cc-card:hover {
  transform: translateY(-2px);
  border-color: rgba(225, 29, 72, 0.38);
  box-shadow: 0 8px 24px -4px rgba(225, 29, 72, 0.09), 0 2px 8px rgba(0, 0, 0, 0.04);
}

.cc-card__top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: clamp(0.35rem, 0.7vh, 0.55rem);
}

.cc-card__num {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: var(--weight-bold);
  color: #E11D48;
  background: rgba(225, 29, 72, 0.08);
  padding: 1px 6px;
  border-radius: var(--radius-sm);
  line-height: 1.2;
}

.cc-card__type {
  font-size: 8.5px;
  font-weight: var(--weight-semibold);
  color: var(--c-ink-muted);
  letter-spacing: 0.04em;
  padding: 2px 6px;
  border: 1px solid var(--c-rule);
  border-radius: var(--radius-sm);
  background: rgba(0, 0, 0, 0.02);
}

.cc-card__title {
  font-size: clamp(0.85rem, 1.05vw, 1rem);
  font-weight: var(--weight-bold);
  color: var(--c-ink);
  letter-spacing: var(--ls-tight);
  margin-bottom: 4px;
}

.cc-card__body {
  font-size: 11px;
  color: var(--c-ink-mid);
  line-height: 1.45;
  margin: 0;
}

/* Coca-Cola Enterprise Capability Pillars */
.coca-cola__capabilities {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(0.75rem, 1.5vw, 1.5rem);
  padding: clamp(0.5rem, 1vh, 0.75rem) 0;
  border-top: 1px solid var(--c-rule);
  border-bottom: 1px solid var(--c-rule);
  margin-bottom: clamp(0.5rem, 1vh, 0.85rem);
  width: 100%;
}

.cc-cap-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
}

.cc-cap-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #E11D48;
  margin-top: 4px;
  flex-shrink: 0;
}

.cc-cap-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.cc-cap-title {
  font-size: 11px;
  font-weight: var(--weight-bold);
  color: var(--c-ink);
  letter-spacing: -0.01em;
}

.cc-cap-sub {
  font-size: 9.5px;
  color: var(--c-ink-muted);
  line-height: 1.35;
}

@media (max-width: 900px) {
  .cc-products--quad {
    grid-template-columns: repeat(2, 1fr);
  }
  .coca-cola__capabilities {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 600px) {
  .cc-products--quad {
    grid-template-columns: 1fr;
  }
}

/* ════════════════════════════════════════════════════════════
   SCENE 15 — DESIGNING AT SCALE (DE-CONTAINERIZED)
   ════════════════════════════════════════════════════════════ */

.scale__headline {
  font-size: var(--text-display);
  font-weight: var(--weight-bold);
  letter-spacing: var(--ls-tight);
  line-height: 1.1;
  color: var(--c-ink);
  margin-bottom: clamp(0.6rem, 1.2vh, 1rem);
  max-width: 700px;
}

.scale__headline em { color: var(--c-ink-mid); }

/* Scale chain */
.scale-chain {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(0.2rem, 0.4vw, 0.45rem);
  margin-bottom: clamp(0.6rem, 1.2vh, 1rem);
  width: 100%;
}

.scale-chain__node {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 2px;
  padding: clamp(0.45rem, 0.9vh, 0.65rem) clamp(0.35rem, 0.6vw, 0.6rem);
  border: 1px solid var(--c-rule);
  border-radius: var(--radius-md);
  background: var(--c-white);
  min-width: 100px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02);
  transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
}

.scale-chain__node:hover {
  transform: translateY(-2px);
  border-color: rgba(217, 79, 44, 0.4);
  box-shadow: 0 8px 18px -4px rgba(217, 79, 44, 0.1), 0 2px 6px rgba(0, 0, 0, 0.04);
}

.scale-chain__icon {
  color: var(--c-accent);
  margin-bottom: 2px;
  transition: transform 0.2s ease;
}

.scale-chain__node:hover .scale-chain__icon {
  transform: scale(1.1);
}

.scale-chain__arrow {
  color: var(--c-rule);
  font-size: 13px;
  font-weight: bold;
  padding: 0 1px;
  flex-shrink: 0;
  opacity: 0.75;
}

.scale-chain__label {
  font-size: 10px;
  font-weight: var(--weight-bold);
  letter-spacing: 0.04em;
  color: var(--c-ink);
  text-transform: uppercase;
  white-space: nowrap;
}

.scale-chain__desc {
  font-size: 8.5px;
  font-weight: var(--weight-medium);
  color: var(--c-ink-muted);
  white-space: nowrap;
}

/* De-containerized Disciplines */
.scale-disciplines {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(0.5rem, 1.2vw, 1.2rem);
  margin-bottom: clamp(0.75rem, 1.5vh, 1.25rem);
  padding: var(--space-3) 0;
  border-top: 1px solid var(--c-rule);
  border-bottom: 1px solid var(--c-rule);
}

.scale-disc {
  padding: 0;
  border: none;
  border-radius: 0;
  font-size: clamp(0.75rem, 0.9vw, 0.85rem);
  font-weight: var(--weight-medium);
  color: var(--c-ink-mid);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.scale-disc::after {
  content: '·';
  color: var(--c-accent);
  font-weight: bold;
}

.scale-disc:last-child::after {
  content: '';
}

/* De-containerized Result */
.scale-result {
  display: flex;
  align-items: baseline;
  gap: clamp(1rem, 2.5vw, 3rem);
  padding: clamp(0.5rem, 1vh, 0.85rem) 0 0 0;
  border: none;
  border-radius: 0;
  background: transparent;
}

.scale-result__metric {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
}

.scale-result__num {
  font-size: clamp(2.4rem, 4.2vw, 3.4rem);
  font-weight: var(--weight-extrabold);
  letter-spacing: var(--ls-tight);
  color: var(--c-accent);
  line-height: 1;
}

.scale-result__label {
  font-size: var(--text-xs);
  color: var(--c-ink-muted);
  margin-top: 4px;
}

.scale-result__context {
  font-size: clamp(0.85rem, 1.1vw, 0.95rem);
  color: var(--c-ink-mid);
  line-height: 1.6;
}

@media (max-width: 768px) {
  .scale-chain { justify-content: center; }
  .scale-result { flex-direction: column; align-items: flex-start; gap: var(--space-2); }
}

/* ════════════════════════════════════════════════════════════
   SCENE 16 — EVOLUTION TIMELINE
   ════════════════════════════════════════════════════════════ */

.evolution__headline {
  font-size: var(--text-display);
  font-weight: var(--weight-bold);
  letter-spacing: var(--ls-tight);
  color: var(--c-ink);
  margin-bottom: clamp(0.6rem, 1.2vh, 1rem);
}

.evo-timeline {
  display: flex;
  flex-direction: column;
  gap: 0;
  position: relative;
  max-width: 900px;
}

.evo-item {
  display: grid;
  grid-template-columns: 78px 20px 1fr;
  gap: var(--space-3);
  align-items: start;
  padding-bottom: clamp(4px, 0.8vh, 8px);
  transition: opacity var(--dur-fast) ease;
}

.evo-item:last-child { padding-bottom: 0; }

.evo-item__year {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: var(--weight-bold);
  letter-spacing: var(--ls-wide);
  color: var(--c-ink-muted);
  padding-top: 3px;
  text-align: right;
}

.evo-item__track {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}

.evo-item__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 1.5px solid var(--c-rule);
  background: var(--c-white);
  flex-shrink: 0;
  z-index: 1;
  transition: border-color var(--dur-fast), background var(--dur-fast), transform var(--dur-fast);
}

.evo-item__dot--now {
  border-color: var(--c-accent);
  background: var(--c-accent);
  width: 10px;
  height: 10px;
  box-shadow: 0 0 8px rgba(217, 79, 44, 0.45);
}

.evo-item__line {
  flex: 1;
  width: 1px;
  background: var(--c-rule);
  min-height: 18px;
}

.evo-item__content {
  padding-bottom: clamp(3px, 0.7vh, 7px);
}

.evo-item--now .evo-item__content {
  padding-bottom: 0;
}

.evo-item__header-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-bottom: 2px;
}

.evo-item__title {
  font-size: clamp(0.85rem, 1.1vw, 0.98rem);
  font-weight: var(--weight-bold);
  color: var(--c-ink);
  margin-bottom: 0;
}

.evo-item--now .evo-item__title {
  color: var(--c-ink);
  font-size: clamp(0.95rem, 1.25vw, 1.1rem);
  font-weight: var(--weight-extrabold);
}

/* Era-specific morphing badges */
.evo-badge {
  display: inline-flex;
  align-items: center;
  padding: 1px 7px;
  border-radius: var(--radius-sm);
  font-size: 10px;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.03em;
  white-space: nowrap;
}

.evo-badge--terminal {
  font-family: var(--font-mono);
  font-size: 9.5px;
  background: rgba(16, 185, 129, 0.08);
  border: 1px solid rgba(16, 185, 129, 0.35);
  color: #059669;
}

.evo-badge--structural {
  background: rgba(100, 116, 139, 0.08);
  border: 1px solid rgba(100, 116, 139, 0.3);
  color: #475569;
}

.evo-badge--code {
  font-family: var(--font-mono);
  font-size: 9.5px;
  background: rgba(2, 132, 199, 0.08);
  border: 1px solid rgba(2, 132, 199, 0.3);
  color: #0284C7;
}

.evo-badge--wireframe {
  border: 1px dashed rgba(217, 79, 44, 0.5);
  background: rgba(217, 79, 44, 0.04);
  color: var(--c-accent);
}

.evo-badge--ai {
  background: rgba(124, 58, 237, 0.08);
  border: 1px solid rgba(124, 58, 237, 0.3);
  color: #7C3AED;
}

.evo-badge--cro {
  background: rgba(217, 119, 6, 0.08);
  border: 1px solid rgba(217, 119, 6, 0.3);
  color: #D97706;
}

.evo-badge--tokens {
  background: rgba(16, 185, 129, 0.08);
  border: 1px solid rgba(16, 185, 129, 0.3);
  color: #059669;
}

.evo-badge--now {
  background: var(--c-accent);
  border: 1px solid var(--c-accent);
  color: #FFFFFF;
  font-weight: var(--weight-bold);
  box-shadow: 0 2px 8px rgba(217, 79, 44, 0.3);
}

.evo-item__subtitle {
  font-size: clamp(0.7rem, 0.85vw, 0.78rem);
  color: var(--c-ink-muted);
  line-height: 1.4;
  margin-bottom: 3px;
}

/* Mode-based bar colors */
.evo-item__bar {
  height: 2px;
  border-radius: 1px;
  width: 0;
  transition: width 0.8s var(--ease-out);
}

.evo-item[data-mode="terminal"] .evo-item__bar    { background: #10B981; }
.evo-item[data-mode="structural"] .evo-item__bar  { background: #64748B; }
.evo-item[data-mode="code"] .evo-item__bar        { background: #0284C7; }
.evo-item[data-mode="wireframe"] .evo-item__bar   { background: #D94F2C; }
.evo-item[data-mode="ai"] .evo-item__bar          { background: #7C3AED; }
.evo-item[data-mode="cro"] .evo-item__bar         { background: #D97706; }
.evo-item[data-mode="tokens"] .evo-item__bar      { background: #10B981; }
.evo-item[data-mode="convergent"] .evo-item__bar  { background: var(--c-accent); }

.evo-item:hover .evo-item__dot {
  border-color: var(--c-accent);
  background: var(--c-accent);
  transform: scale(1.2);
}

/* ════════════════════════════════════════════════════════════
   SCENE 17 — WHAT CHANGED
   ════════════════════════════════════════════════════════════ */

.changed__headline {
  font-size: var(--text-display);
  font-weight: var(--weight-bold);
  letter-spacing: var(--ls-tight);
  color: var(--c-light-text);
  margin-bottom: clamp(0.75rem, 1.5vh, 1.25rem);
}

.question-chain {
  display: flex;
  flex-direction: column;
  gap: 0;
  max-width: 780px;
}

.q-stage {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: var(--space-4);
  align-items: baseline;
  padding: clamp(6px, 1.1vh, 12px) 0;
  border-bottom: 1px solid rgba(242, 241, 238, 0.08);
  opacity: 0.35;
  transition: opacity var(--dur-base) ease, transform var(--dur-base) ease;
}

.q-stage:hover,
.q-stage.is-active {
  opacity: 1;
}

.q-stage--final {
  opacity: 1;
  border-bottom: none;
  padding-top: clamp(8px, 1.3vh, 14px);
}

.q-stage__year {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: var(--weight-bold);
  letter-spacing: 0.05em;
  color: rgba(242, 241, 238, 0.45);
}

.q-stage__text {
  font-size: clamp(1.15rem, 1.6vw, 1.45rem);
  font-family: var(--font-hand);
  font-weight: 600;
  color: rgba(242, 241, 238, 0.85);
  line-height: 1.35;
}

.q-stage--final .q-stage__text {
  font-size: clamp(1.35rem, 1.9vw, 1.7rem);
  font-weight: 700;
  color: var(--c-light-text);
  transform: rotate(-0.6deg);
  display: inline-block;
}

/* ════════════════════════════════════════════════════════════
   SCENE 18 — NOW (EXPANSIVE EDITORIAL MANIFESTO)
   ════════════════════════════════════════════════════════════ */

.scene--now .scene__inner {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  max-width: 1120px;
}

.now__content {
  width: 100%;
  display: flex;
  flex-direction: column;
}

.now__header {
  margin-bottom: clamp(1rem, 2.2vh, 1.8rem);
}

.now__headline {
  font-size: clamp(1.75rem, 3.2vw, 2.75rem);
  font-weight: var(--weight-bold);
  letter-spacing: var(--ls-tight);
  line-height: 1.15;
  color: var(--c-light-text);
  margin-bottom: clamp(0.35rem, 0.8vh, 0.6rem);
}

.now__headline em {
  color: var(--c-accent-light);
  font-style: normal;
}

.now__subtext {
  font-size: clamp(0.85rem, 1.1vw, 1rem);
  color: rgba(242, 241, 238, 0.65);
  line-height: 1.5;
  max-width: 780px;
}

.now__elements {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(0.75rem, 1.4vw, 1.25rem);
  margin-bottom: clamp(1rem, 2.2vh, 1.8rem);
  width: 100%;
}

.now__el {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--c-rule-dark);
  border-radius: var(--radius-md);
  padding: clamp(0.85rem, 1.6vh, 1.25rem) clamp(0.85rem, 1.4vw, 1.25rem);
  display: flex;
  flex-direction: column;
  transition: border-color var(--dur-fast) ease, background var(--dur-fast) ease, transform var(--dur-fast) ease;
  position: relative;
}

.now__el:hover {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(242, 241, 238, 0.25);
  transform: translateY(-2px);
}

.now__el-num {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: var(--weight-bold);
  color: var(--c-accent-light);
  letter-spacing: 0.1em;
  margin-bottom: 4px;
}

.now__el-name {
  font-size: clamp(0.95rem, 1.25vw, 1.15rem);
  font-weight: var(--weight-bold);
  color: var(--c-light-text);
  margin-bottom: 4px;
}

.now__el-desc {
  font-size: clamp(0.75rem, 0.95vw, 0.85rem);
  color: rgba(242, 241, 238, 0.55);
  line-height: 1.45;
}

.now__el--ai {
  background: rgba(217, 79, 44, 0.05);
  border-color: rgba(217, 79, 44, 0.3);
}

.now__el--ai:hover {
  border-color: var(--c-accent-light);
  box-shadow: 0 0 20px rgba(217, 79, 44, 0.15);
}

.now__el--ai .now__el-name {
  color: var(--c-accent-light);
}

.now__manifesto {
  border-left: 2px solid var(--c-accent-light);
  padding: clamp(0.4rem, 0.9vh, 0.7rem) 0 clamp(0.4rem, 0.9vh, 0.7rem) clamp(0.85rem, 1.5vw, 1.4rem);
  background: linear-gradient(90deg, rgba(217, 79, 44, 0.08) 0%, transparent 100%);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  width: 100%;
}

.now__manifesto-quote {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(0.95rem, 1.3vw, 1.18rem);
  color: rgba(242, 241, 238, 0.9);
  line-height: 1.45;
}

@media (max-width: 860px) {
  .now__elements {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 540px) {
  .now__elements {
    grid-template-columns: 1fr;
  }
}

/* ════════════════════════════════════════════════════════════
   SCENE 19 — NEXT (OPTICALLY WEIGHTED CONCENTRIC CONVERGENCE)
   ════════════════════════════════════════════════════════════ */

.next__question {
  font-size: var(--text-display);
  font-weight: var(--weight-bold);
  letter-spacing: var(--ls-tight);
  line-height: 1.1;
  color: var(--c-light-text);
  margin-bottom: clamp(0.6rem, 1.3vh, 1.1rem);
  max-width: 720px;
}

.next__question em {
  color: rgba(242, 241, 238, 0.5);
  font-style: italic;
  font-family: var(--font-display);
}

/* Concentric Ecosystem Field (~340px Optical Weight) */
.ecosystem-field {
  position: relative;
  width: clamp(260px, 34vh, 340px);
  height: clamp(260px, 34vh, 340px);
  margin: 0 auto clamp(0.6rem, 1.4vh, 1.2rem);
}

.ecosystem-rings {
  position: absolute;
  inset: 0;
}

.eco-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transform-origin: center center;
  border-radius: 50%;
  pointer-events: none;
  box-sizing: border-box;
}

.eco-ring--3 {
  width: 100%;
  height: 100%;
  border: 1px solid rgba(242, 241, 238, 0.12);
  animation: ring-rotate 35s linear infinite;
}

.eco-ring--2 {
  width: 72%;
  height: 72%;
  border: 1px dashed rgba(217, 79, 44, 0.35);
  animation: ring-rotate 22s linear infinite reverse;
}

.eco-ring--1 {
  width: 44%;
  height: 44%;
  border: 1px solid rgba(242, 241, 238, 0.2);
  animation: ring-rotate 14s linear infinite;
}

.eco-center-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(217, 79, 44, 0.35) 0%, transparent 70%);
  pointer-events: none;
}

.eco-center-core {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: #141413;
  border: 1.5px solid rgba(217, 79, 44, 0.65);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 20px rgba(217, 79, 44, 0.25);
  z-index: 2;
}

.eco-core-title {
  font-family: var(--font-mono);
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--c-accent-light);
  text-transform: uppercase;
}

/* 4 Planetary Convergence Nodes — Symmetrically positioned on outer orbital rim */
.eco-planet {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: rgba(20, 20, 19, 0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(242, 241, 238, 0.2);
  border-radius: var(--radius-full);
  z-index: 3;
  transition: border-color var(--dur-fast) ease, transform var(--dur-fast) ease, box-shadow var(--dur-fast) ease;
  cursor: default;
  white-space: nowrap;
}

.eco-planet:hover {
  border-color: var(--c-accent-light);
  box-shadow: 0 0 16px rgba(217, 79, 44, 0.3);
}

.eco-planet--human    { top: 0%; left: 50%; transform: translate(-50%, -50%); }
.eco-planet--human:hover { transform: translate(-50%, -50%) scale(1.08); }

.eco-planet--ai       { top: 50%; left: 100%; transform: translate(-50%, -50%); }
.eco-planet--ai:hover { transform: translate(-50%, -50%) scale(1.08); }

.eco-planet--product  { top: 100%; left: 50%; transform: translate(-50%, -50%); }
.eco-planet--product:hover { transform: translate(-50%, -50%) scale(1.08); }

.eco-planet--business { top: 50%; left: 0%; transform: translate(-50%, -50%); }
.eco-planet--business:hover { transform: translate(-50%, -50%) scale(1.08); }

.planet-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--c-accent);
  flex-shrink: 0;
  box-shadow: 0 0 6px var(--c-accent);
}

.planet-label {
  font-size: 11px;
  font-weight: var(--weight-bold);
  letter-spacing: 0.05em;
  color: var(--c-light-text);
  text-transform: uppercase;
}

/* Themes */
.next__themes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-2);
  margin-bottom: clamp(0.6rem, 1.3vh, 1rem);
  max-width: 820px;
}

.next__theme {
  padding: clamp(0.35rem, 0.8vh, 0.6rem) clamp(0.5rem, 1vw, 0.85rem);
  border: 1px solid var(--c-rule-dark);
  border-radius: var(--radius-md);
  font-size: var(--text-xs);
  color: rgba(242, 241, 238, 0.65);
  transition: border-color var(--dur-fast), color var(--dur-fast);
  text-align: center;
}

.next__theme:hover {
  border-color: rgba(217, 79, 44, 0.35);
  color: rgba(242, 241, 238, 0.9);
}

/* Statement */
.next__statement {
  max-width: 700px;
}

.next__line-1 {
  font-size: clamp(0.95rem, 1.3vw, 1.15rem);
  color: rgba(242, 241, 238, 0.55);
  margin-bottom: 2px;
  line-height: 1.45;
}

.next__line-2 {
  font-size: clamp(1rem, 1.4vw, 1.25rem);
  color: var(--c-light-text);
  line-height: 1.45;
  font-weight: var(--weight-medium);
}

@media (max-width: 768px) {
  .next__themes { grid-template-columns: 1fr 1fr; }
  .ecosystem-field { width: 240px; height: 240px; }
  .eco-planet--ai { left: 98%; }
  .eco-planet--business { left: 2%; }
}

/* ════════════════════════════════════════════════════════════
   SCENE 20 — FINAL (TYPOGRAPHIC DEPTH & VERTICAL RHYTHM)
   ════════════════════════════════════════════════════════════ */

.scene--final {
  justify-content: center;
}

.scene--final .scene__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 820px;
}

.final__identity {
  margin-bottom: clamp(1.2rem, 2.5vh, 2rem);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.final__name {
  font-size: clamp(2.4rem, 5.2vw, 4.4rem);
  font-weight: var(--weight-extrabold);
  letter-spacing: -0.03em;
  color: var(--c-light-text);
  line-height: 0.98;
  margin-bottom: clamp(0.35rem, 0.8vh, 0.5rem);
}

.final__title {
  font-size: clamp(1.05rem, 1.6vw, 1.3rem);
  font-weight: var(--weight-medium);
  letter-spacing: var(--ls-wide);
  color: rgba(242, 241, 238, 0.75);
  margin-bottom: clamp(0.6rem, 1.2vh, 0.9rem);
}

.final__tags {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: clamp(0.8rem, 1.5vh, 1.2rem);
  flex-wrap: wrap;
}

.final__tag {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--c-accent-light);
  background: rgba(217, 79, 44, 0.08);
  border: 1px solid rgba(217, 79, 44, 0.25);
  padding: 3px 10px;
  border-radius: var(--radius-full);
}

.final__tag-sep {
  color: rgba(242, 241, 238, 0.3);
  font-size: 11px;
}

.final__divider {
  width: 48px;
  height: 1px;
  background: var(--c-accent-light);
  opacity: 0.4;
  margin: 0 auto;
}

/* Distinct Vertical Hierarchy for Closing Lines */
.final__closing {
  margin-bottom: clamp(1.25rem, 2.8vh, 2.25rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(0.45rem, 0.9vh, 0.75rem);
}

.final__line {
  margin: 0;
  padding: 0;
}

.final__line--lead {
  font-size: clamp(1.2rem, 2vw, 1.6rem);
  font-weight: var(--weight-bold);
  color: var(--c-light-text);
  line-height: 1.25;
  letter-spacing: var(--ls-tight);
}

.final__line--sub {
  font-size: clamp(0.88rem, 1.2vw, 1.05rem);
  font-family: var(--font-mono);
  color: rgba(242, 241, 238, 0.6);
  letter-spacing: 0.02em;
  line-height: 1.4;
}

.final__line--accent {
  font-size: clamp(1.05rem, 1.5vw, 1.3rem);
  font-style: italic;
  font-weight: var(--weight-medium);
  color: var(--c-accent-light);
  line-height: 1.4;
  margin-top: 2px;
}

/* Contact links */
.final__contact {
  display: flex;
  gap: clamp(0.75rem, 2vw, 1.5rem);
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: clamp(0.85rem, 1.8vh, 1.5rem);
}

.final__contact-link {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  letter-spacing: var(--ls-wide);
  color: rgba(242, 241, 238, 0.7);
  border-bottom: 1px solid rgba(242, 241, 238, 0.2);
  padding-bottom: 2px;
  transition: color var(--dur-fast), border-color var(--dur-fast);
}

.final__contact-link:hover {
  color: var(--c-light-text);
  border-color: var(--c-accent);
}

.final__contact-arrow {
  color: var(--c-accent);
  opacity: 0.7;
  transition: opacity var(--dur-fast), transform var(--dur-fast);
}

.final__contact-link:hover .final__contact-arrow {
  opacity: 1;
  transform: translate(2px, -2px);
}

/* Replay Presentation Action */
.final__actions {
  margin-top: clamp(1rem, 2.5vh, 2rem);
}

.final__replay-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 8px 20px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--radius-full);
  color: var(--c-light-mid);
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--ls-wide);
  cursor: pointer;
  transition: all var(--dur-fast) var(--ease-out);
}

.final__replay-btn:hover {
  background: var(--c-accent);
  border-color: var(--c-accent);
  color: #FFFFFF;
  transform: translateY(-2px);
  box-shadow: 0 4px 18px rgba(217, 79, 44, 0.4);
}

.final__replay-btn svg {
  transition: transform 0.4s ease;
}

.final__replay-btn:hover svg {
  transform: rotate(-180deg);
}

/* ════════════════════════════════════════════════════════════
   PRESENTATION ASSET & BRAND STYLES (100vh Fitting)
   ════════════════════════════════════════════════════════════ */

/* Company & Case Study Brand Rows */
.company-card__brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-2);
}

.company-logo {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  object-fit: contain;
  background: var(--c-white);
  padding: 3px;
  border: 1px solid var(--c-rule);
  flex-shrink: 0;
  box-shadow: var(--shadow-sm);
}

.case-study__brand {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.case-study__logo {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
  object-fit: contain;
  background: var(--c-white);
  padding: 4px;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--c-rule);
  flex-shrink: 0;
}

.ai-company-header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-2);
}

.ai-company-logo {
  height: 32px;
  width: auto;
  border-radius: var(--radius-sm);
  background: #ffffff;
  padding: 3px 8px;
  object-fit: contain;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.speero__brand {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.speero__brand-logo {
  height: 32px;
  width: auto;
  flex-shrink: 0;
}

.coca-cola__brand-header {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}

.cc-brand-logo {
  height: 38px;
  width: auto;
  flex-shrink: 0;
}

.cc-card__header-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.cc-card__icon {
  width: 20px;
  height: 20px;
  border-radius: 3px;
  object-fit: cover;
  flex-shrink: 0;
}




/* Compact Overrides to guarantee 100vh fit across slides */
.company-card {
  padding: var(--space-4) var(--space-5);
}

.company-card__body {
  font-size: var(--text-xs);
  line-height: var(--lh-normal);
  margin-bottom: var(--space-3);
}

.process-step {
  padding: var(--space-3) var(--space-4);
}

.process-step__title {
  font-size: var(--text-sm);
  margin-bottom: var(--space-1);
}

.process-step__list {
  font-size: var(--text-xs);
}

.ai-card {
  padding: var(--space-4) var(--space-5);
}

.ai-card__body {
  font-size: var(--text-xs);
  line-height: var(--lh-normal);
}

.cc-card {
  padding: var(--space-4) var(--space-5);
}

.cc-card__body {
  font-size: var(--text-xs);
  line-height: var(--lh-normal);
}

.speero__story-body {
  font-size: var(--text-sm);
  line-height: var(--lh-normal);
  margin-bottom: var(--space-3);
}

.scale-disciplines {
  margin-bottom: var(--space-4);
}


.next__statement {
  margin-top: var(--space-4);
}

/* ════════════════════════════════════════════════════════════
   CINEMATIC AMBIENT GLOWS & GLASS REFLECTIONS
   ════════════════════════════════════════════════════════════ */

/* Ambient Radial Glow Overlays */
.ambient-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  pointer-events: none;
  z-index: var(--z-glow);
  mix-blend-mode: screen;
}

.ambient-glow--accent {
  width: clamp(280px, 45vw, 620px);
  height: clamp(280px, 45vw, 620px);
  background: radial-gradient(circle, var(--glow-accent) 0%, transparent 70%);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.ambient-glow--warm {
  width: clamp(320px, 50vw, 700px);
  height: clamp(320px, 50vw, 700px);
  background: radial-gradient(circle, var(--glow-amber) 0%, transparent 70%);
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.ambient-glow--cyan {
  width: clamp(280px, 42vw, 560px);
  height: clamp(280px, 42vw, 560px);
  background: radial-gradient(circle, var(--glow-cyan) 0%, transparent 70%);
  top: 52%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* Live Energy Stream on Human-in-the-Loop Pipeline */
.pipeline__arrow-line {
  position: relative;
  overflow: hidden;
}

.pipeline__arrow-line::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, var(--c-accent), transparent);
  animation: energy-pulse 2.2s infinite cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes energy-pulse {
  0% { left: -100%; opacity: 0; }
  50% { opacity: 1; }
  100% { left: 100%; opacity: 0; }
}

/* Glassmorphism Card Depth & Specular Border Highlights */
.scene--dark .ai-card,
.scene--dark .company-card {
  background: var(--glass-bg-dark);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-border-dark);
  box-shadow: 0 14px 36px -4px rgba(0, 0, 0, 0.4);
}

.scene--light .company-card,
.scene--light .cc-card,
.scene--light .process-step {
  background: var(--glass-bg-light);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-border-light);
  box-shadow: 0 8px 24px -4px rgba(0, 0, 0, 0.06);
}

/* Interactive UX Chain Step Hover */
.ux-chain__item {
  cursor: default;
  transition: transform var(--dur-fast) var(--ease-out), background-color var(--dur-fast);
}

.ux-chain__item:hover {
  transform: translateY(-2px);
  background-color: var(--c-bg-alt);
}

.ux-chain__item:hover .ux-chain__marker {
  background-color: var(--c-ink);
  transform: scale(1.3);
}

/* 3D Perspective Tilt on Interactive Cards */
.tilt-card {
  transform-style: preserve-3d;
  will-change: transform;
}

/* Light Scene Card Hover & Elevation Physics */
.scene--light .company-card,
.scene--light .cc-card,
.scene--light .process-step,
.scene--light .service__card,
.scene--light .engineer__arch-card,
.scene--light .showcase-card,
.scene--light .hangouts__pillar,
.scene--light .hangouts__blueprint-card,
.scene--light .hangouts__store-card,
.scene--light .speero__flow-card,
.scene--light .speero__device-card {
  transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.28s cubic-bezier(0.22, 1, 0.36, 1),
              border-color 0.25s ease,
              background-color 0.25s ease;
}

.scene--light .company-card:hover,
.scene--light .cc-card:hover,
.scene--light .process-step:hover,
.scene--light .service__card:hover,
.scene--light .engineer__arch-card:hover,
.scene--light .showcase-card:hover,
.scene--light .hangouts__pillar:hover,
.scene--light .hangouts__blueprint-card:hover,
.scene--light .hangouts__store-card:hover,
.scene--light .speero__flow-card:hover,
.scene--light .speero__device-card:hover {
  transform: translateY(-3px);
  border-color: rgba(217, 79, 44, 0.38);
  box-shadow: 0 12px 30px -4px rgba(217, 79, 44, 0.09), 0 4px 16px rgba(0, 0, 0, 0.05);
}