@charset "UTF-8";
/* Shared brand presentation. CSS backgrounds are decorative. */
body {
  --tech-night: #081a35;
  --tech-cyan: #38bdf8;
  --tech-line: #d2e2f5;
  --tech-ink: #16345c;
  background: #fff;
}

body .brand-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 57px 0 48px;
  color: #fff;
  background:
    radial-gradient(ellipse at 48% -35%, #2366c74d, transparent 64%),
    radial-gradient(ellipse at 95% 90%, #087fac24, transparent 50%),
    linear-gradient(118deg, #081a35, #0b2345 60%, #091b35);
  border-bottom: 1px solid #38bdf845;
}
body .brand-hero::before,
body .brand-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: -1;
}
body .brand-hero::before {
  background-image:
    linear-gradient(#73c7ff0b 1px, transparent 1px),
    linear-gradient(90deg, #73c7ff0b 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: linear-gradient(90deg, #000, #0003 38%, #0003 62%, #000);
}
body .brand-hero::after {
  left: auto;
  right: -24px;
  width: min(570px, 46vw);
  background: url("assets/mce-blueprint.svg") center / contain no-repeat;
  opacity: .55;
  mask-image: linear-gradient(90deg, transparent, #000 45%);
}
body .product-intro > img {
  filter: drop-shadow(0 0 22px #2563eb77) drop-shadow(0 0 5px #38bdf833);
  margin-bottom: 19px;
}
body .product-intro h1 {
  color: #fff;
  letter-spacing: -.8px;
}
body .product-intro .hero-description {
  color: #c6d7ef;
  max-width: 740px;
}

body .showcase-panel {
  background: #fff;
  border-color: #bdd1e8;
  border-radius: 8px;
  box-shadow: 0 8px 22px -20px #173e7299;
  transition: border-color 180ms, box-shadow 180ms;
}
body .showcase-panel:hover,
body .showcase-panel:focus-within {
  border-color: #4caee0;
  box-shadow: 0 0 0 2px #38bdf812;
}
body .screen-caption { background: #fcfdff; }
body .expand-hint {
  color: #164e82;
  border-color: #b7d9f3;
}
body .product-note {
  border-left-color: #72bfeb;
  background: #f3f7fc;
}
body .hero-download {
  display: flex;
  justify-content: center;
  margin-top: 26px;
}

body .download-button {
  width: auto;
  min-width: 220px;
  max-width: 100%;
  font-size: 16px;
  border-color: #9adfff;
  color: #124ca3;
  border-radius: 6px;
  transition: background 180ms, box-shadow 180ms, transform 180ms;
}
body .download-button:hover:not(:disabled) {
  background: #edf9ff;
  box-shadow: 0 0 18px #38bdf82b;
  transform: translateY(-1px);
}
body .image-viewer::backdrop { background: #041124d9; }


/* The hero and its one download action are shared by live and static pages. */
body .brand-hero .product-intro { padding-bottom: 0; }
body .brand-hero .hero-description { color: #c6d7ef; }
body .hero-download .download-button:disabled {
  background: #173356; border-color: #537492; color: #c4d2e3; box-shadow: none;
}
body .home-hero { padding: 58px 0 64px; }
.home-hero h1 { color: #fff; }
.home-hero h1 > span { color: #a9ddff; background: none; -webkit-text-fill-color: currentColor; }
.home-products-section { padding: 48px 0 64px; background: #fff; }
.home-products-section .home-products { margin-top: 0; }
.home-products-section .product-card {
  border-color: #c9dbef; border-radius: 10px;
  box-shadow: inset 0 2px 0 #38bdf830, 0 8px 22px -20px #173e7299;
}
.home-products-section .product-card:hover { box-shadow: 0 10px 28px -19px #2367a860; }
.product-link { font-size: 16px; }
.interfaces-section { padding: 42px 0 8px; background: #fff; }
.interfaces-section .gallery { max-width: none; }
.interfaces-section .gallery-heading, .section-heading { display: flex; align-items: center; gap: 22px; }
.interfaces-section .gallery-heading::after, .section-heading::after {
  content: ''; height: 1px; flex: 1; background: linear-gradient(90deg, #38bdf880, #eaf0f7);
}
.interfaces-section .gallery-heading > span { order: 1; }
.interfaces-section .gallery-heading h2, .section-heading h2 { color: #16345c; font-size: 26px; }
.gallery-tabs button { font-size: 16px; color: #526b8a; }
.feature-card, .scenario-card { border-color: #d2e2f5; border-radius: 8px; }
.feature-card h3, .scenario-card h3 { color: #204a77; }
.feature-number { border: 1px solid #b6e0f5; background: #f1f9ff; border-radius: 6px; }
.scenario-icon { background: #f1f9ff; border-radius: 8px; }
.static-gallery figure { margin: 24px 0 0; border: 1px solid #bdd1e8; border-radius: 8px; overflow: hidden; }
.static-gallery figure img { width: 100%; height: auto; }
.static-gallery figcaption { padding: 14px 21px; color: #637895; background: #fcfdff; font-size: 16px; border-top: 1px solid #e8edf6; }
@media (max-width: 800px) {
  body .brand-hero { padding: 43px 0 38px; }
  body .brand-hero::after { width: 52vw; right: -80px; opacity: .35; }
  body .home-hero { padding: 48px 0 52px; }
}
@media (max-width: 600px) {
  body .brand-hero { padding: 36px 0 32px; }
  body .brand-hero::before { background-size: 32px 32px; }
  body .brand-hero::after { width: 310px; right: -180px; opacity: .3; }
  body .product-intro > img { margin-bottom: 16px; }
  body .home-hero { padding: 30px 0 38px; }
  .home-products-section { padding: 28px 0 36px; }
  .interfaces-section { padding: 30px 0 0; }
  .interfaces-section .gallery-heading, .section-heading { gap: 14px; }
  .interfaces-section .gallery-heading h2, .section-heading h2 { font-size: 22px; }
  .static-gallery figcaption { padding: 12px 13px; }
}
@media (prefers-reduced-motion: reduce) {
  body .download-button:hover:not(:disabled) { transform: none; }
}