/* Murmur · photo + Liquid Glass reference layer. Loaded last. */

:root {
  --liquid-surface:
    linear-gradient(112deg, rgba(255, 255, 255, 0.42), rgba(236, 233, 225, 0.52) 40%, rgba(214, 211, 204, 0.38)),
    rgba(239, 237, 231, 0.48);
  --liquid-border: rgba(255, 255, 255, 0.78);
  --liquid-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.98),
    inset 0 -1px 0 rgba(0, 0, 0, 0.14),
    inset 1px 0 0 rgba(255, 255, 255, 0.55),
    0 36px 90px -32px rgba(0, 0, 0, 0.48);
  --liquid-blur: blur(26px) saturate(1.24) contrast(1.02);
  --liquid-radius: clamp(32px, 3vw, 48px);
}

.hero__world,
.shift-scene__media,
.who__portrait-media,
.phero__system,
.room__visual,
.ahero__visual,
.reader-media,
.future-media {
  border-radius: 0;
  background-color: #171716;
}

.hero__world-media img,
.shift-scene__media img,
.who__portrait img,
.phero__world-media img,
.room__visual > img,
.ahero__visual img,
.future-media img {
  filter: none;
  transform: none;
}

.hero__world-media::after,
.shift-scene__media::after,
.who__portrait-media::after,
.phero__world-media::after,
.room__visual::after,
.ahero__visual picture::after,
.future-media picture::after {
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.02), transparent 54%, rgba(0, 0, 0, 0.13)),
    linear-gradient(90deg, rgba(0, 0, 0, 0.08), transparent 24%, transparent 76%, rgba(0, 0, 0, 0.05));
}

.hero-context,
.shift-brief,
.who-audience,
.phero__instrument,
.room-proof,
.agentic-card,
.future-close {
  border: 1px solid var(--liquid-border);
  border-radius: var(--liquid-radius);
  background: var(--liquid-surface);
  box-shadow: var(--liquid-shadow);
  backdrop-filter: var(--liquid-blur);
  -webkit-backdrop-filter: var(--liquid-blur);
}

.hero-context::before,
.shift-brief::before,
.phero__instrument::before,
.room-proof::before,
.agentic-card::before {
  background:
    radial-gradient(circle at 16% -8%, rgba(255, 255, 255, 0.82), transparent 29%),
    radial-gradient(circle at 72% 112%, rgba(177, 151, 112, 0.22), transparent 36%),
    linear-gradient(118deg, rgba(255, 255, 255, 0.28), transparent 42%, rgba(67, 61, 53, 0.05));
}

.hero-context::after,
.shift-brief::after,
.phero__instrument::after,
.room-proof::after,
.agentic-card::after {
  border-radius: calc(var(--liquid-radius) - 1px);
}

/* Home */

.hero__world {
  aspect-ratio: 16 / 9;
  min-height: 620px;
}

.hero__world::before,
.hero__world::after {
  display: none;
}

.hero__world-media {
  display: block;
}

.hero-context {
  top: 50%;
  right: auto;
  left: 6%;
  width: min(920px, 74%);
  min-height: 70%;
  padding: clamp(34px, 4.1vw, 58px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transform: translateY(-50%);
}

.hero-context__title {
  max-width: 16ch;
  margin-top: clamp(40px, 5vw, 70px);
  font-size: clamp(34px, 3.7vw, 52px);
}

.hero-context__truths {
  margin-top: clamp(32px, 4vw, 52px);
}

.hero-context__truths li {
  min-height: 62px;
}

.hero-context__truths b {
  font-size: clamp(14px, 1.25vw, 18px);
}

.shift-scene {
  margin-top: clamp(64px, 7vw, 96px);
  padding: 0;
  border: 0;
  background: transparent;
}

.shift-brief {
  left: 6%;
  width: min(920px, 72%);
  min-height: 58%;
  padding: clamp(34px, 4vw, 56px);
}

.shift-brief__selection {
  background: rgba(255, 255, 255, 0.34);
  backdrop-filter: blur(14px) saturate(1.15);
  -webkit-backdrop-filter: blur(14px) saturate(1.15);
}

.who__portrait {
  padding: 0;
  border: 0;
  background: transparent;
}

.who__portrait-media {
  aspect-ratio: 16 / 9;
}

.who-audience {
  top: 9%;
  right: 5%;
  bottom: auto;
  left: auto;
  width: min(650px, 52%);
  min-height: 82%;
  display: flex;
  flex-direction: column;
}

.who-audience > header {
  min-height: 72px;
  padding-inline: clamp(24px, 3vw, 38px);
}

.who__list {
  flex: 1;
  grid-template-columns: 1fr;
  padding: 14px;
}

.who__list li,
.who__list li:first-child {
  min-height: 0;
  padding: 22px 26px 22px 70px;
  border: 1px solid rgba(255, 255, 255, 0.52);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.22);
}

