/* Quiet depth and motion. Content remains fully readable without JavaScript. */
:root {
  --glass-edge: rgba(255, 255, 255, .72);
  --glass-shadow: 0 30px 80px rgba(34, 57, 102, .13),
                  inset 0 1px 0 rgba(255, 255, 255, .9);
}

.site-header {
  background: rgba(250, 252, 255, .78);
  border-bottom-color: rgba(255, 255, 255, .8);
  box-shadow: 0 1px 0 rgba(37, 55, 88, .04);
  backdrop-filter: saturate(175%) blur(24px);
  -webkit-backdrop-filter: saturate(175%) blur(24px);
  transition: background .35s ease, box-shadow .35s ease;
}
.site-header.is-scrolled {
  background: rgba(251, 252, 255, .88);
  box-shadow: 0 12px 32px rgba(29, 45, 74, .07);
}
.nav-cta,
.button.primary {
  box-shadow: 0 4px 12px rgba(39, 103, 244, .13);
  transition: background .25s ease, transform .25s ease, box-shadow .25s ease;
}
.nav-cta:hover,
.button.primary:hover {
  box-shadow: 0 10px 24px rgba(39, 103, 244, .22);
}

.hero {
  position: relative;
  isolation: isolate;
  background: radial-gradient(ellipse at 76% 45%, #e5edfb 0, #f8fbff 37%, #fff 73%);
}
.hero::before {
  content: "";
  position: absolute;
  width: min(56vw, 740px);
  aspect-ratio: 1;
  top: -19%;
  right: -12%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(180, 202, 251, .3), transparent 67%);
  filter: blur(13px);
  z-index: -1;
  pointer-events: none;
}
.hero-copy > * { animation: hero-enter .85s both cubic-bezier(.2, .8, .2, 1); }
.hero-copy > :nth-child(2) { animation-delay: .08s; }
.hero-copy > :nth-child(3) { animation-delay: .16s; }
.hero-copy > :nth-child(4) { animation-delay: .24s; }
.hero-copy > :nth-child(5) { animation-delay: .32s; }
.hero-visual { animation: hero-visual-enter 1s .18s both cubic-bezier(.2, .8, .2, 1); }
.ambient-one { animation: ambient-drift-one 18s ease-in-out infinite alternate; }
.ambient-two { animation: ambient-drift-two 22s ease-in-out infinite alternate; }

.product-window {
  background: rgba(255, 255, 255, .87);
  border: 1px solid var(--glass-edge);
  box-shadow: var(--glass-shadow);
  backdrop-filter: saturate(145%) blur(28px);
  -webkit-backdrop-filter: saturate(145%) blur(28px);
  transition: box-shadow .45s ease, transform .55s cubic-bezier(.2, .8, .2, 1);
}
.product-window:hover {
  transform: perspective(1000px) rotateY(-2deg) rotateX(1deg) translateY(-5px);
  box-shadow: 0 48px 100px rgba(34, 57, 102, .19), inset 0 1px 0 #fff;
}
.window-top { background: rgba(248, 250, 255, .55); }
.floating-proof {
  background: rgba(255, 255, 255, .82);
  border: 1px solid rgba(255, 255, 255, .85);
  box-shadow: 0 18px 50px rgba(39, 55, 94, .14), inset 0 1px 0 #fff;
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  animation: proof-enter .75s .9s both cubic-bezier(.2, .8, .2, 1), proof-float 7s 1.65s ease-in-out infinite;
}
.progress-track { overflow: hidden; }
.progress-track span { position: relative; }
.progress-track span::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, .55) 50%, transparent 100%);
  transform: translateX(-110%);
  animation: progress-sheen 6s 1.5s ease-in-out infinite;
}

