:root {
  --hx-bg: #050b14;
  --hx-bg-elevated: #091321;
  --hx-surface: #0d1a2b;
  --hx-surface-strong: #112238;
  --hx-line: rgba(126, 178, 235, .18);
  --hx-line-strong: rgba(103, 184, 255, .36);
  --hx-text: #f3f7fd;
  --hx-muted: #a8bad0;
  --hx-dim: #7087a4;
  --hx-blue: #2f8fff;
  --hx-blue-light: #67c5ff;
  --hx-green: #45d4a5;
  --hx-shadow: 0 28px 80px rgba(0, 0, 0, .30);
  --hx-max: 1720px;
  --hx-gutter: clamp(22px, 4vw, 76px);
}

html { background: var(--hx-bg); }
body {
  background: var(--hx-bg) !important;
  color: var(--hx-text) !important;
}

/* Public navigation */
.hx-main-nav,
.nav,
.doc-nav {
  left: 50% !important;
  right: auto !important;
  top: 14px !important;
  width: min(calc(100% - 28px), var(--hx-max)) !important;
  transform: translateX(-50%);
  padding: 10px 12px 10px 14px !important;
  border: 1px solid var(--hx-line) !important;
  border-radius: 18px;
  background: rgba(6, 14, 25, .86) !important;
  box-shadow: 0 14px 48px rgba(0, 0, 0, .24);
  backdrop-filter: blur(18px) saturate(130%);
  -webkit-backdrop-filter: blur(18px) saturate(130%);
}

.hx-brandmark,
.nav > a:first-child,
.doc-nav > a:first-child {
  width: clamp(174px, 13.4vw, 226px);
  height: 58px;
  display: flex !important;
  align-items: center;
  flex: none;
  overflow: hidden;
  border: 1px solid rgba(93, 167, 244, .18);
  border-radius: 13px;
  background: #06101d;
}

.hx-brandmark img,
.nav > a:first-child img,
.doc-nav > a:first-child img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  filter: none !important;
}

.hx-nav-links {
  padding: 5px;
  gap: 6px !important;
  border: 1px solid rgba(123, 169, 222, .13);
  border-radius: 13px;
  background: rgba(11, 25, 43, .76);
}

.hx-nav-links > a,
.hx-nav-links .hx-dd-trigger {
  min-height: 39px;
  padding: 0 14px;
  display: inline-flex;
  align-items: center;
  border-radius: 9px;
  color: var(--hx-muted) !important;
}

.hx-nav-links > a:hover,
.hx-nav-links .hx-dd-trigger:hover {
  color: var(--hx-text) !important;
  background: rgba(74, 144, 220, .13);
}

.hx-dd-menu {
  background: rgba(8, 19, 33, .97) !important;
  border-color: var(--hx-line-strong) !important;
  box-shadow: var(--hx-shadow) !important;
}

/* Homepage layout and ultrawide support */
#top,
#services,
#products,
#partners,
#contact,
#why > div,
footer > div {
  width: 100%;
  max-width: var(--hx-max) !important;
  padding-left: var(--hx-gutter) !important;
  padding-right: var(--hx-gutter) !important;
}

[data-dcref="rootRef"] {
  background:
    radial-gradient(900px 620px at 74% 8%, rgba(31, 121, 219, .17), transparent 70%),
    radial-gradient(780px 560px at 4% 38%, rgba(28, 78, 145, .12), transparent 72%),
    linear-gradient(180deg, #050b14, #08111d 42%, #050b14) !important;
}

.hx-hero {
  grid-template-columns: minmax(0, .9fr) minmax(430px, 1.1fr) !important;
  gap: clamp(40px, 4vw, 88px) !important;
  min-height: min(940px, 100vh) !important;
  padding-top: clamp(150px, 18vh, 210px) !important;
}

.hx-hero-copy { max-width: 760px; }
.hx-hero-h1 {
  font-size: clamp(46px, 4.2vw, 78px) !important;
  line-height: 1.01 !important;
  white-space: normal !important;
  letter-spacing: -.035em !important;
}

.hx-hero-copy > p {
  max-width: 650px !important;
  font-size: clamp(17px, 1.2vw, 20px) !important;
  color: var(--hx-muted) !important;
}

.hx-hero-visual {
  position: relative;
  min-height: 520px;
  display: grid;
  place-items: center;
  isolation: isolate;
}

.hx-hero-image {
  position: relative;
  width: 100%;
  aspect-ratio: 1915 / 821;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--hx-line-strong);
  border-radius: 22px;
  background: #071426;
  box-shadow: 0 34px 90px rgba(0, 0, 0, .38), inset 0 1px rgba(255, 255, 255, .06);
}
.hx-hero-image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(4, 12, 23, .38), transparent 38%), linear-gradient(0deg, rgba(4, 12, 23, .72), transparent 44%);
  pointer-events: none;
}
.hx-hero-image img { width: 100%; height: 100%; display: block; object-fit: cover; }
.hx-hero-image figcaption {
  position: absolute;
  left: 22px;
  right: 22px;
  bottom: 20px;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  color: #dcedff;
}
.hx-hero-image figcaption span { font: 600 10px/1.4 'IBM Plex Mono', monospace; letter-spacing: .14em; color: #8dcfff; }
.hx-hero-image figcaption i { display: inline-block; width: 7px; height: 7px; margin-right: 7px; border-radius: 50%; background: var(--hx-green); box-shadow: 0 0 12px var(--hx-green); }
.hx-hero-image figcaption strong { max-width: 210px; text-align: right; font: 600 15px/1.3 'Space Grotesk', sans-serif; }

.hx-hero-visual::before {
  content: "";
  position: absolute;
  width: min(660px, 44vw);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(45, 143, 255, .20), rgba(45, 143, 255, .04) 44%, transparent 70%);
  filter: blur(2px);
  z-index: -2;
}