.who__list li + li {
  margin-top: 10px;
}

/* Product */

.phero__system {
  aspect-ratio: 16 / 9;
  min-height: 620px;
  padding: clamp(40px, 5vw, 72px);
  background: #171716;
}

.phero__system::before,
.phero__system::after {
  display: none;
}

.phero__instrument {
  width: min(1060px, 78%);
  min-height: 74%;
}

.phero__instrument-head {
  min-height: clamp(76px, 8vw, 96px);
}

.phero__instrument-body {
  min-height: 0;
  padding: clamp(24px, 3vw, 42px);
}

.phero__step,
.phero__timeline > li.is-delivered .phero__step {
  background: rgba(255, 255, 255, 0.22);
  border-color: rgba(255, 255, 255, 0.55);
}

.room__visual {
  aspect-ratio: 16 / 9;
}

.room__visual > img {
  height: 100%;
}

.room-proof {
  top: 50%;
  right: 5%;
  bottom: auto;
  width: min(760px, 58%);
  min-height: 68%;
  padding: clamp(32px, 3.5vw, 48px);
  transform: translateY(-50%);
}

/* Agentic Web */

.ahero__visual,
.future-media {
  aspect-ratio: 16 / 9;
}

.agentic-card {
  width: min(900px, 70%);
  min-height: 62%;
  margin: 0 0 0 6%;
  padding: clamp(34px, 4vw, 54px);
  justify-self: start;
}

.agentic-card__title {
  max-width: 19ch;
  font-size: clamp(34px, 3.6vw, 50px);
}

.reader-media {
  aspect-ratio: 16 / 9;
  padding: 6%;
  overflow: hidden;
  display: grid;
  place-items: center;
  background:
    linear-gradient(rgba(0, 0, 0, 0.02), rgba(0, 0, 0, 0.12));
}

.reader-media picture {
  width: 86%;
  max-height: 88%;
  overflow: hidden;
  border: 1px solid var(--liquid-border);
  border-radius: var(--liquid-radius);
  box-shadow: var(--liquid-shadow);
  opacity: 0.94;
}

.reader-media picture,
.reader-media img {
  display: block;
}

.future-close {
  align-self: center;
  width: min(960px, 70%);
  min-height: 58%;
  margin: 0 0 0 6%;
  padding: clamp(34px, 4vw, 54px);
  align-content: center;
}

.future-close b {
  grid-column: 4 / 12;
  font-size: clamp(30px, 3.2vw, 46px);
}

.future-close span:last-child {
  grid-column: 4 / 12;
}

/* ============================================================
   UI illustrations · Apple Liquid Glass reference system
   This visual rule intentionally overrides the editorial styling
   whenever an interface is not staged over a real photograph.
   ============================================================ */

:root {
  --ui-canvas:
    radial-gradient(ellipse at 52% 18%, rgba(255, 255, 255, 0.98) 0%, rgba(255, 255, 255, 0.52) 29%, transparent 55%),
    radial-gradient(circle at 14% 86%, rgba(255, 255, 255, 0.46), transparent 34%),
    linear-gradient(145deg, #c9cccf 0%, #eef0f1 48%, #d5d7d9 72%, #c4c7c9 100%);
  --ui-glass:
    linear-gradient(122deg, rgba(255, 255, 255, 0.72), rgba(245, 246, 246, 0.47) 44%, rgba(218, 221, 222, 0.42)),
    rgba(244, 245, 245, 0.52);
  --ui-glass-strong:
    linear-gradient(125deg, rgba(255, 255, 255, 0.88), rgba(245, 246, 246, 0.66) 48%, rgba(223, 225, 226, 0.58)),
    rgba(247, 247, 247, 0.66);
  --ui-glass-soft:
    linear-gradient(118deg, rgba(255, 255, 255, 0.48), rgba(230, 232, 233, 0.34)),
    rgba(237, 238, 238, 0.32);
  --ui-rim: rgba(255, 255, 255, 0.92);
  --ui-hairline: rgba(18, 20, 22, 0.16);
  --ui-glass-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 1),
    inset 0 -1px 0 rgba(11, 13, 15, 0.22),
    inset 1px 0 0 rgba(255, 255, 255, 0.64),
    inset -1px 0 0 rgba(33, 35, 37, 0.08),
    0 34px 72px -38px rgba(22, 25, 27, 0.5);
  --ui-glass-shadow-soft:
    inset 0 1px 0 rgba(255, 255, 255, 0.94),
    inset 0 -1px 0 rgba(17, 19, 21, 0.12),
    0 18px 36px -26px rgba(22, 25, 27, 0.36);
  --ui-canvas-radius: clamp(34px, 3.5vw, 52px);
  --ui-panel-radius: clamp(28px, 2.8vw, 42px);
  --ui-control-radius: clamp(16px, 1.7vw, 24px);
}

