:root {
  --bg: 246 248 251;
  --surface: 255 255 255;
  --sunken: 239 243 248;
  --ink: 18 31 52;
  --muted: 83 101 125;
  --line: 220 228 238;
  --primary: 36 91 199;
  --primary-fg: 255 255 255;
  --primary-soft: 231 239 253;
  --accent: 12 135 159;
  --accent-soft: 228 246 248;
  --ok: 22 118 62;
  --ok-soft: 220 243 228;
  --warn: 146 94 0;
  --warn-soft: 253 241 214;
  --plan: 92 76 160;
  --plan-soft: 236 232 250;
  --glass: rgba(255, 255, 255, 0.88);
  --glass-border: rgba(30, 52, 83, 0.1);
  --shadow: 0 2px 6px rgba(20, 42, 75, 0.04), 0 8px 24px rgba(20, 42, 75, 0.05);
  --shadow-lg: 0 16px 48px rgba(20, 42, 75, 0.12), 0 4px 12px rgba(20, 42, 75, 0.05);
  --glow: radial-gradient(62% 74% at 77% 34%, rgba(52, 111, 218, 0.12), transparent 72%);
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: 9 15 28;
    --surface: 16 25 43;
    --sunken: 12 20 35;
    --ink: 228 234 243;
    --muted: 150 164 186;
    --line: 38 52 78;
    --primary: 99 160 250;
    --primary-fg: 7 18 38;
    --primary-soft: 24 44 80;
    --accent: 56 196 226;
    --accent-soft: 15 50 64;
    --ok: 92 200 128;
    --ok-soft: 18 50 36;
    --warn: 232 182 80;
    --warn-soft: 56 43 16;
    --plan: 178 160 246;
    --plan-soft: 40 34 72;
    --glass: rgba(22, 34, 58, 0.84);
    --glass-border: rgba(148, 170, 210, 0.16);
    --shadow: 0 2px 8px rgba(0, 0, 0, 0.24), 0 8px 24px rgba(0, 0, 0, 0.16);
    --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.42), 0 3px 12px rgba(0, 0, 0, 0.2);
    --glow: radial-gradient(62% 74% at 77% 34%, rgba(99, 160, 250, 0.14), transparent 72%);
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --bg: 9 15 28;
  --surface: 16 25 43;
  --sunken: 12 20 35;
  --ink: 228 234 243;
  --muted: 150 164 186;
  --line: 38 52 78;
  --primary: 99 160 250;
  --primary-fg: 7 18 38;
  --primary-soft: 24 44 80;
  --accent: 56 196 226;
  --accent-soft: 15 50 64;
  --ok: 92 200 128;
  --ok-soft: 18 50 36;
  --warn: 232 182 80;
  --warn-soft: 56 43 16;
  --plan: 178 160 246;
  --plan-soft: 40 34 72;
  --glass: rgba(22, 34, 58, 0.84);
  --glass-border: rgba(148, 170, 210, 0.16);
  --shadow: 0 2px 8px rgba(0, 0, 0, 0.24), 0 8px 24px rgba(0, 0, 0, 0.16);
  --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.42), 0 3px 12px rgba(0, 0, 0, 0.2);
  --glow: radial-gradient(62% 74% at 77% 34%, rgba(99, 160, 250, 0.14), transparent 72%);
  color-scheme: dark;
}

html { scroll-padding-top: 84px; }
body {
  font-family: Inter, "Segoe UI", ui-sans-serif, system-ui, -apple-system, Roboto, Arial, sans-serif;
  letter-spacing: -0.01em;
}
.wrap { max-width: 1280px; padding-inline: 32px; }
section[id] { scroll-margin-top: 84px; }

header {
  background: var(--glass);
  border-bottom-color: rgb(var(--line));
  box-shadow: 0 4px 18px rgba(20, 42, 75, 0.035);
}
.bar { height: 76px; gap: 34px; }
.brand { gap: 11px; font-size: 20px; letter-spacing: -0.03em; }
.brand img { width: 42px; height: 42px; border-radius: 12px; }
nav { gap: 26px; }
nav a { font-size: 14px; font-weight: 550; transition: color .18s ease; }
.mobile-nav { display: none; }
.btn { border-radius: 10px; transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease; }
.btn:hover { transform: translateY(-1px); box-shadow: var(--shadow); }
.btn-primary { box-shadow: 0 6px 16px rgba(36, 91, 199, 0.2); }

.hero { padding: 88px 0 72px; }
.hero-grid { grid-template-columns: minmax(0, 1.1fr) minmax(360px, .9fr); gap: clamp(48px, 7vw, 104px); }
.pill { font-size: 12px; font-weight: 700; letter-spacing: .075em; text-transform: uppercase; padding: 7px 12px; }
h1 { max-width: 740px; font-size: clamp(46px, 5.2vw, 72px); line-height: 1.02; letter-spacing: -.055em; font-weight: 650; margin: 22px 0; }
h1 .hl { color: rgb(var(--primary)); }
.lead { max-width: 650px; font-size: clamp(17px, 1.5vw, 19px); line-height: 1.65; }
.checks { gap: 14px 28px; margin-bottom: 32px; }
.checks li { color: rgb(var(--muted)); font-size: 14px; }
.checks svg { color: rgb(var(--ok)); }
.cta { gap: 14px; }
.showcase {
  border-radius: 26px;
  box-shadow: var(--shadow-lg);
  background-color: rgb(var(--surface));
}
.hero .showcase { max-width: 500px; border-radius: 32px; }
.hero .showcase img { object-fit: cover; }
.dots { bottom: 17px; }
.dots button { width: 7px; height: 7px; }
.dots button[aria-current="true"] { width: 20px; background: rgb(var(--primary)); }