.hx-orbit {
  position: absolute;
  width: min(480px, 34vw);
  aspect-ratio: 1;
  border: 1px solid rgba(83, 171, 255, .22);
  border-radius: 50%;
  box-shadow: 0 0 0 54px rgba(47, 143, 255, .025), 0 0 0 108px rgba(47, 143, 255, .018);
}

.hx-orbit::before,
.hx-orbit::after {
  content: "";
  position: absolute;
  width: 10px;
  height: 10px;
  border: 2px solid #a8dcff;
  border-radius: 50%;
  background: #167ef4;
  box-shadow: 0 0 20px #2f8fff;
}
.hx-orbit::before { top: 14%; right: 12%; }
.hx-orbit::after { bottom: 18%; left: 8%; }

.hx-command-card {
  width: min(520px, 38vw);
  padding: 28px;
  border: 1px solid var(--hx-line-strong);
  border-radius: 20px;
  background: linear-gradient(155deg, rgba(17, 38, 64, .96), rgba(7, 17, 30, .96));
  box-shadow: 0 34px 90px rgba(0, 0, 0, .46), inset 0 1px rgba(255, 255, 255, .04);
  transform: perspective(1000px) rotateY(-4deg) rotateX(2deg);
}

.hx-command-top,
.hx-command-stat {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.hx-command-label {
  font: 600 11px/1.4 'IBM Plex Mono', monospace;
  letter-spacing: .16em;
  color: #80b9ed;
}

.hx-command-status {
  padding: 6px 10px;
  border: 1px solid rgba(69, 212, 165, .28);
  border-radius: 999px;
  color: #80edc9;
  background: rgba(69, 212, 165, .08);
  font: 600 10px/1 'IBM Plex Mono', monospace;
}

.hx-command-score {
  margin: 32px 0 22px;
  font: 700 clamp(54px, 5vw, 78px)/.92 'Space Grotesk', sans-serif;
  letter-spacing: -.05em;
  color: var(--hx-text);
}
.hx-command-score small { font-size: 16px; letter-spacing: 0; color: var(--hx-muted); }

.hx-command-bars { display: grid; gap: 12px; }
.hx-command-stat { font-size: 13px; color: var(--hx-muted); }
.hx-command-track { height: 5px; border-radius: 9px; overflow: hidden; background: rgba(151, 181, 216, .12); }
.hx-command-track span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #287eff, #69c9ff); }

.hx-card,
#products a,
#partners > a,
#why [data-reveal-delay] {
  border-color: var(--hx-line) !important;
  background: linear-gradient(155deg, rgba(17, 34, 56, .90), rgba(8, 18, 31, .94)) !important;
  border-radius: 14px !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, .025);
}

.hx-card { padding: 0 30px 34px !important; }
.hx-service-media {
  position: relative;
  height: 178px;
  margin: 0 -30px 25px;
  overflow: hidden;
  background: #071426;
  border-bottom: 1px solid var(--hx-line);
}
.hx-service-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(8, 18, 31, .88), transparent 58%), linear-gradient(90deg, rgba(8, 18, 31, .18), transparent 48%);
}
.hx-service-media img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: 62% center; transition: transform .45s ease; }
.hx-card:hover .hx-service-media img { transform: scale(1.035); }
.hx-media-light img { filter: brightness(.74) saturate(.88) contrast(1.05); object-position: 68% center; }

.hx-stakes {
  background:
    linear-gradient(90deg, rgba(4, 11, 21, .78), rgba(4, 11, 21, .65) 50%, rgba(4, 11, 21, .78)),
    url('/assets/hexarion-shield-network.webp') center / cover no-repeat !important;
}
.hx-stakes > div:first-child { background: linear-gradient(180deg, rgba(5, 12, 23, .22), rgba(5, 12, 23, .72)) !important; }
.hx-stakes h2 { text-shadow: 0 10px 40px rgba(0, 0, 0, .7); }
.hx-stakes p { color: #c2d4e9 !important; text-shadow: 0 2px 18px rgba(0, 0, 0, .82); }

.hx-products-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  align-items: stretch;
}
.hx-products-grid > a { height: 100%; }
.hx-products-grid > a > div:first-child { height: 230px !important; }

input, textarea, select {
  color-scheme: dark;
}