.stage,
.compare,
.kpis__system,
.sits-map,
.control-flow,
.day-loop,
.contrast {
  border: 1px solid var(--ui-rim);
  border-radius: var(--ui-canvas-radius);
  background: var(--ui-canvas);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 1),
    inset 0 -1px 0 rgba(15, 18, 20, 0.16),
    0 42px 96px -56px rgba(19, 22, 24, 0.54);
  outline: 1px solid rgba(18, 20, 22, 0.14);
  outline-offset: -1px;
}

.gap-evidence__head,
.gap-evidence__market article,
.gap-evidence__turn,
.gap-evidence__response {
  border-color: rgba(18, 20, 22, 0.1);
}

.stage {
  padding: clamp(12px, 1.6vw, 20px);
  overflow: hidden;
}

.stage__toggle {
  border: 1px solid rgba(255, 255, 255, 0.88);
  background: rgba(219, 222, 224, 0.46);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.96),
    inset 0 -1px 0 rgba(16, 18, 20, 0.14),
    0 12px 24px -20px rgba(18, 20, 22, 0.38);
  backdrop-filter: blur(18px) saturate(1.15);
  -webkit-backdrop-filter: blur(18px) saturate(1.15);
}

.stage__toggle button[aria-pressed="true"] {
  background: #050505;
  color: #fff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    0 8px 16px -10px rgba(0, 0, 0, 0.7);
}

.stage__grid,
.sits-map__architecture {
  border: 1px solid var(--ui-rim);
  border-radius: var(--ui-panel-radius);
  background: var(--ui-glass);
  box-shadow: var(--ui-glass-shadow);
  outline: 1px solid var(--ui-hairline);
  outline-offset: -1px;
  backdrop-filter: blur(34px) saturate(1.1);
  -webkit-backdrop-filter: blur(34px) saturate(1.1);
}

.chat,
.panel,
.sits-map__source,
.sits-map__result,
.sits-map__gateway--murmur,
.sits-map__format,
.control-flow > li,
.day-loop li,
.contrast__col,
.kpis li,
.kpis__rail {
  border: 1px solid rgba(255, 255, 255, 0.9);
  background: var(--ui-glass-strong);
  box-shadow: var(--ui-glass-shadow-soft);
  outline: 1px solid rgba(17, 19, 21, 0.1);
  outline-offset: -1px;
  backdrop-filter: blur(24px) saturate(1.08);
  -webkit-backdrop-filter: blur(24px) saturate(1.08);
}

.chat,
.panel {
  border-radius: var(--ui-control-radius);
}

.chat__prompt,
.panel__row--tint dd,
.sits-map__format span,
.control-artifact--sources span,
.control-artifact--rules span,
.control-artifact--approval,
.kpis__legend span:last-child {
  border: 1px solid rgba(255, 255, 255, 0.68);
  background: var(--ui-glass-soft);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.78),
    inset 0 -1px 0 rgba(17, 19, 21, 0.08);
}

.panel {
  opacity: 0.62;
  filter: saturate(0.35);
}

[data-state="with"] .panel {
  opacity: 1;
  filter: none;
}

.compare {
  padding-inline: clamp(22px, 3vw, 44px);
}

.compare::before {
  inset: 0 0 0 51%;
  background:
    radial-gradient(circle at 70% 18%, rgba(255, 255, 255, 0.68), transparent 43%),
    linear-gradient(110deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.46));
}

.compare__gain {
  padding: clamp(18px, 2vw, 28px);
  border: 1px solid rgba(255, 255, 255, 0.82);
  border-radius: var(--ui-control-radius);
  background: var(--ui-glass-soft);
  box-shadow: var(--ui-glass-shadow-soft);
}

.compare__gain::before {
  display: none;
}

.kpis__system {
  padding: clamp(12px, 1.5vw, 18px);
}

.kpis li {
  border-radius: var(--ui-control-radius);
}

.kpis li.is-signature,
.kpis__legend span:last-child {
  border-color: rgba(0, 0, 0, 0.92);
  background: #050505;
  color: #fff;
}