.experience {
  background: radial-gradient(circle at 50% 15%, #eef3fc 0, #f8fafc 55%, #f9fafc 100%);
}
.demo-layout {
  background: rgba(255, 255, 255, .87);
  border: 1px solid rgba(255, 255, 255, .9);
  box-shadow: 0 32px 80px rgba(32, 49, 82, .1), inset 0 1px 0 #fff;
  backdrop-filter: blur(24px) saturate(130%);
  -webkit-backdrop-filter: blur(24px) saturate(130%);
}
.demo-sidebar { background: rgba(248, 251, 255, .72); }
.demo-panel.is-switching { animation: panel-change .42s cubic-bezier(.2, .8, .2, 1); }
.demo-tabs button {
  transition: background .25s ease, border-color .25s ease, transform .25s ease;
}
.demo-tabs button:hover { transform: translateX(2px); }
.steps article,
.facts-grid article,
.event-grid article,
.role-grid article {
  background: linear-gradient(145deg, rgba(255, 255, 255, .92), rgba(248, 250, 255, .76));
  border-color: rgba(229, 235, 245, .88);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95);
  transition: transform .35s cubic-bezier(.2, .8, .2, 1),
              box-shadow .35s ease, border-color .35s ease;
}
.steps article:hover,
.facts-grid article:hover,
.event-grid article:hover,
.role-grid article:hover {
  transform: translateY(-5px);
  border-color: #d9e5fa;
  box-shadow: 0 20px 44px rgba(39, 65, 110, .09), inset 0 1px 0 #fff;
}
.wire-card {
  background: rgba(255, 255, 255, .94);
  border: 1px solid rgba(255, 255, 255, .7);
  box-shadow: 0 32px 80px rgba(0, 0, 0, .22), inset 0 1px 0 #fff;
  backdrop-filter: blur(25px);
  -webkit-backdrop-filter: blur(25px);
}
.close-card {
  background: linear-gradient(145deg, rgba(255, 255, 255, .85), rgba(242, 247, 255, .64));
  border: 1px solid rgba(255, 255, 255, .95);
  box-shadow: 0 25px 65px rgba(38, 59, 100, .08), inset 0 1px 0 #fff;
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
}
.page-hero {
  background: radial-gradient(ellipse at 70% 0%, #eaf1ff 0, #fff 60%);
}
.accordion details {
  transition: background .25s ease;
}
.accordion details:hover,
.accordion details[open] { background: rgba(255, 255, 255, .58); }

.reveal-on-scroll {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .75s cubic-bezier(.2, .8, .2, 1),
              transform .75s cubic-bezier(.2, .8, .2, 1);
  transition-delay: var(--reveal-delay, 0ms);
}
.reveal-on-scroll.in-view {
  opacity: 1;
  transform: translateY(0);
}

@keyframes hero-enter {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes hero-visual-enter {
  from { opacity: 0; transform: translateY(24px) scale(.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes proof-enter {
  from { opacity: 0; transform: translateY(15px) scale(.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes proof-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}
@keyframes ambient-drift-one {
  from { transform: translate3d(-10px, 12px, 0) scale(.98); }
  to { transform: translate3d(26px, -20px, 0) scale(1.06); }
}
@keyframes ambient-drift-two {
  from { transform: translate3d(16px, -8px, 0); }
  to { transform: translate3d(-25px, 22px, 0); }
}
@keyframes progress-sheen {
  0%, 70%, 100% { transform: translateX(-110%); }
  85% { transform: translateX(110%); }
}
@keyframes panel-change {
  from { opacity: .55; transform: translateY(7px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 760px) {
  .product-window:hover { transform: none; }
  .demo-tabs button:hover { transform: none; }
  .steps article:hover,
  .facts-grid article:hover,
  .event-grid article:hover,
  .role-grid article:hover { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-copy > *, .hero-visual, .ambient-one, .ambient-two,
  .floating-proof, .progress-track span::after,
  .demo-panel.is-switching { animation: none !important; }
  .product-window, .demo-tabs button,
  .steps article, .facts-grid article,
  .event-grid article, .role-grid article,
  .site-header, .reveal-on-scroll { transition: none !important; }
  .reveal-on-scroll { opacity: 1; transform: none; }
  .product-window:hover, .steps article:hover,
  .facts-grid article:hover, .event-grid article:hover,
  .role-grid article:hover { transform: none; }
}

/* Developers: webhook events */
.events-section .section-intro .preview-pill { margin-top: 18px; }
.events-note { margin: 26px 0 0; max-width: 780px; color: #697382; font-size: 14px; line-height: 1.6; }
.events-note code { color: #2e62c8; font-size: 12px; overflow-wrap: anywhere; }