.live-strip { gap: 12px; margin-top: 64px; }
.live-strip a {
  min-width: 0;
  padding: 14px 16px;
  border-radius: 14px;
  background: rgb(var(--surface));
  box-shadow: var(--shadow);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.live-strip a:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.live-strip img { width: 42px; height: 42px; border-radius: 11px; }
.live-strip strong { font-size: 14px; letter-spacing: -.015em; }
.live-strip span { font-size: 11px; }

section { padding: 96px 0; }
.alt { background: rgb(var(--surface)); border-color: rgb(var(--line)); }
.eyebrow { font-size: 11px; font-weight: 750; letter-spacing: .13em; margin-bottom: 12px; }
h2 { font-size: clamp(32px, 3.6vw, 46px); line-height: 1.1; letter-spacing: -.045em; font-weight: 620; margin-bottom: 14px; }
.sub { max-width: 720px; margin-bottom: 44px; font-size: 17px; line-height: 1.65; }

.product-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 20px; }
.product,
.product.flip {
  min-width: 0;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 8px 18px;
  align-content: start;
  padding: 24px;
  border: 1px solid rgb(var(--line));
  border-radius: 18px;
  background: rgb(var(--surface));
  box-shadow: var(--shadow);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.product:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: rgba(36, 91, 199, .34); }
.product + .product { margin: 0; padding-top: 24px; border-top: 1px solid rgb(var(--line)); }
.product.flip .showcase { order: 0; }
.product .showcase {
  grid-column: 1;
  grid-row: 1 / span 3;
  width: 92px;
  max-width: 92px;
  border-radius: 18px;
  align-self: start;
}
.product > div:last-child { display: contents; }
.product > div:last-child > .badge { grid-column: 2; align-self: end; justify-self: start; }
.product h3 { grid-column: 2; margin: 0; font-size: 24px; line-height: 1.2; letter-spacing: -.035em; }
.product .tag { grid-column: 2; margin: 0 0 10px; font-size: 14px; line-height: 1.5; }
.feats {
  grid-column: 1 / -1;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 18px;
  margin: 8px 0 10px;
}
.feats li { font-size: 12.5px; line-height: 1.5; color: rgb(var(--muted)); }
.feats svg { color: rgb(var(--ok)); }
.portal { grid-column: 1 / -1; margin: 0 0 8px; border-radius: 10px; font-size: 12.5px; line-height: 1.5; }
.product-foot { grid-column: 1 / -1; gap: 10px; }
.product-foot .btn { font-size: 13px; padding: 9px 13px; }
.domain { font-size: 12px; }