.kpis__rail {
  border-radius: var(--ui-control-radius);
}

.sits-map {
  padding: clamp(42px, 6vw, 76px);
}

.sits-map__architecture {
  overflow: hidden;
}

.sits-map__gateway--murmur {
  border-radius: var(--ui-panel-radius);
  background: var(--ui-glass-strong);
  box-shadow: var(--ui-glass-shadow);
}

.sits-map__gateway--murmur::before {
  height: 1px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.96), rgba(18, 20, 22, 0.14));
}

.sits-map__format span:first-child {
  border-color: #050505;
  background: #050505;
  color: #fff;
}

.control-flow {
  padding: clamp(36px, 5vw, 64px);
}

.control-flow > li {
  border-radius: var(--ui-panel-radius);
}

.control-flow > li:last-child {
  border-color: rgba(255, 255, 255, 0.94);
  background: var(--ui-glass-strong);
  color: var(--black);
  box-shadow: var(--ui-glass-shadow);
}

.control-flow > li:last-child::after,
.control-artifact--approval i {
  border-color: #050505;
  background: #050505;
}

.control-flow > li:last-child h3::before,
.control-artifact--approval span {
  color: #050505;
}

.control-artifact--approval {
  border-radius: var(--ui-control-radius);
}

.day-loop {
  border-radius: var(--ui-canvas-radius);
}

.day-loop ol::before {
  border-color: rgba(18, 20, 22, 0.18);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.88),
    0 18px 40px -30px rgba(18, 20, 22, 0.38);
}

.day-loop li {
  border-radius: var(--ui-control-radius);
}

.day-loop li:nth-child(4) {
  border-color: #050505;
  background: #050505;
  color: #fff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    0 22px 40px -24px rgba(0, 0, 0, 0.58);
}

.day-loop li:nth-child(4)::before {
  color: rgba(255, 255, 255, 0.62);
}

.day-loop li:nth-child(4)::after {
  background: #fff;
}

.contrast {
  padding: clamp(28px, 4.5vw, 64px);
}

.contrast__col {
  border-radius: var(--ui-panel-radius);
}

.contrast__col--agents {
  background: var(--ui-glass-strong);
  box-shadow: var(--ui-glass-shadow);
}

.contrast__col--agents > h3 {
  display: inline-flex;
  width: fit-content;
  min-height: 0;
  padding: 12px 18px;
  border: 1px solid #050505;
  border-radius: 999px;
  background: #050505;
  color: #fff;
}

/* The readiness proof lives on black, so it uses smoked glass rather than
   the pearl canvas while preserving the same Apple optical construction. */

.readiness {
  padding: clamp(14px, 1.8vw, 22px);
  gap: clamp(10px, 1.2vw, 16px);
  border: 1px solid rgba(255, 255, 255, 0.34);
  border-radius: var(--ui-canvas-radius);
  background:
    radial-gradient(circle at 78% 4%, rgba(255, 255, 255, 0.15), transparent 38%),
    linear-gradient(125deg, rgba(255, 255, 255, 0.11), rgba(255, 255, 255, 0.035)),
    rgba(8, 8, 8, 0.64);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.42),
    inset 0 -1px 0 rgba(0, 0, 0, 0.78),
    0 36px 80px -42px rgba(0, 0, 0, 0.9);
  backdrop-filter: blur(30px) saturate(1.08);
  -webkit-backdrop-filter: blur(30px) saturate(1.08);
}

.readiness::after {
  display: none;
}

.readiness > li,
.readiness > li:first-child,
.readiness > li:last-child {
  min-height: 300px;
  padding: clamp(26px, 3vw, 40px);
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: var(--ui-panel-radius);
  background:
    linear-gradient(125deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.045)),
    rgba(255, 255, 255, 0.025);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.34),
    inset 0 -1px 0 rgba(0, 0, 0, 0.48),
    0 20px 42px -30px rgba(0, 0, 0, 0.88);
}

.readiness > li:nth-child(2) {
  background:
    linear-gradient(125deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.065)),
    rgba(255, 255, 255, 0.04);
}

