/* ============================================================
   MURMUR · Chromatic announcement + transparent glass actions
   The colour identifies the page. Buttons remain neutral glass.
   ============================================================ */

/* ---------- Page-coloured announcement ---------- */

.announcement {
  --announcement-color: var(--orange);
  --announcement-ink: #28180e;
  --announcement-focus: rgba(40, 24, 14, 0.82);
  background: var(--announcement-color);
  color: var(--announcement-ink);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: none;
}

.announcement--home {
  --announcement-color: var(--orange);
  --announcement-ink: #28180e;
  --announcement-focus: rgba(40, 24, 14, 0.82);
}

.announcement--product {
  --announcement-color: #B6B383;
  --announcement-ink: #29291e;
  --announcement-focus: rgba(41, 41, 30, 0.8);
}

.announcement--agentic {
  --announcement-color: var(--sky);
  --announcement-ink: #18232e;
  --announcement-focus: rgba(24, 35, 46, 0.78);
}

.announcement--contact {
  --announcement-color: var(--yellow);
  --announcement-ink: #292719;
  --announcement-focus: rgba(41, 39, 25, 0.78);
}

.announcement__link:focus-visible {
  outline-color: var(--announcement-focus);
}

/* ---------- Transparent liquid-glass buttons ---------- */

.nav__cta,
.nav--home .nav__cta,
.nav--home:not(.is-scrolled) .nav__cta,
.btn,
.ahero__actions .btn,
.afinal__action .btn,
.product-demo-hero__cta,
.prefooter-cta__button,
.ahero__actions .link {
  border: 1px solid rgba(255, 255, 255, 0.62);
  border-radius: 999px;
  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.35) 0%,
      rgba(255, 255, 255, 0.18) 52%,
      rgba(255, 255, 255, 0.08) 100%
    );
  color: #202022;
  -webkit-backdrop-filter: blur(18px) saturate(0.85);
  backdrop-filter: blur(18px) saturate(0.85);
  box-shadow:
    0 -1px 0 rgba(10, 11, 12, 0.68),
    0 1.25px 0 rgba(8, 9, 10, 0.76),
    inset 0 1px 0 rgba(255, 255, 255, 0.94),
    inset 1px 0 0 rgba(255, 255, 255, 0.3),
    inset -1px 0 0 rgba(60, 64, 68, 0.12),
    0 6px 16px rgba(70, 75, 80, 0.035);
  text-shadow: none;
  transition:
    background 160ms ease,
    box-shadow 160ms ease,
    color 160ms ease,
    transform 120ms ease;
}

.nav__cta:hover,
.nav--home .nav__cta:hover,
.nav--home:not(.is-scrolled) .nav__cta:hover,
.btn:hover,
.ahero__actions .btn:hover,
.afinal__action .btn:hover,
.product-demo-hero__cta:hover,
.prefooter-cta__button:hover,
.ahero__actions .link:hover {
  border-color: rgba(255, 255, 255, 0.72);
  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.47) 0%,
      rgba(255, 255, 255, 0.25) 52%,
      rgba(255, 255, 255, 0.12) 100%
    );
  color: #202022;
  transform: translateY(-1px);
}

.nav__cta:active,
.btn:active,
.product-demo-hero__cta:active,
.prefooter-cta__button:active,
.ahero__actions .link:active {
  transform: translateY(1px);
  box-shadow:
    inset 0 1px 2px rgba(30, 32, 34, 0.15),
    inset 0 -1px 0 rgba(255, 255, 255, 0.38);
}

.nav__cta:focus-visible,
.btn:focus-visible,
.product-demo-hero__cta:focus-visible,
.prefooter-cta__button:focus-visible,
.ahero__actions .link:focus-visible {
  outline: 2px solid rgba(45, 47, 50, 0.55);
  outline-offset: 3px;
}

/* Small arrow surfaces use the denser, sculpted glass from the reference. */

.nav__cta i,
.nav--home:not(.is-scrolled) .nav__cta i,
.btn i,
.product-demo-hero__cta i,
.prefooter-cta__button i,
.section-cta i {
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 10px;
  background:
    linear-gradient(
      145deg,
      rgba(245, 245, 243, 0.56),
      rgba(207, 209, 208, 0.36)
    );
  color: #4b4c4a;
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.7),
    inset 0 -1px 0 rgba(70, 72, 72, 0.2),
    0 1px 2px rgba(40, 42, 42, 0.05);
}

.nav__cta:hover i,
.nav--home:not(.is-scrolled) .nav__cta:hover i,
.btn:hover i,
.product-demo-hero__cta:hover i,
.prefooter-cta__button:hover i,
.section-cta:hover i {
  border-color: rgba(255, 255, 255, 0.58);
  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 253, 0.68),
      rgba(215, 217, 217, 0.44)
    );
  color: #202022;
}

@media (max-width: 860px) {
  .nav__cta,
  .nav--home .nav__cta,
  .nav--home:not(.is-scrolled) .nav__cta,
  .nav__cta:hover,
  .nav--home .nav__cta:hover,
  .nav--home:not(.is-scrolled) .nav__cta:hover {
    min-height: 36px;
    padding: 0 13px;
    border: 1px solid rgba(255, 255, 255, 0.62);
    border-radius: 999px;
    background:
      linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.35),
        rgba(255, 255, 255, 0.1)
      );
    color: #202022;
    box-shadow:
      0 -1px 0 rgba(10, 11, 12, 0.6),
      0 1px 0 rgba(8, 9, 10, 0.7),
      inset 0 1px 0 rgba(255, 255, 255, 0.92);
    transform: none;
  }

  .nav__cta::before {
    color: inherit;
  }
}

/* ---------- Home demo selected states ---------- */

.demo-section .stage__toggle {
  border: 1px solid;
  border-color:
    rgba(10, 11, 12, 0.78)
    rgba(60, 64, 68, 0.18)
    rgba(8, 9, 10, 0.82)
    rgba(255, 255, 255, 0.46);
  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.35) 0%,
      rgba(255, 255, 255, 0.18) 47%,
      rgba(255, 255, 255, 0.08) 100%
    );
  -webkit-backdrop-filter: blur(20px) saturate(0.85);
  backdrop-filter: blur(20px) saturate(0.85);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.96),
    inset 1px 0 0 rgba(255, 255, 255, 0.32),
    inset -1px 0 0 rgba(60, 64, 68, 0.14),
    0 10px 24px rgba(70, 75, 80, 0.035) !important;
}

.demo-section .stage__toggle button[aria-pressed="true"],
.demo-section .demo-agents button[aria-pressed="true"] {
  border: 0 !important;
  outline: 0;
  background-color: #000000 !important;
  background-image: none !important;
  color: var(--white);
  box-shadow: none !important;
  filter: none;
  opacity: 1;
}