.platform { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.tile, .process, .industry {
  border-radius: 16px;
  padding: 22px;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.tile:hover, .process:hover, .industry:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.tile { background: rgb(var(--surface)); }
.tile h3 { font-size: 17px; letter-spacing: -.02em; }
.tile p { line-height: 1.6; }
.processes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.process { box-shadow: none; }
.process h3 { letter-spacing: -.02em; }
.diagram { border-radius: 18px; padding: 24px; }
.tabs { border-radius: 12px; }
.tabs button { border-radius: 9px; }
.industries { gap: 14px; }
.industry { background: rgb(var(--surface)); }
.industry.home { background: rgb(var(--primary-soft)); }
.principles { gap: 28px; }
.principle { border-top-width: 2px; }
.closing { border-radius: 24px; padding: 48px; }
footer { padding: 38px 0 48px; }
footer .links { gap: 12px 20px; }
footer a:hover { color: rgb(var(--ink)); }

@media (max-width: 1080px) {
  .wrap { padding-inline: 26px; }
  .bar { gap: 22px; }
  nav { gap: 16px; }
  .hero-grid { gap: 48px; }
  .product-grid { grid-template-columns: 1fr; max-width: 840px; }
  .product, .product.flip { grid-template-columns: 100px minmax(0, 1fr); }
  .product .showcase { width: 100px; max-width: 100px; }
  .feats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .wrap { padding-inline: 20px; }
  .bar { height: 68px; gap: 12px; }
  .bar > nav, .bar > .spacer { display: none; }
  .mobile-nav { display: block; position: relative; margin-left: auto; }
  .mobile-nav summary {
    list-style: none;
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border: 1px solid rgb(var(--line));
    border-radius: 11px;
    color: rgb(var(--ink));
    cursor: pointer;
    font-size: 0;
  }
  .mobile-nav summary::-webkit-details-marker { display: none; }
  .mobile-nav summary::before {
    content: "";
    width: 18px;
    height: 12px;
    background: linear-gradient(to bottom, currentColor 0 2px, transparent 2px 5px, currentColor 5px 7px, transparent 7px 10px, currentColor 10px 12px);
  }
  .mobile-nav[open] summary::before {
    background:
      linear-gradient(45deg, transparent 46%, currentColor 47% 53%, transparent 54%),
      linear-gradient(-45deg, transparent 46%, currentColor 47% 53%, transparent 54%);
  }
  .mobile-nav nav {
    position: absolute;
    top: calc(100% + 12px);
    right: 0;
    z-index: 30;
    display: grid;
    min-width: 210px;
    gap: 0;
    padding: 8px;
    border: 1px solid rgb(var(--line));
    border-radius: 14px;
    background: rgb(var(--surface));
    box-shadow: var(--shadow-lg);
  }
  .mobile-nav nav a { padding: 11px 12px; border-radius: 8px; }
  .mobile-nav nav a:hover { background: rgb(var(--sunken)); }
  .bar > .btn { margin-left: 0; padding: 9px 13px; }
  .hero { padding: 60px 0 54px; }
  .hero-grid { grid-template-columns: 1fr; gap: 34px; }
  .hero-grid > div:first-child { max-width: 680px; }
  .hero .showcase { width: min(100%, 390px); justify-self: center; }
  .live-strip { margin-top: 42px; }
  section { padding: 72px 0; }
  .product-grid { grid-template-columns: 1fr; }
  .product, .product.flip { grid-template-columns: 86px minmax(0, 1fr); }
  .product .showcase { width: 86px; max-width: 86px; }
  .platform, .processes, .industries, .principles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .closing { padding: 34px; }
}

@media (max-width: 560px) {
  .wrap { padding-inline: 16px; }
  .bar { gap: 8px; }
  .brand { gap: 8px; font-size: 18px; }
  .brand img { width: 36px; height: 36px; border-radius: 10px; }
  .bar > .btn { font-size: 12px; }
  .hero { padding-top: 44px; }
  h1 { font-size: clamp(42px, 12vw, 58px); }
  .checks { grid-template-columns: 1fr; }
  .live-strip { grid-template-columns: 1fr 1fr; gap: 9px; }
  .live-strip a { gap: 8px; padding: 10px; }
  .live-strip img { width: 34px; height: 34px; }
  .live-strip strong { font-size: 12px; }
  .live-strip span { font-size: 10px; }
  .live-dot { width: 7px; height: 7px; }
  section { padding: 60px 0; }
  .product, .product.flip { grid-template-columns: 1fr; padding: 20px; }
  .product .showcase { grid-column: 1; grid-row: auto; width: 76px; max-width: 76px; border-radius: 15px; }
  .product > div:last-child > .badge,
  .product h3,
  .product .tag { grid-column: 1; }
  .product > div:last-child > .badge { margin-top: 4px; }
  .feats { grid-template-columns: 1fr; gap: 9px; }
  .product-foot { align-items: flex-start; }
  .platform, .processes, .industries, .principles { grid-template-columns: 1fr; }
  .diagram { padding: 12px; overflow-x: auto; }
  .diagram svg.wide { min-width: 780px; }
  .closing { padding: 26px 22px; }
  .closing .cta { width: 100%; }
  .closing .btn { flex: 1 1 100%; }
  footer .wrap { align-items: flex-start; }
  footer .links { gap: 10px 16px; }
}

/* Translucent, light-catching surfaces inspired by liquid glass. */
:root {
  --glass-panel: rgba(255, 255, 255, .64);
  --glass-sheen: rgba(255, 255, 255, .74);
  --glass-edge: rgba(255, 255, 255, .82);
  --glass-shadow: 0 18px 48px rgba(37, 71, 125, .1), 0 3px 10px rgba(37, 71, 125, .05), inset 0 1px 0 rgba(255, 255, 255, .8);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --glass-panel: rgba(24, 39, 64, .62);
    --glass-sheen: rgba(197, 220, 255, .12);
    --glass-edge: rgba(207, 226, 255, .2);
    --glass-shadow: 0 18px 48px rgba(0, 0, 0, .28), 0 3px 10px rgba(0, 0, 0, .16), inset 0 1px 0 rgba(220, 237, 255, .14);
  }
}

:root[data-theme="dark"] {
  --glass-panel: rgba(24, 39, 64, .62);
  --glass-sheen: rgba(197, 220, 255, .12);
  --glass-edge: rgba(207, 226, 255, .2);
  --glass-shadow: 0 18px 48px rgba(0, 0, 0, .28), 0 3px 10px rgba(0, 0, 0, .16), inset 0 1px 0 rgba(220, 237, 255, .14);
}

body {
  background:
    radial-gradient(ellipse at 9% 9%, rgba(116, 173, 255, .14), transparent 34rem),
    radial-gradient(ellipse at 92% 23%, rgba(110, 220, 222, .12), transparent 32rem),
    radial-gradient(ellipse at 76% 75%, rgba(158, 143, 255, .1), transparent 36rem),
    rgb(var(--bg));
}
.alt { background: rgb(var(--surface) / .3); }
header {
  background: var(--glass-panel);
  border-bottom-color: var(--glass-edge);
  box-shadow: 0 8px 28px rgba(32, 63, 107, .06), inset 0 -1px 0 rgba(255, 255, 255, .38);
}
.hero .showcase {
  isolation: isolate;
  border-color: var(--glass-edge);
  background: var(--glass-panel);
  box-shadow: var(--glass-shadow);
}
.showcase::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  border: 1px solid rgba(255, 255, 255, .48);
  border-radius: inherit;
  background: linear-gradient(145deg, rgba(255, 255, 255, .26), transparent 28%, transparent 72%, rgba(255, 255, 255, .1));
  pointer-events: none;
}
.showcase .dots { z-index: 2; }
.live-strip a,
.product,
.tile,
.process,
.industry,
.diagram,
.tabs {
  background-color: var(--glass-panel);
  border-color: var(--glass-edge);
  box-shadow: var(--glass-shadow);
  -webkit-backdrop-filter: blur(20px) saturate(1.45);
  backdrop-filter: blur(20px) saturate(1.45);
}
.product,
.tile,
.process,
.industry,
.diagram {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.product::before,
.tile::before,
.process::before,
.industry::before,
.diagram::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 46%;
  border-radius: inherit;
  background: linear-gradient(180deg, var(--glass-sheen), transparent);
  opacity: .7;
  pointer-events: none;
  z-index: -1;
}
.product,
.tile,
.process,
.industry {
  box-shadow: var(--glass-shadow);
}
.product:hover,
.tile:hover,
.process:hover,
.industry:hover,
.live-strip a:hover {
  border-color: rgb(var(--primary) / .42);
  box-shadow: 0 22px 54px rgba(37, 71, 125, .15), 0 4px 12px rgba(37, 71, 125, .08), inset 0 1px 0 rgba(255, 255, 255, .88);
}
.product + .product { border-top-color: var(--glass-edge); }
.industry.home {
  background-color: rgb(var(--primary-soft) / .62);
  border-color: rgb(var(--primary) / .22);
}
.diagram { background-color: rgb(var(--surface) / .42); }
.tabs { border-radius: 14px; }
.tabs button[aria-selected="true"] {
  background: rgb(var(--surface) / .72);
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255, 255, 255, .7);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  backdrop-filter: blur(14px) saturate(1.4);
}
.pill {
  background: rgb(var(--primary-soft) / .56);
  border: 1px solid rgb(var(--primary) / .12);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7);
  -webkit-backdrop-filter: blur(12px) saturate(1.4);
  backdrop-filter: blur(12px) saturate(1.4);
}
.closing {
  border: 1px solid rgba(255, 255, 255, .42);
  background:
    linear-gradient(118deg, rgba(36, 91, 199, .92), rgba(8, 132, 166, .88)),
    radial-gradient(ellipse at 15% 0%, rgba(255, 255, 255, .5), transparent 50%);
  box-shadow: 0 24px 60px rgba(26, 83, 163, .22), inset 0 1px 0 rgba(255, 255, 255, .5);
}
.closing .btn-primary {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 6px 18px rgba(5, 38, 101, .16);
}
.closing .btn-secondary { -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.mobile-nav nav {
  background: var(--glass-panel);
  border-color: var(--glass-edge);
  -webkit-backdrop-filter: blur(24px) saturate(1.5);
  backdrop-filter: blur(24px) saturate(1.5);
}

@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .live-strip a,
  .product,
  .tile,
  .process,
  .industry,
  .diagram,
  .tabs,
  .mobile-nav nav {
    background-color: rgb(var(--surface));
  }
}