@media (max-width: 720px) {
  :root {
    --liquid-radius: 30px;
    --ui-canvas-radius: 28px;
    --ui-panel-radius: 24px;
    --ui-control-radius: 17px;
  }

  .stage,
  .compare,
  .kpis__system,
  .sits-map,
  .control-flow,
  .contrast {
    padding: 12px;
  }

  .stage__grid {
    border-radius: var(--ui-panel-radius);
  }

  .compare__gain {
    padding: 14px;
  }

  .readiness {
    padding: 10px;
    gap: 10px;
  }

  .readiness > li,
  .readiness > li:first-child,
  .readiness > li:last-child {
    min-height: 220px;
    padding: 22px;
  }

  .hero__world,
  .shift-scene__media,
  .who__portrait-media,
  .phero__system,
  .room__visual,
  .ahero__visual,
  .reader-media,
  .future-media {
    aspect-ratio: 4 / 5;
    min-height: 0;
  }

  .hero__world,
  .shift-scene,
  .who__portrait,
  .phero__system,
  .room__media,
  .ahero__visual,
  .reader-media,
  .future-media {
    margin-top: 52px;
  }

  .hero__world-media {
    position: absolute;
    inset: 0;
  }

  .hero__world-media img {
    object-position: 46% center;
  }

  .hero-context {
    position: absolute;
    top: 50%;
    right: 12px;
    left: 12px;
    width: auto;
    min-height: 76%;
    margin: 0;
    padding: 24px;
    transform: translateY(-50%);
  }

  .hero-context__title {
    margin-top: 30px;
    font-size: clamp(30px, 9vw, 40px);
  }

  .hero-context__truths {
    margin-top: 22px;
  }

  .hero-context__truths li {
    min-height: 50px;
  }

  .shift-brief {
    position: absolute;
    top: auto;
    right: 12px;
    bottom: 12px;
    left: 12px;
    width: auto;
    min-height: 0;
    padding: 24px;
    transform: none;
  }

  .shift-brief__icon {
    width: 52px;
    height: 52px;
    border-radius: 18px;
  }

  .shift-brief__copy {
    margin-top: 24px;
  }

  .shift-brief__copy h3 {
    font-size: 25px;
  }

  .shift-brief__copy > p {
    margin-top: 10px;
    font-size: 15px;
  }

  .shift-brief__selection {
    margin-top: 18px;
    padding: 14px;
    grid-template-columns: 62px minmax(0, 1fr);
    gap: 12px;
  }

  .shift-brief footer {
    margin-top: 16px;
  }

  .who__portrait img {
    height: 100%;
    object-position: 54% center;
  }

  .who-audience {
    position: absolute;
    top: 12px;
    right: 12px;
    bottom: 12px;
    left: 12px;
    width: auto;
    min-height: 0;
  }

  .who-audience > header {
    min-height: 58px;
    padding-inline: 20px;
  }

  .who__list {
    padding: 10px;
  }

  .who__list li,
  .who__list li:first-child {
    padding: 16px 16px 16px 54px;
    border-radius: 18px;
  }

  .phero__system {
    display: grid;
    padding: 12px;
    overflow: hidden;
    align-items: center;
    justify-items: center;
  }

  .phero__world-media {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    margin: 0;
  }

  .phero__instrument {
    position: relative;
    z-index: 1;
    width: 100%;
    height: calc(100% - 24px);
    min-height: 0;
    max-height: none;
    margin: 0;
    overflow: hidden;
    align-self: center;
    justify-self: center;
  }

  .phero__instrument-head {
    min-height: 66px;
    padding-inline: 20px;
  }

  .phero__brand img {
    width: 118px;
  }

  .phero__instrument-body {
    padding: 18px;
  }

  .phero__timeline {
    gap: 8px;
  }

  .phero__step {
    padding: 14px;
  }

  .room-proof {
    position: absolute;
    top: auto;
    right: 12px;
    bottom: 12px;
    left: 12px;
    width: auto;
    min-height: 0;
    padding: 24px;
    transform: none;
  }

  .room-proof__title {
    margin-top: 28px;
    font-size: 29px;
  }

  .agentic-card {
    width: auto;
    min-height: 0;
    margin: 12px;
    padding: 24px;
    justify-self: stretch;
    align-self: center;
  }

  .agentic-card__title {
    margin-top: 28px;
    font-size: 31px;
  }

  .agentic-bridge {
    margin-top: 22px;
    grid-template-columns: 1fr;
    gap: 0;
  }

  .agentic-bridge > i {
    display: none;
  }

  .agentic-bridge > div {
    min-height: 62px;
  }

  .reader-media {
    padding: 12px;
  }

  .reader-media picture {
    width: 100%;
    max-height: 100%;
  }

  .reader-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .future-close {
    width: auto;
    min-height: 0;
    margin: 12px;
    padding: 24px;
    display: block;
  }

  .future-close b,
  .future-close span {
    display: block;
  }

  .future-close b {
    margin-top: 24px;
    font-size: 31px;
  }

  .future-close span:last-child {
    margin-top: 24px;
  }
}