/* Branded static error states */
.hx-error-page {
  min-height: 100vh;
  padding: 128px 22px 54px;
  display: grid;
  place-items: center;
  background:
    radial-gradient(760px 520px at 50% 14%, rgba(47, 143, 255, .16), transparent 70%),
    var(--hx-bg);
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
}
.hx-error-nav {
  position: fixed;
  top: 14px;
  left: 50%;
  z-index: 3;
  transform: translateX(-50%);
  width: min(calc(100% - 28px), var(--hx-max));
  padding: 10px 12px;
  border: 1px solid var(--hx-line);
  border-radius: 18px;
  background: rgba(6, 14, 25, .90);
}
.hx-error-nav a { width: 226px; height: 58px; display: flex; overflow: hidden; border-radius: 13px; }
.hx-error-nav img { width: 100%; height: 100%; object-fit: cover; }
.hx-error-card {
  width: min(720px, 100%);
  padding: clamp(30px, 5vw, 54px);
  border: 1px solid var(--hx-line-strong);
  border-radius: 18px;
  background: linear-gradient(155deg, rgba(17, 38, 64, .97), rgba(7, 17, 30, .98));
  box-shadow: var(--hx-shadow);
  text-align: center;
}
.hx-error-code { font: 700 clamp(68px, 12vw, 132px)/.9 'Space Grotesk', sans-serif; letter-spacing: -.07em; color: #70c8ff; }
.hx-error-card h1 { margin: 20px 0 12px; color: var(--hx-text); font: 700 clamp(26px, 4vw, 40px)/1.1 'Space Grotesk', sans-serif; }
.hx-error-card p { max-width: 540px; margin: 0 auto 26px; color: var(--hx-muted); line-height: 1.6; }
.hx-error-actions { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; }
.hx-error-actions a { min-height: 42px; display: inline-flex; align-items: center; justify-content: center; padding: 10px 17px; border-radius: 10px; border: 1px solid var(--hx-line-strong); color: #041729; background: linear-gradient(180deg, #6cc9ff, #2f8fff); text-decoration: none; }
.hx-error-actions a:last-child { color: #d8e7f8; background: rgba(17, 35, 58, .72); border-color: var(--hx-line); }

/* Product and documentation pages */
.wrap, .foot, .doc-foot { max-width: var(--hx-max) !important; padding-left: var(--hx-gutter) !important; padding-right: var(--hx-gutter) !important; }
.hero { min-height: min(860px, 100vh) !important; padding-top: 148px !important; gap: clamp(42px, 6vw, 108px) !important; }
.hero .panel,
.card,
.metric,
.step,
.doc-card,
.doc-note,
.doc-tablewrap,
.doc-diagram {
  border-color: var(--hx-line) !important;
  background: linear-gradient(155deg, rgba(17, 34, 56, .92), rgba(8, 18, 31, .95)) !important;
  box-shadow: none !important;
}
.doc-shell { max-width: var(--hx-max) !important; padding-left: var(--hx-gutter) !important; padding-right: var(--hx-gutter) !important; }
.doc-toc { border-color: var(--hx-line) !important; background: rgba(11, 25, 43, .88) !important; }

@media (min-width: 1760px) {
  .hx-grid-3 { gap: 28px !important; }
  .hx-card { padding: 0 38px 40px !important; }
  .hx-service-media { height: 210px; margin-left: -38px; margin-right: -38px; }
  .hx-products-grid { gap: 28px !important; }
  .shell { max-width: 1700px !important; }
}

@media (max-width: 1100px) {
  .hx-main-nav { width: calc(100% - 20px) !important; top: 10px !important; }
  .hx-brandmark { width: 184px; height: 54px; }
  .hx-hero { grid-template-columns: 1fr !important; }
  .hx-hero-copy { padding-top: 14px; }
  .hx-hero-visual { min-height: 430px !important; }
  .hx-command-card { width: min(520px, 86vw); }
  .hx-orbit { width: min(470px, 76vw); }
  .hx-hero-image { width: 100%; }
}

@media (max-width: 880px) {
  .hx-main-nav, .nav, .doc-nav { border-radius: 14px; }
  .hx-products-grid { grid-template-columns: 1fr !important; }
  .hx-hero-visual { min-height: 360px !important; }
  .hx-hero-image { width: 100%; }
  .hx-command-card { transform: none; padding: 22px; }
  .hx-brandmark, .nav > a:first-child, .doc-nav > a:first-child { width: 164px; height: 50px; }
}

@media (max-width: 620px) {
  :root { --hx-gutter: 18px; }
  .hx-main-nav, .nav, .doc-nav { padding: 7px !important; }
  .hx-brandmark, .nav > a:first-child, .doc-nav > a:first-child { width: 140px; height: 45px; }
  .hx-hero { padding-top: 125px !important; }
  .hx-hero-h1 { font-size: clamp(36px, 12vw, 52px) !important; }
  .hx-hero-visual { min-height: 315px !important; }
  .hx-command-score { margin-top: 24px; }
  .hx-hero-image { border-radius: 16px; }
  .hx-hero-image figcaption strong { display: none; }
  .hx-service-media { height: 205px; }
  .hx-error-nav a { width: 144px; height: 46px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}