/* ChatBridge / Signal Bridge — higher-contrast public demo art direction */

:root {
  --cb-cloud: #eefbff;
  --cb-paper: #ffffff;
  --cb-mist: #dff6ff;
  --cb-mist-2: #bfeeff;
  --cb-aqua: #00bfe8;
  --cb-aqua-deep: #0755cf;
  --cb-aqua-hover: #0646ab;
  --cb-blue: #0755cf;
  --cb-sun: #d8ff62;
  --cb-coral: #ff6f61;
  --cb-ink: #0b356f;
  --cb-soft: #527392;
  --cb-line: #a8d9ed;
  --cb-danger: #e64e60;
  --cb-shadow: 0 26px 70px rgba(7, 85, 207, 0.16);
  --cb-shadow-small: 0 13px 34px rgba(7, 85, 207, 0.12);
}

body.cb-page {
  background:
    linear-gradient(rgba(7, 85, 207, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(7, 85, 207, 0.045) 1px, transparent 1px),
    var(--cb-cloud);
  background-size: 48px 48px;
}

.cb-page ::selection {
  color: var(--cb-ink);
  background: var(--cb-sun);
}

.cb-demo-ribbon {
  color: var(--cb-ink);
  background: var(--cb-sun);
  border-color: var(--cb-ink);
  font-weight: 700;
}

.cb-header {
  background: rgba(255, 255, 255, 0.9);
  border-bottom: 2px solid var(--cb-blue);
  box-shadow: 0 8px 0 rgba(0, 191, 232, 0.08);
}

.cb-brand-symbol {
  background: var(--cb-blue);
  border-radius: 3px;
  box-shadow: 6px 6px 0 var(--cb-sun);
}

.cb-brand-symbol::after {
  background: var(--cb-blue);
}

.cb-nav .cb-nav-cta,
.cb-button-primary {
  color: #ffffff;
  background: var(--cb-blue);
  border-color: var(--cb-blue);
  border-radius: 3px;
  box-shadow: 6px 6px 0 var(--cb-sun);
}

.cb-nav .cb-nav-cta:hover,
.cb-nav .cb-nav-cta:focus-visible,
.cb-button-primary:hover,
.cb-button-primary:focus-visible {
  color: #ffffff;
  background: var(--cb-aqua-hover);
  transform: translate(-2px, -2px);
  box-shadow: 9px 9px 0 var(--cb-sun);
}

.cb-hero {
  min-height: calc(100vh - 108px);
  padding-block: clamp(82px, 9vw, 128px);
  background:
    linear-gradient(116deg, rgba(255, 255, 255, 0.98) 0 51%, rgba(191, 238, 255, 0.76) 51% 76%, rgba(216, 255, 98, 0.42) 76% 100%);
}

.cb-hero::before {
  width: min(42vw, 610px);
  height: 10px;
  left: -2%;
  top: 17%;
  border: 0;
  border-radius: 0;
  background: var(--cb-coral);
  transform: rotate(-7deg);
  box-shadow:
    0 22px 0 var(--cb-aqua),
    0 44px 0 rgba(7, 85, 207, 0.18);
}

.cb-hero::after {
  width: min(32vw, 450px);
  height: min(32vw, 450px);
  right: -10%;
  top: 8%;
  border: 2px solid rgba(7, 85, 207, 0.42);
  border-radius: 0;
  background:
    linear-gradient(rgba(7, 85, 207, 0.12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(7, 85, 207, 0.12) 1px, transparent 1px);
  background-size: 42px 42px;
  transform: rotate(11deg);
}

.cb-eyebrow {
  color: var(--cb-blue);
  background: var(--cb-sun);
  border: 1px solid var(--cb-blue);
  border-radius: 2px;
  box-shadow: 4px 4px 0 rgba(7, 85, 207, 0.12);
}

.cb-hero h1 {
  color: var(--cb-ink);
  font-size: clamp(3.2rem, 3.9vw, 4.9rem);
  line-height: 0.98;
}

.cb-hero h1 em {
  color: var(--cb-blue);
  white-space: normal;
}

.cb-hero h1 em::after {
  height: 0.16em;
  background: var(--cb-aqua);
  opacity: 0.72;
}

.cb-hero-lead {
  color: #244f79;
}

.cb-console {
  filter: drop-shadow(28px 30px 0 rgba(7, 85, 207, 0.12));
  transform: rotate(-1.5deg);
}

.cb-console-frame {
  border: 2px solid var(--cb-blue);
  border-radius: 4px;
  background: #ffffff;
  box-shadow: none;
}

.cb-console-top {
  color: #ffffff;
  background: var(--cb-blue);
  border-bottom-color: var(--cb-blue);
}

.cb-console-mode {
  color: var(--cb-ink);
  background: var(--cb-sun);
}

.cb-console-list {
  background: #e8f8ff;
  border-right-color: var(--cb-blue);
}

.cb-mini-thread.active {
  background: #ffffff;
  box-shadow: inset 4px 0 0 var(--cb-coral);
}

.cb-bubble {
  color: var(--cb-ink);
  background: #dff6ff;
  border: 1px solid #9fdff4;
  border-radius: 3px;
}

.cb-bubble.customer {
  background: #f4ffc9;
  border-color: #cce86b;
}

.cb-confidence {
  color: #ffffff;
  background: var(--cb-blue);
  border-radius: 2px;
}

.cb-handoff-card {
  color: var(--cb-ink);
  background: var(--cb-coral);
  border: 2px solid var(--cb-ink);
  border-radius: 2px;
  box-shadow: 8px 8px 0 var(--cb-sun);
}

.cb-handoff-card b,
.cb-handoff-card span {
  color: #ffffff;
}

.cb-section-paper {
  background: rgba(255, 255, 255, 0.94);
}

.cb-section-mist {
  background:
    linear-gradient(126deg, #c9f1ff 0 58%, #eaffac 58% 100%);
}

.cb-section-blue {
  color: #ffffff;
  background:
    linear-gradient(120deg, #0755cf 0 66%, #00a9dc 66% 100%);
}

.cb-section-blue .cb-section-label,
.cb-section-blue .cb-section-lead,
.cb-section-blue h2 {
  color: #ffffff;
}

.cb-role-grid {
  gap: 18px;
}

.cb-role-card {
  border: 2px solid var(--cb-blue);
  border-radius: 2px;
  background: #ffffff;
  box-shadow: 10px 10px 0 #aeefff;
}

.cb-role-card:nth-child(2) {
  background: #f3ffc6;
  box-shadow: 10px 10px 0 var(--cb-coral);
}

.cb-role-card:nth-child(3) {
  background: #e4efff;
  box-shadow: 10px 10px 0 var(--cb-sun);
}

.cb-role-icon {
  color: #ffffff;
  background: var(--cb-blue);
  border-radius: 2px;
}

.cb-architecture,
.cb-dashboard-preview,
.cb-boundary-card {
  border: 2px solid var(--cb-blue);
  border-radius: 3px;
  background: #ffffff;
  box-shadow: 14px 14px 0 rgba(7, 85, 207, 0.12);
}

.cb-arch-node.core {
  color: #ffffff;
  background: var(--cb-blue);
  border-color: var(--cb-blue);
}

.cb-metric:nth-child(2) {
  background: #f3ffc6;
}

.cb-metric:nth-child(3) {
  background: #ffe2de;
}

.cb-cta {
  background: #eaffac;
}

.cb-cta-card {
  color: var(--cb-ink);
  border: 2px solid var(--cb-blue);
  border-radius: 3px;
  background: #ffffff;
  box-shadow: 20px 20px 0 var(--cb-blue);
}

.cb-cta-card::after {
  background: var(--cb-coral);
  border-radius: 0;
}

.cb-footer {
  background: var(--cb-blue);
}

@media (max-width: 760px) {
  .cb-hero {
    min-height: auto;
    background:
      linear-gradient(158deg, #ffffff 0 58%, #c9f1ff 58% 82%, #eaffac 82%);
  }

  .cb-hero h1 {
    font-size: clamp(3rem, 12vw, 4rem);
  }

  .cb-console {
    margin-top: 18px;
    filter: drop-shadow(12px 14px 0 rgba(7, 85, 207, 0.12));
    transform: none;
  }

  .cb-role-card,
  .cb-role-card:nth-child(2),
  .cb-role-card:nth-child(3),
  .cb-architecture,
  .cb-dashboard-preview,
  .cb-boundary-card {
    box-shadow: 7px 7px 0 rgba(7, 85, 207, 0.1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .cb-console {
    transform: none;
  }
}

/* Refined palette — saturated colors stay as small signals */
:root {
  --cb-cloud: #f7f9fc;
  --cb-mist: #edf3f7;
  --cb-mist-2: #dde8ef;
  --cb-aqua: #77b8c8;
  --cb-aqua-deep: #5a6fa5;
  --cb-aqua-hover: #4a5f91;
  --cb-blue: #5a6fa5;
  --cb-sun: #e7edc8;
  --cb-coral: #d98a7e;
  --cb-ink: #33445f;
  --cb-soft: #6b788b;
  --cb-line: #cad6df;
  --cb-shadow: 0 28px 80px rgba(68, 88, 123, 0.14);
}

body.cb-page {
  background:
    linear-gradient(rgba(90, 111, 165, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(90, 111, 165, 0.035) 1px, transparent 1px),
    #f7f9fc;
  background-size: 56px 56px;
}

.cb-demo-ribbon {
  background: #eef1dc;
  border-color: rgba(90, 111, 165, 0.35);
}

.cb-header {
  border-bottom: 1px solid rgba(90, 111, 165, 0.28);
  box-shadow: 0 14px 40px rgba(64, 83, 116, 0.07);
}

.cb-brand-symbol,
.cb-nav .cb-nav-cta,
.cb-button-primary {
  box-shadow: 0 12px 28px rgba(75, 95, 140, 0.2);
}

.cb-hero {
  background:
    radial-gradient(circle at 86% 20%, rgba(119, 184, 200, 0.16), transparent 25rem),
    linear-gradient(116deg, rgba(255, 255, 255, 0.99) 0 53%, rgba(237, 243, 247, 0.9) 53% 79%, rgba(231, 237, 200, 0.42) 79%);
}

.cb-hero::before {
  height: 5px;
  opacity: 0.72;
  box-shadow: 0 19px 0 rgba(119, 184, 200, 0.72), 0 38px 0 rgba(90, 111, 165, 0.12);
}

.cb-eyebrow {
  background: #f0f2e3;
  border-color: rgba(90, 111, 165, 0.36);
  box-shadow: none;
}

.cb-console {
  filter: drop-shadow(0 30px 38px rgba(59, 76, 109, 0.16));
}

.cb-console-frame,
.cb-role-card,
.cb-architecture,
.cb-dashboard-preview,
.cb-boundary-card,
.cb-cta-card {
  border-color: rgba(90, 111, 165, 0.38);
  border-radius: 18px;
  box-shadow: 0 26px 60px rgba(68, 87, 121, 0.12);
}

.cb-handoff-card {
  color: var(--cb-ink);
  background: #f5ded9;
  border-color: rgba(90, 111, 165, 0.35);
  border-radius: 12px;
  box-shadow: 0 14px 28px rgba(68, 87, 121, 0.12);
}

.cb-handoff-card b,
.cb-handoff-card span {
  color: var(--cb-ink);
}

.cb-section-mist {
  background:
    linear-gradient(118deg, rgba(244, 247, 249, 0.96), rgba(239, 243, 236, 0.9)),
    url("/assets/section-proof-testing-v1.webp");
  background-position: center;
  background-size: cover;
  background-attachment: fixed;
}

.cb-section-blue {
  color: var(--cb-ink);
  background: linear-gradient(120deg, #e8edf5, #dfecef);
}

.cb-section-blue .cb-section-label,
.cb-section-blue .cb-section-lead,
.cb-section-blue h2 {
  color: var(--cb-ink);
}

.cb-role-card:nth-child(2),
.cb-role-card:nth-child(3),
.cb-metric:nth-child(2),
.cb-metric:nth-child(3) {
  background: #f7f8f4;
}

.cb-cta {
  background: #edf1e1;
}

.cb-cta-card::after {
  width: 7px;
  opacity: 0.82;
}

.cb-footer {
  background: #50658f;
}

@media (max-width: 760px) {
  .cb-hero {
    background:
      linear-gradient(158deg, rgba(255, 255, 255, 0.99) 0 62%, rgba(236, 243, 246, 0.93) 62% 86%, rgba(239, 242, 224, 0.84) 86%);
  }

  .cb-section-mist {
    background-attachment: scroll;
  }
}