@media (prefers-reduced-motion: reduce) {
  .live-strip a:hover,
  .product:hover,
  .tile:hover,
  .process:hover,
  .industry:hover { transform: none; }
}

/* Homepage layout */
header {
  background: rgba(4, 18, 49, .96);
  border-bottom-color: rgba(255, 255, 255, .12);
  box-shadow: none;
}
.bar { height: 62px; }
.brand { color: #fff; }
nav a,
nav a:hover { color: rgba(255, 255, 255, .84); }
header .btn-primary {
  background: #762cf3;
  color: #fff;
  box-shadow: 0 6px 20px rgba(111, 42, 242, .32);
}
.hero {
  padding: 34px 0 0;
  overflow: hidden;
  color: #fff;
  background:
    radial-gradient(ellipse at 68% 32%, rgba(35, 112, 235, .5), transparent 35%),
    radial-gradient(ellipse at 98% 90%, rgba(123, 51, 238, .4), transparent 34%),
    linear-gradient(112deg, #071537 0%, #061b43 48%, #07183b 100%);
}
.hero::before {
  background:
    radial-gradient(ellipse at 8% 58%, rgba(40, 145, 255, .32), transparent 24%),
    linear-gradient(135deg, transparent 62%, rgba(33, 108, 237, .12));
}
.hero-grid {
  min-height: clamp(250px, 17.5vw, 330px);
  grid-template-columns: minmax(0, .84fr) minmax(0, 1.16fr);
  gap: 30px;
  align-items: center;
}
.hero-grid > div:first-child { position: relative; z-index: 3; }
.hero .pill {
  padding: 7px 14px;
  color: #fff;
  font-size: 14px;
  background: rgba(164, 186, 255, .2);
  border: 1px solid rgba(201, 216, 255, .16);
  box-shadow: none;
  text-transform: none;
  letter-spacing: 0;
}
.hero h1 {
  margin: 12px 0;
  max-width: 560px;
  color: #fff;
  font-size: clamp(36px, 4vw, 52px);
  line-height: 1.05;
  letter-spacing: -.045em;
}
.hero h1 .hl { color: #fff; }
.hero .lead {
  max-width: 460px;
  margin-bottom: 20px;
  color: rgba(239, 244, 255, .88);
  font-size: 16px;
  line-height: 1.48;
}
.hero .cta { gap: 12px; }
.hero .btn { border-radius: 999px; }
.hero .btn-primary {
  background: linear-gradient(120deg, #8b30ff, #5c36f4);
  box-shadow: 0 8px 24px rgba(115, 48, 255, .4);
}
.hero .btn-secondary {
  color: #fff;
  background: rgba(5, 18, 48, .34);
  border-color: rgba(235, 242, 255, .58);
}
.hero-visual { min-width: 0; }
.hero-suite-image {
  display: block;
  width: 100%;
  height: auto;
  mix-blend-mode: lighten;
}
.home-products,
.home-industries,
.alt {
  background: linear-gradient(110deg, rgba(207, 231, 236, .22), rgba(218, 234, 246, .14) 52%, rgba(52, 112, 190, .08));
  border: 0;
}
.home-products { padding: 34px 0 18px; }
.home-products h2,
.home-industries h2 { margin: 0 0 15px; color: #111d43; font-size: clamp(23px, 2.5vw, 30px); }
.home-products .eyebrow,
.home-industries .eyebrow { margin-bottom: 2px; color: #6d27e8; font-size: 11px; }
.home-product-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.home-product-card {
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
  padding: 9px 12px;
  color: #111d43;
  border: 1px solid #e1e6f5;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(255, 255, 255, .72), rgba(237, 241, 255, .58));
  box-shadow: 0 4px 12px rgba(29, 49, 105, .08), inset 0 1px 0 rgba(255, 255, 255, .8);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  transition: transform .18s ease, box-shadow .18s ease;
}
.home-product-card:hover { color: #111d43; text-decoration: none; transform: translateY(-2px); box-shadow: 0 10px 22px rgba(29, 49, 105, .12); }
.home-product-card img { width: 42px; height: 42px; flex: none; border-radius: 9px; object-fit: cover; }
.home-product-card span { display: grid; min-width: 0; }
.home-product-card strong { overflow: hidden; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.home-product-card small { color: #52617f; font-size: 11px; }
.home-product-card b { margin-left: auto; color: #182653; font-size: 20px; }
.home-industries { padding: 17px 0 36px; }
.home-industry-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.home-industry {
  position: relative;
  display: flex;
  min-height: 104px;
  flex-direction: column;
  justify-content: end;
  overflow: hidden;
  padding: 10px 12px;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .58);
  border-radius: 12px;
  background: #254873;
  box-shadow: 0 8px 20px rgba(25, 50, 103, .18);
}
.home-industry:hover { color: #fff; text-decoration: none; box-shadow: 0 10px 22px rgba(25, 50, 103, .2); }
.home-industry::before {
  position: absolute;
  z-index: 1;
  inset: 0;
  content: "";
  background: linear-gradient(0deg, rgba(6, 15, 37, .82), rgba(6, 15, 37, .12) 65%, transparent);
}
.home-industry img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .25s ease; }
.home-industry:hover img { transform: scale(1.05); }
.home-industry strong,
.home-industry b { position: relative; z-index: 2; }
.home-industry strong { font-size: 12px; text-shadow: 0 1px 5px rgba(0, 0, 0, .48); }
.home-industry b { position: absolute; right: 12px; bottom: 8px; font-size: 16px; }
.closing { background: linear-gradient(110deg, #4a12b9, #5816c9 55%, #3b0f9f); }

@media (max-width: 960px) {
  .hero-grid { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 16px; }
  .hero-visual { height: 300px; }
  .home-product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-industry-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  header .brand { color: #fff; }
  .mobile-nav summary { color: #fff; border-color: rgba(255, 255, 255, .35); }
  .hero { padding-top: 38px; }
  .hero-grid { grid-template-columns: 1fr; gap: 20px; }
  .hero-grid > div:first-child { max-width: 540px; }
  .hero h1 { font-size: clamp(36px, 9vw, 48px); }
  .hero-visual { width: min(100%, 560px); height: 290px; justify-self: center; }
  .home-products { padding-top: 48px; }
  .platform-orbit { width: min(100%, 500px); justify-self: center; }
}
@media (max-width: 560px) {
  .hero { padding-top: 32px; }
  .hero .btn { padding: 10px 14px; font-size: 13px; }
  .hero-visual { height: 248px; transform: scale(.96); transform-origin: top center; margin-bottom: -9px; }
  .hero-erp { width: 118px; height: 103px; left: 20%; top: 32%; }
  .hero-product { width: 76px; height: 70px; font-size: 10px; }
  .hero-proc { width: 98px; height: 62px; }
  .dashboard-stack { width: 45%; right: -2%; }
  .home-product-grid { grid-template-columns: 1fr; gap: 8px; }
  .home-product-card { padding: 8px 10px; }
  .home-industry-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .home-industry { min-height: 82px; }
  .platform-hub { left: 33%; width: 105px; }
  .node-plm { left: 36%; }
  .node-erp { left: 11%; }
  .node-mes { left: 58%; }
  .node-proc { left: 62%; }
}
@media (prefers-reduced-motion: reduce) {
  .home-product-card { transition: none; }
  .home-product-card:hover { transform: none; }
}

/* Make the hero glass finish more expressive while keeping the brand artwork clear. */
.hero {
  isolation: isolate;
  background:
    radial-gradient(ellipse at 78% 24%, rgba(87, 181, 255, .16), transparent 34rem),
    radial-gradient(ellipse at 92% 70%, rgba(118, 230, 222, .12), transparent 28rem);
}
.hero::before {
  background:
    radial-gradient(ellipse at 78% 34%, rgba(61, 138, 241, .14), transparent 42%),
    radial-gradient(ellipse at 90% 75%, rgba(31, 188, 201, .1), transparent 34%);
}
.hero .showcase {
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .82);
  background:
    radial-gradient(ellipse at 18% 12%, rgba(255, 255, 255, .96), transparent 38%),
    radial-gradient(ellipse at 88% 84%, rgba(109, 231, 236, .62), transparent 44%),
    linear-gradient(145deg, #8cbcff 0%, #d2e8ff 46%, #8ddfe3 100%);
  box-shadow:
    0 34px 86px rgba(34, 105, 198, .22),
    0 12px 30px rgba(22, 72, 143, .12),
    inset 0 2px 0 rgba(255, 255, 255, .96),
    inset 0 -2px 0 rgba(255, 255, 255, .52);
}
.hero .showcase::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 3px;
  border: 1px solid rgba(255, 255, 255, .52);
  border-radius: inherit;
  background:
    linear-gradient(128deg, rgba(255, 255, 255, .42), transparent 23% 68%, rgba(255, 255, 255, .18)),
    radial-gradient(ellipse at 12% 0%, rgba(255, 255, 255, .48), transparent 38%);
  pointer-events: none;
}
.hero .showcase::after {
  inset: 0;
  border-color: rgba(255, 255, 255, .66);
  background:
    linear-gradient(160deg, rgba(255, 255, 255, .17), transparent 27% 74%, rgba(53, 142, 226, .12)),
    linear-gradient(90deg, transparent 0 35%, rgba(255, 255, 255, .08) 49%, transparent 64%);
}
.hero .showcase img {
  filter: saturate(1.08) contrast(1.02);
}
.hero .showcase .dots button {
  background: rgba(255, 255, 255, .72);
  box-shadow: 0 1px 5px rgba(20, 53, 100, .25);
}
.hero .showcase .dots button[aria-current="true"] {
  background: #fff;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .45), 0 2px 10px rgba(20, 53, 100, .24);
}
.live-strip a,
.product,
.tile,
.process,
.industry {
  border-color: rgba(255, 255, 255, .78);
  background-image:
    linear-gradient(145deg, rgba(255, 255, 255, .12), transparent 42%),
    linear-gradient(180deg, rgba(255, 255, 255, .08), transparent);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .hero .showcase {
    border-color: rgba(210, 230, 255, .38);
    background:
      radial-gradient(ellipse at 16% 12%, rgba(133, 190, 255, .52), transparent 40%),
      radial-gradient(ellipse at 88% 84%, rgba(54, 203, 213, .5), transparent 44%),
      linear-gradient(145deg, #183d70 0%, #254e79 46%, #14656d 100%);
  }
  :root:not([data-theme="light"]) .hero .showcase::before {
    border-color: rgba(225, 240, 255, .24);
  }
  :root:not([data-theme="light"]) .live-strip a,
  :root:not([data-theme="light"]) .product,
  :root:not([data-theme="light"]) .tile,
  :root:not([data-theme="light"]) .process,
  :root:not([data-theme="light"]) .industry {
    border-color: rgba(204, 225, 255, .14);
  }
}
:root[data-theme="dark"] .hero .showcase {
  border-color: rgba(210, 230, 255, .38);
  background:
    radial-gradient(ellipse at 16% 12%, rgba(133, 190, 255, .52), transparent 40%),
    radial-gradient(ellipse at 88% 84%, rgba(54, 203, 213, .5), transparent 44%),
    linear-gradient(145deg, #183d70 0%, #254e79 46%, #14656d 100%);
}
:root[data-theme="dark"] .hero .showcase::before { border-color: rgba(225, 240, 255, .24); }

@media (prefers-reduced-motion: reduce) {
  .hero .showcase::before,
  .hero .showcase::after { transition: none; }
}

.hero {
  color: #f5f8ff;
  background:
    radial-gradient(ellipse at 9% 8%, rgba(84, 191, 225, .5), transparent 34rem),
    radial-gradient(ellipse at 68% 32%, rgba(38, 112, 225, .65), transparent 38rem),
    radial-gradient(ellipse at 95% 100%, rgba(20, 163, 183, .28), transparent 34rem),
    linear-gradient(130deg, #07162f 0%, #092555 48%, #07345b 100%);
}
.hero::before {
  opacity: .8;
  background:
    radial-gradient(ellipse at 20% 85%, rgba(57, 134, 220, .22), transparent 32%),
    linear-gradient(122deg, transparent 26%, rgba(121, 206, 255, .08) 49%, transparent 64%);
}
.hero h1 { color: #fff; }
.hero h1 .hl { color: #8ce8f1; }
.hero .lead { color: rgba(235, 243, 255, .78); }
.hero .checks li { color: rgba(235, 243, 255, .84); }
.hero .checks svg { color: #80e5c4; }
.hero .pill {
  color: #d7f8ff;
  background: rgba(161, 213, 255, .12);
  border-color: rgba(206, 235, 255, .24);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 8px 22px rgba(2, 15, 41, .12);
}
.hero .btn-secondary {
  color: #f2f7ff;
  background: rgba(194, 225, 255, .1);
  border-color: rgba(216, 237, 255, .32);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  backdrop-filter: blur(16px) saturate(1.4);
}
.hero .btn-secondary:hover { background: rgba(194, 225, 255, .18); }
.hero .live-strip a {
  color: #f4f8ff;
  border-color: rgba(220, 239, 255, .2);
  background: rgba(205, 229, 255, .1);
  box-shadow: 0 12px 30px rgba(0, 9, 30, .18), inset 0 1px 0 rgba(255, 255, 255, .16);
  -webkit-backdrop-filter: blur(24px) saturate(1.5);
  backdrop-filter: blur(24px) saturate(1.5);
}
.hero .live-strip span { color: rgba(229, 241, 255, .68); }
.hero .live-strip a:hover {
  background: rgba(205, 229, 255, .16);
  border-color: rgba(174, 231, 255, .58);
}

.hero-visual {
  position: relative;
  justify-self: end;
  width: 100%;
  max-width: 590px;
  height: 500px;
  isolation: isolate;
}
.hero-visual::before,
.hero-visual::after {
  content: "";
  position: absolute;
  pointer-events: none;
  border-radius: 50%;
  filter: blur(1px);
}
.hero-visual::before {
  width: 360px;
  height: 360px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(91, 196, 255, .28), rgba(58, 130, 244, .13) 42%, transparent 72%);
}
.hero-visual::after {
  width: 200px;
  height: 200px;
  top: 10%;
  right: 3%;
  background: radial-gradient(circle, rgba(83, 235, 222, .22), transparent 70%);
}
.hero .showcase {
  position: absolute;
  z-index: 1;
  top: 48%;
  left: 50%;
  width: min(66%, 350px);
  max-width: none;
  transform: translate(-50%, -50%);
  border-color: rgba(227, 246, 255, .62);
  border-radius: 30px;
  background:
    linear-gradient(145deg, rgba(215, 240, 255, .98), rgba(121, 202, 241, .82) 52%, rgba(122, 224, 223, .86));
  box-shadow:
    0 36px 80px rgba(0, 10, 34, .34),
    0 10px 28px rgba(42, 159, 225, .2),
    inset 0 2px 0 rgba(255, 255, 255, .9),
    inset 0 -2px 0 rgba(200, 247, 255, .48);
}
.hero .showcase::before {
  inset: 3px;
  border-color: rgba(255, 255, 255, .56);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .4), transparent 32% 67%, rgba(65, 182, 232, .16)),
    radial-gradient(ellipse at 7% 0%, rgba(255, 255, 255, .6), transparent 42%);
}
.hero .showcase::after {
  border-color: rgba(223, 250, 255, .78);
  background: linear-gradient(110deg, transparent 12%, rgba(255, 255, 255, .1) 47%, transparent 72%);
}
@media (max-width: 960px) {
  .hero-visual { justify-self: center; max-width: 590px; }
}
@media (max-width: 800px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-visual { justify-self: center; }
}
@media (max-width: 560px) {
  .hero-visual { height: 410px; }
  .hero .showcase { top: 46%; width: min(68%, 290px); border-radius: 23px; }
}
@media (max-width: 360px) {
  .hero-visual { height: 380px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
}

/* Soft blue glass palette follows the supplied gradient reference. */
:root,
:root:not([data-theme="light"]),
:root[data-theme="dark"] {
  --bg: 225 238 244;
  --surface: 255 255 255;
  --sunken: 236 245 250;
  --ink: 20 42 70;
  --muted: 69 91 119;
  --line: 195 215 231;
  --primary: 26 89 199;
  --primary-fg: 255 255 255;
  --primary-soft: 220 235 252;
  --accent: 0 126 163;
  --accent-soft: 218 243 247;
  --ok: 22 118 62;
  --ok-soft: 220 243 228;
  --warn: 146 94 0;
  --warn-soft: 253 241 214;
  --plan: 92 76 160;
  --plan-soft: 236 232 250;
  --glass: rgba(255, 255, 255, .78);
  --glass-border: rgba(36, 83, 137, .13);
  --shadow: 0 3px 12px rgba(31, 76, 131, .07), 0 10px 28px rgba(31, 76, 131, .05);
  --shadow-lg: 0 20px 54px rgba(22, 65, 125, .13), 0 4px 14px rgba(22, 65, 125, .07);
  --glow: radial-gradient(62% 74% at 77% 34%, rgba(84, 146, 255, .2), transparent 72%);
  --glass-panel: rgba(255, 255, 255, .7);
  --glass-sheen: rgba(255, 255, 255, .7);
  --glass-edge: rgba(255, 255, 255, .86);
  --glass-shadow: 0 18px 48px rgba(31, 76, 131, .1), 0 3px 10px rgba(31, 76, 131, .05), inset 0 1px 0 rgba(255, 255, 255, .9);
  color-scheme: light;
}
body {
  background:
    radial-gradient(ellipse 34rem 54rem at 2% 5%, rgba(76, 184, 197, .4), transparent 82%),
    radial-gradient(ellipse 38rem 56rem at 37% 0%, rgba(111, 177, 226, .42), transparent 82%),
    radial-gradient(ellipse 38rem 58rem at 88% 8%, rgba(4, 70, 190, .84), transparent 86%),
    linear-gradient(112deg, #d2e6e5 0%, #c4dbe8 34%, #7fa8d1 58%, #2868bd 78%, #1248a8 100%);
  background-attachment: fixed;
  color: rgb(var(--ink));
}
header {
  background: rgba(245, 251, 255, .78);
  border-bottom-color: rgba(39, 82, 133, .14);
  box-shadow: 0 8px 28px rgba(32, 63, 107, .08), inset 0 -1px 0 rgba(255, 255, 255, .75);
}
.brand .logo-light { display: block; }
.brand .logo-dark { display: none; }
nav a { color: rgba(20, 49, 83, .78); }
nav a:hover { color: rgb(var(--primary)); }
.bar .btn-primary { color: rgb(var(--primary-fg)); }
.alt {
  background: linear-gradient(110deg, rgba(207, 231, 236, .22), rgba(218, 234, 246, .14) 52%, rgba(52, 112, 190, .08));
  border: 0;
}
section:not(.hero) { position: relative; }
.eyebrow { color: rgb(var(--accent)); }
.sub { color: rgb(var(--muted)); }
.product,
.tile,
.process,
.industry,
.diagram {
  background-color: rgba(255, 255, 255, .76);
  border-color: rgba(255, 255, 255, .84);
}
.tile { background-color: rgba(255, 255, 255, .78); }
.process { background-color: rgba(255, 255, 255, .76); }
.industry { background-color: rgba(255, 255, 255, .72); }
.industry.home {
  background: linear-gradient(145deg, rgba(223, 239, 255, .92), rgba(199, 230, 241, .88));
  border-color: rgba(53, 117, 190, .24);
}
.portal {
  color: rgb(var(--ink));
  background: rgba(218, 243, 247, .78);
  border-color: rgba(41, 143, 166, .2);
}
.diagram { background-color: rgba(245, 250, 254, .82); }
.tabs { background-color: rgba(226, 238, 249, .78); border-color: rgba(49, 94, 148, .14); }
.tabs button { color: rgb(var(--muted)); }
.tabs button[aria-selected="true"] {
  color: rgb(var(--ink));
  background: rgba(255, 255, 255, .88);
  box-shadow: inset 0 1px 0 #fff, 0 4px 14px rgba(28, 73, 128, .1);
}
.live-strip a {
  color: rgb(var(--ink));
  background-color: rgba(255, 255, 255, .78);
}
.live-strip span { color: rgb(var(--muted)); }
.badge.live { color: #17653d; background: rgba(205, 241, 220, .86); }
.badge.soon { color: #805100; background: rgba(255, 239, 201, .9); }
.badge.plan { color: #51418e; background: rgba(233, 227, 255, .9); }
.glyph { background: rgba(55, 119, 204, .12); color: #225da9; }
.tile.is-live { border-color: rgba(29, 143, 83, .24); }
.tile.is-live:hover,
.product:hover,
.process:hover,
.industry:hover,
.live-strip a:hover {
  border-color: rgba(38, 111, 190, .35);
  box-shadow: 0 22px 54px rgba(31, 76, 131, .15), inset 0 1px 0 rgba(255, 255, 255, .92);
}
.principle { border-top-color: rgb(var(--primary)); }
.principle p { color: rgb(var(--muted)); }
footer, footer a { color: rgba(24, 53, 87, .78); }
footer a:hover { color: rgb(var(--primary)); }
.hero { border-bottom: 1px solid rgba(255, 255, 255, .55); }
.hero .live-strip a { background: rgba(255, 255, 255, .72); }
.hero .live-strip span { color: rgb(var(--muted)); }
.hero-visual {
  height: auto;
  max-width: 500px;
}
.hero-visual::before {
  z-index: -1;
  width: 82%;
  height: 82%;
}
.hero-visual::after { z-index: -1; }
.hero .showcase {
  position: relative;
  top: auto;
  left: auto;
  width: 100%;
  max-width: 500px;
  transform: none;
  margin: 0 auto;
  border-radius: 30px;
}
.hero .showcase img { z-index: 0; }
.hero .showcase::before,
.hero .showcase::after { z-index: 1; }
.hero {
  color: rgb(var(--ink));
  background: linear-gradient(110deg, rgba(199, 229, 229, .14), rgba(174, 211, 239, .1) 54%, rgba(24, 79, 170, .08));
  border: 0;
}
.hero h1,
.hero h1 .hl { color: rgb(var(--ink)); }
.hero .lead,
.hero .checks li { color: rgb(var(--muted)); }
.hero .checks svg { color: rgb(var(--ok)); }
.hero .pill {
  color: rgb(var(--primary));
  background: rgba(255, 255, 255, .62);
  border-color: rgba(41, 98, 167, .14);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8);
}
.hero .btn-secondary {
  color: rgb(var(--ink));
  background: rgba(255, 255, 255, .72);
  border-color: rgba(41, 98, 167, .16);
}
.hero .btn-secondary:hover { background: rgba(255, 255, 255, .9); }
.hero .live-strip a {
  color: rgb(var(--ink));
  border-color: rgba(255, 255, 255, .84);
  background: rgba(255, 255, 255, .72);
  box-shadow: var(--glass-shadow);
}
.hero .live-strip span { color: rgb(var(--muted)); }
.product-grid {
  align-items: stretch;
  grid-auto-rows: 1fr;
}
.product-grid > .product {
  height: 100%;
}
@media (max-width: 1080px) {
  .product-grid { grid-auto-rows: auto; }
  .product-grid > .product { height: auto; }
}

@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .product,
  .tile,
  .process,
  .industry,
  .diagram,
  .tabs,
  .live-strip a { background-color: rgb(var(--surface)); }
}

/* Keep the new homepage styling ahead of the older general-purpose glass rules. */
header { background: rgba(4, 18, 49, .96); border-bottom-color: rgba(255, 255, 255, .12); }
.brand,
nav a,
nav a:hover { color: #fff; }
header .btn-primary { background: #762cf3; color: #fff; }
header .header-contact {
  color: #fff;
  background: rgba(255, 255, 255, .08);
  border-color: rgba(255, 255, 255, .48);
}
header .header-contact:hover {
  color: #fff;
  background: rgba(255, 255, 255, .16);
}
.hero {
  color: #fff;
  padding: clamp(26px, 2vw, 38px) 0 clamp(30px, 2.2vw, 42px);
  background:
    radial-gradient(ellipse at 74% 24%, rgba(35, 112, 235, .48), transparent 38%),
    radial-gradient(ellipse at 98% 56%, rgba(100, 47, 225, .38), transparent 36%),
    radial-gradient(ellipse at 2% 68%, rgba(29, 100, 205, .2), transparent 24%),
    linear-gradient(112deg, #071537 0%, #061b43 48%, #07183b 100%);
}
.hero::before {
  width: 100%;
  right: 0;
  z-index: 0;
  background: url("assets/nexa-hero-background-glow.png") left center / auto 100% no-repeat;
}
.hero > .wrap { position: relative; z-index: 1; }
.hero > .wrap { max-width: 1570px; padding-inline: 24px; }
.hero h1,
.hero h1 .hl { color: #fff; }
.hero h1 { font-size: clamp(40px, 3vw, 58px); }
.hero h1 { max-width: 680px; }
.hero h1 { margin: 16px 0 18px; }
.hero .lead { color: rgba(239, 244, 255, .88); }
.hero .lead { max-width: 580px; margin-bottom: 22px; font-size: clamp(17px, 1.06vw, 20px); line-height: 1.42; }
.hero .btn { padding: 15px 30px; font-size: 18px; }
.hero .pill {
  color: #fff;
  background: rgba(164, 186, 255, .2);
  border-color: rgba(201, 216, 255, .16);
  box-shadow: none;
}
.hero .btn-primary { background: linear-gradient(120deg, #8b30ff, #5c36f4); }
.hero .btn-secondary {
  color: #fff;
  background: rgba(5, 18, 48, .34);
  border-color: rgba(235, 242, 255, .58);
}
.hero-visual {
  position: relative;
  height: auto;
  max-width: none;
  isolation: isolate;
}
.hero-visual::before {
  position: absolute;
  z-index: -1;
  inset: 14% 8%;
  content: "";
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(47, 127, 245, .38), rgba(90, 50, 222, .2) 45%, transparent 76%);
  filter: blur(26px);
}
.hero-visual::after { content: none; }
.home-products h2,
.home-industries h2 { color: #111d43; }

@media (max-width: 760px) {
  .hero { padding: 38px 0 24px; }
  .hero > .wrap { padding-inline: 20px; }
  .hero-grid { min-height: 0; grid-template-columns: 1fr; gap: 20px; }
  .hero-visual { width: min(100%, 560px); justify-self: center; }
  .hero h1 { font-size: clamp(34px, 9vw, 40px); }
  .hero .lead { font-size: 16px; }
  .hero .btn { padding: 10px 14px; font-size: 13px; }
}
@media (max-width: 560px) {
  .hero > .wrap { padding-inline: 16px; }
}

.product .app-preview {
  grid-column: 1 / -1;
  min-width: 0;
  margin: 8px 0 16px;
  overflow: hidden;
  border: 1px solid rgba(47, 78, 123, .16);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 10px 24px rgba(28, 54, 95, .1);
}
.app-preview img {
  display: block;
  width: 100%;
  aspect-ratio: 1.91 / 1;
  object-fit: cover;
  object-position: center;
}
.app-preview figcaption {
  padding: 9px 13px;
  color: #536783;
  font-size: 12px;
  line-height: 1.5;
}

.contact-cta {
  padding: 17px 0;
  color: #fff;
  background: linear-gradient(108deg, #4a12b9, #641de0 55%, #3b0f9f);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18);
}
.contact-cta-inner {
  display: flex;
  align-items: center;
  gap: 24px;
}
.contact-cta h2 {
  flex: none;
  margin: 0;
  color: inherit;
  font-size: clamp(20px, 2vw, 26px);
  letter-spacing: -.035em;
}
.contact-cta p {
  flex: 1;
  margin: 0;
  padding-left: 24px;
  border-left: 1px solid rgba(255, 255, 255, .48);
  color: rgba(255, 255, 255, .9);
  font-size: 14px;
  line-height: 1.5;
}
.contact-cta-button {
  flex: none;
  padding: 11px 17px;
  color: #4a12b9;
  background: #fff;
  box-shadow: 0 5px 16px rgba(21, 7, 74, .22);
}
.contact-cta-button:hover {
  color: #3b0f9f;
  background: #f3edff;
}

.site-footer {
  padding: 44px 0 22px;
  color: rgba(236, 243, 255, .76);
  background: #071537;
  font-size: 14px;
}
.site-footer .wrap { display: block; }
.footer-main {
  display: grid;
  grid-template-columns: minmax(210px, 1.5fr) repeat(3, minmax(130px, 1fr));
  gap: 32px;
  padding-bottom: 34px;
}
.footer-logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #fff;
  font-size: 19px;
  font-weight: 700;
}
.footer-logo:hover { color: #fff; text-decoration: none; }
.footer-logo img {
  width: 36px;
  height: 36px;
  border-radius: 9px;
  background: #fff;
}
.footer-brand p {
  max-width: 250px;
  margin: 12px 0 0;
  color: rgba(236, 243, 255, .68);
  font-size: 13px;
  line-height: 1.6;
}
.footer-column {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 9px;
}
.footer-column h2 {
  margin: 0 0 5px;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0;
}
.site-footer a { color: rgba(236, 243, 255, .76); }
.site-footer a:hover { color: #fff; }
.footer-bottom {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, .14);
  color: rgba(236, 243, 255, .62);
  font-size: 12px;
}
.footer-bottom a { color: inherit; }

@media (max-width: 900px) {
  .footer-main { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .contact-cta-inner {
    align-items: flex-start;
    flex-direction: column;
    gap: 11px;
  }
  .contact-cta p {
    padding: 0;
    border: 0;
  }
  .footer-main { gap: 26px 20px; }
}
@media (max-width: 480px) {
  .footer-main { grid-template-columns: 1fr; }
  .footer-bottom { align-items: flex-start; flex-direction: column; }
}
@media (max-width: 760px) {
  .bar { gap: 6px; }
  .brand { gap: 6px; font-size: 15px; }
  .brand img { width: 32px; height: 32px; }
  .bar > .btn { padding: 8px 9px; font-size: 10px; white-space: nowrap; }
  .header-contact { margin-left: 0; }
  .mobile-nav { margin-left: 0; }
  .mobile-nav summary { width: 38px; height: 38px; }
}