:root {
  --navy: #061a41;
  --navy-2: #092b5a;
  --ink: #091943;
  --muted: #536079;
  --line: #dbe3ee;
  --soft: #f4f8fc;
  --gold: #c77c15;
  --gold-2: #e49a25;
  --teal: #059b9a;
  --blue: #1464cf;
  --green: #139b61;
  --purple: #6c4bd9;
  --red: #dc4d4d;
  --shadow: 0 16px 40px rgba(9, 25, 67, 0.1);
  --bg: #ffffff;
  --surface: #ffffff;
  --surface-alpha: rgba(255, 255, 255, 0.92);
  --header-bg: rgba(255, 255, 255, 0.91);
  --heading: var(--navy);
  /* Shared page content width — was 1130px. Widened to match .nav's own
     1300px so the header and the content sections below it line up on the
     same side margins, and to give tightly-packed rows (like the tech
     strip) enough room to stay on one line at normal desktop widths. */
  --content-w: 1300px;
}

/* Dark theme is opt-in only (via the header toggle, persisted in
   localStorage) — the site always defaults to light regardless of the
   visitor's OS/browser preference. See script.js for the toggle logic. */
:root[data-theme="dark"] {
  --bg: #0a1220;
  --surface: #101a2c;
  --surface-alpha: rgba(16, 26, 44, 0.92);
  --header-bg: rgba(10, 18, 32, 0.86);
  --ink: #e7ecf5;
  --muted: #9aabc7;
  --line: #26385a;
  --soft: #0f1c33;
  --heading: #f3f6fb;
  --shadow: 0 16px 40px rgba(0, 0, 0, 0.55);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  color: var(--ink);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background:
    radial-gradient(circle at 20% 0%, rgba(199, 124, 21, 0.05), transparent 30rem),
    radial-gradient(circle at 80% 10%, rgba(5, 155, 154, 0.05), transparent 34rem),
    var(--bg);
  transition: background-color 0.2s ease, color 0.2s ease;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  max-width: 100%;
  display: block;
}

button,
input,
select,
textarea {
  font: inherit;
}

.container {
  width: min(var(--content-w), calc(100% - 48px));
  margin: 0 auto;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--header-bg);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(18px);
}

.nav {
  width: min(var(--content-w), calc(100% - 36px));
  min-height: 82px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 22px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 220px;
}

.logo-backplate {
  width: 62px;
  height: 62px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background:
    radial-gradient(circle at 45% 38%, rgba(255, 255, 255, 0.98) 0 42%, rgba(232, 242, 248, 0.74) 43% 62%, rgba(199, 124, 21, 0.16) 63% 100%);
  box-shadow:
    0 10px 26px rgba(9, 25, 67, 0.12),
    inset 0 0 0 1px rgba(219, 227, 238, 0.86);
  flex: 0 0 auto;
}

.brand img,
.footer-brand img {
  width: 52px;
  height: 52px;
  object-fit: contain;
  filter: drop-shadow(0 6px 10px rgba(9, 25, 67, 0.16));
}

.brand-name {
  font-size: 26px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0;
}

.brand-name span {
  color: var(--gold);
}

.nav-links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex: 1;
  font-weight: 700;
  font-size: 14px;
}

.nav-links a {
  padding: 32px 0 24px;
  border-bottom: 3px solid transparent;
  white-space: nowrap;
}

.nav-links a.active {
  color: var(--gold);
  border-bottom-color: var(--gold);
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.icon-button {
  width: 42px;
  height: 42px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink);
  display: inline-grid;
  place-items: center;
  cursor: pointer;
}

.icon-button .icon {
  width: 24px;
  height: 24px;
  margin: 0;
  border: 0;
  background: transparent;
}

.icon-button .icon svg {
  width: 22px;
  height: 22px;
}

.btn {
  min-height: 48px;
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 0 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-weight: 800;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 28px rgba(9, 25, 67, 0.14);
}

/* Icons reused inside a button (e.g. the calendar icon on "Schedule a
   Consultation") must NOT inherit the big 54px card-icon treatment —
   that circle + its bottom margin threw the icon off-center in the button. */
.btn .icon {
  width: 20px;
  height: 20px;
  margin: 0;
  border: 0;
  background: transparent;
  flex: none;
}

.btn .icon svg {
  width: 16px;
  height: 16px;
}

.btn-primary {
  background: linear-gradient(135deg, var(--navy), #071232);
  color: #fff;
}

.btn-gold {
  background: linear-gradient(135deg, #e4a13b, var(--gold));
  color: #fff;
}

.btn-outline {
  background: var(--surface);
  color: var(--ink);
  border-color: var(--line);
}

.hamburger {
  display: none;
}

.breadcrumb {
  width: min(var(--content-w), calc(100% - 48px));
  margin: 24px auto 0;
  color: var(--muted);
  font-size: 13px;
}

.hero {
  width: min(var(--content-w), calc(100% - 48px));
  margin: 46px auto 56px;
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(380px, 1.1fr);
  align-items: center;
  gap: 54px;
}

.hero.full-dark {
  display: block;
  width: 100%;
  margin-top: 0;
  padding: 58px 0;
  background:
    linear-gradient(90deg, rgba(6, 26, 65, 0.96), rgba(7, 31, 73, 0.91)),
    radial-gradient(circle at 80% 30%, rgba(0, 162, 255, 0.3), transparent 22rem);
}

.hero.full-dark .container {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(360px, 1.2fr);
  gap: 44px;
  align-items: center;
}

.hero.full-dark h1,
.hero.full-dark p,
.hero.full-dark .eyebrow {
  color: #fff;
}

.eyebrow {
  margin: 0 0 16px;
  color: var(--gold);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

h1 {
  margin-bottom: 20px;
  color: var(--heading);
  font-size: clamp(42px, 5vw, 68px);
  line-height: 1.06;
  letter-spacing: 0;
}

h1 .accent,
h2 .accent {
  color: var(--gold);
}

h2 {
  color: var(--heading);
  font-size: clamp(28px, 3vw, 40px);
  line-height: 1.14;
  margin-bottom: 12px;
  letter-spacing: 0;
}

h3 {
  color: var(--heading);
  font-size: 20px;
  line-height: 1.25;
  margin-bottom: 10px;
}

p {
  color: var(--muted);
  line-height: 1.7;
}

.lead {
  font-size: 18px;
  max-width: 640px;
}

.hero-actions,
.inline-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 28px;
}

.trust-points {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 28px;
}

.trust-point {
  display: flex;
  gap: 12px;
  align-items: center;
}

.trust-point strong {
  display: block;
  font-size: 14px;
}

.trust-point small {
  display: block;
  color: var(--muted);
  line-height: 1.45;
}

.section {
  padding: 50px 0;
}

.section.soft {
  background: linear-gradient(180deg, var(--soft), transparent);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.section-title {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 32px;
}

.section-title p {
  margin-bottom: 0;
}

.grid {
  display: grid;
  gap: 18px;
}

.grid-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.grid-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.grid-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.grid-5 {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.card {
  position: relative;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-alpha);
  box-shadow: 0 8px 28px rgba(9, 25, 67, 0.04);
}

.feature-card {
  min-height: 222px;
  padding: 28px 24px;
  text-align: center;
}

.feature-card p {
  font-size: 14px;
  margin-bottom: 18px;
}

.feature-card .more,
.article-card .more {
  color: var(--gold);
  font-weight: 900;
  font-size: 14px;
}

.icon {
  width: 54px;
  height: 54px;
  border: 1px solid var(--line);
  border-radius: 999px;
  display: inline-grid;
  place-items: center;
  color: var(--heading);
  background: linear-gradient(135deg, var(--surface), var(--soft));
  margin-bottom: 18px;
}

.icon svg {
  width: 30px;
  height: 30px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2.1;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.icon.gold {
  color: var(--gold);
  background: #fff8ed;
}

.icon.teal {
  color: var(--teal);
  background: #effdfc;
}

.icon.blue {
  color: var(--blue);
  background: #eff6ff;
}

.icon.green {
  color: var(--green);
  background: #effaf4;
}

.icon.purple {
  color: var(--purple);
  background: #f5f1ff;
}

.icon.red {
  color: var(--red);
  background: #fff2f2;
}

.stats-band {
  width: min(var(--content-w), calc(100% - 48px));
  margin: 0 auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-alpha);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  overflow: hidden;
}

.stats-band.dark {
  background:
    linear-gradient(135deg, #061a41, #082b5a),
    radial-gradient(circle at 80% 20%, rgba(5, 155, 154, 0.24), transparent 20rem);
  color: #fff;
  border-color: transparent;
}

.stat {
  min-height: 112px;
  padding: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  border-right: 1px solid var(--line);
}

.stat:last-child {
  border-right: 0;
}

.stats-band.dark .stat {
  border-right-color: rgba(255, 255, 255, 0.28);
}

.stat strong {
  display: block;
  font-size: 30px;
  line-height: 1;
  color: var(--heading);
}

.stats-band.dark .stat strong {
  color: var(--gold-2);
}

.stat > div span {
  color: var(--muted);
  font-size: 13px;
}

.stats-band.dark .stat > div span {
  color: rgba(255, 255, 255, 0.86);
}

.tech-strip,
.platform-strip,
.brand-strip {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  overflow: hidden;
}

/* .tech-strip specifically has a known, fixed item count (16) — flex-wrap's
   greedy "fit as many as will squeeze onto this row" behavior gave an
   ugly unbalanced split (12 + 4) once the list grew past what fits on one
   row at any reasonable page width. A fixed-column grid divides evenly
   instead. Column count steps down at the same breakpoints the rest of
   the site uses. */
.tech-strip {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
}

.tech-item,
.platform-item,
.brand-tile {
  flex: 1 1 100px;
  min-height: 86px;
  padding: 16px 12px;
  display: grid;
  place-items: center;
  text-align: center;
  border-right: 1px solid var(--line);
  font-weight: 800;
  color: var(--muted);
}

.tech-item:last-child,
.platform-item:last-child,
.brand-tile:last-child {
  border-right: 0;
}

.tech-logo {
  font-size: 24px;
  color: var(--heading);
}

.product-showcase {
  display: grid;
  grid-template-columns: 0.72fr 1.28fr;
  gap: 38px;
  align-items: center;
}

.dashboard {
  min-width: 0;
  max-width: 100%;
  min-height: 330px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  box-shadow: var(--shadow);
  display: grid;
  grid-template-columns: 140px minmax(0, 1fr);
  gap: 18px;
}

.product-hero-scene {
  position: relative;
  min-height: 430px;
  min-width: 0;
  display: grid;
  align-items: center;
  padding: 42px 0;
}

.product-hero-scene:before {
  content: "";
  position: absolute;
  inset: 4% 6%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 28% 30%, rgba(5, 155, 154, 0.14), transparent 13rem),
    radial-gradient(circle at 74% 70%, rgba(228, 154, 37, 0.15), transparent 12rem);
}

.product-hero-scene .dashboard {
  position: relative;
  z-index: 1;
}

.floating-product {
  position: absolute;
  z-index: 2;
  min-width: 162px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: var(--shadow);
}

.floating-product .icon {
  width: 40px;
  height: 40px;
  margin: 0 0 8px;
}

.floating-product strong,
.floating-product span {
  display: block;
}

.floating-product span {
  color: var(--muted);
  font-size: 12px;
}

.floating-product.one { left: 2%; top: 0; }
.floating-product.two { right: 3%; top: 18%; }
.floating-product.three { left: 10%; bottom: 0; }

.dash-sidebar {
  border-right: 1px solid var(--line);
  display: grid;
  align-content: start;
  gap: 10px;
  padding-right: 12px;
}

.dash-dot {
  width: 100%;
  height: 28px;
  border-radius: 6px;
  background: #f2f6fb;
}

.dash-dot.active {
  background: #e7f3ff;
}

.dash-main {
  display: grid;
  gap: 14px;
  min-width: 0;
}

.dash-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.dash-title {
  width: 45%;
  height: 20px;
  border-radius: 5px;
  background: var(--navy);
}

.dash-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: linear-gradient(135deg, #f2cf8a, #0e9c99);
}

.dash-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.dash-metric {
  min-width: 0;
  min-height: 74px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 13px;
  overflow: hidden;
}

.dash-metric small,
.dash-metric strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dash-metric strong {
  display: block;
  font-size: 22px;
  color: var(--blue);
}

.dash-table {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px;
  display: grid;
  gap: 12px;
}

.dash-row {
  height: 26px;
  border-radius: 999px;
  background: linear-gradient(90deg, #e9f6f5 0 16%, #eef3f8 16% 73%, #dcf7ec 73% 100%);
}

.hero-visual {
  position: relative;
  min-height: 370px;
  min-width: 0;
}

.photo-visual {
  position: relative;
  height: 390px;
  min-height: 370px;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: var(--shadow);
  background: var(--soft);
  /* Establishes a new stacking/compositing context, which works around a
     WebKit/Safari bug where border-radius + overflow:hidden sometimes
     fails to clip an object-fit image to the rounded corners. */
  isolation: isolate;
  transform: translateZ(0);
}

.photo-visual img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  object-fit: cover;
  border-radius: inherit;
}

.photo-visual.artwork img {
  object-position: center 42%;
}

.photo-visual.reception img {
  /* The original contact-reception-wide.png turned out to have a genuine
     alpha-transparency fade at its top and bottom edges (not just a dark
     vignette) — whatever object-position landed inside that fade showed
     the box's own background color bleeding through, looking like a flat
     empty gap. Fixed at the source: contact-reception-trimmed.png is
     cropped to the fully-opaque band and flattened onto white, so no
     object-position on it can ever expose transparency again. */
  object-position: center 25%;
}

.photo-visual.tall-focus img {
  /* Was 38% — cut the presenter's head off at the top of the frame.
     Retuned against the actual source image (team-presentation.png). */
  object-position: center 15%;
}

.photo-visual.contain {
  /* Fixed pixel heights don't work well with object-fit:contain — at any
     width other than what they were tuned for, they either waste space
     (box taller than the image needs) or force extra letterboxing (box
     shorter than the image wants). Matching the box's own aspect ratio to
     the (trimmed) source image instead means there's near-zero unused
     space at any viewport width, without separate desktop/mobile tuning.
     min-height must be cleared too — left at the base rule's 370px, it
     fights the aspect-ratio at narrow widths and forces the box WIDER
     than its own container to satisfy both at once (overflow). */
  height: auto;
  min-height: 0;
  aspect-ratio: 1024 / 1100;
}

.photo-visual.contain img {
  /* Used where cropping loses too much (industries-showcase.png has 8
     content cards spread across the full height — no single cover crop
     shows them all). Shrinks the whole image down to fit inside the box
     instead of filling it, so nothing gets cut off; the box's own --soft
     background fills the resulting letterboxed margins. */
  object-fit: contain;
  object-position: center center;
}

.logo-orbit {
  position: relative;
  min-height: 520px;
  display: grid;
  place-items: center;
}

.logo-orbit:before {
  content: "";
  position: absolute;
  inset: 6%;
  border: 1px solid #e2e8f2;
  border-radius: 50%;
  box-shadow: inset 0 0 0 38px rgba(226, 232, 242, 0.25), inset 0 0 0 75px rgba(226, 232, 242, 0.16);
}

.logo-orbit:after {
  content: "";
  position: absolute;
  width: min(420px, 78%);
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 48%, rgba(255, 255, 255, 0.95) 0 43%, rgba(244, 248, 252, 0.7) 44% 60%, rgba(228, 154, 37, 0.14) 61% 100%);
  box-shadow:
    0 30px 54px rgba(9, 25, 67, 0.16),
    inset 0 0 0 1px rgba(219, 227, 238, 0.88);
}

.logo-orbit img {
  position: relative;
  z-index: 1;
  width: min(450px, 88%);
  filter: drop-shadow(0 22px 28px rgba(9, 25, 67, 0.2));
}

.office-scene,
.streaming-scene,
.industry-scene,
.case-scene,
.career-scene,
.contact-scene,
.isometric-scene {
  min-height: 360px;
  border-radius: 8px;
  border: 1px solid var(--line);
  overflow: hidden;
  box-shadow: var(--shadow);
  background: #fff;
}

.office-scene,
.career-scene,
.contact-scene {
  position: relative;
  background:
    linear-gradient(120deg, rgba(255,255,255,0.2), rgba(255,255,255,0)),
    linear-gradient(90deg, #f2f5f8 0 28%, #dbe4ec 28% 30%, #f8fbff 30% 100%);
}

.office-scene:before,
.career-scene:before,
.contact-scene:before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, transparent 0 23%, rgba(6,26,65,0.08) 23% 24%, transparent 24% 47%, rgba(6,26,65,0.08) 47% 48%, transparent 48% 71%, rgba(6,26,65,0.08) 71% 72%, transparent 72%),
    radial-gradient(circle at 80% 20%, rgba(228, 154, 37, 0.2), transparent 14rem);
}

.wall-logo {
  position: absolute;
  left: 12%;
  top: 18%;
  width: 180px;
  height: 110px;
  display: grid;
  place-items: center;
  background: rgba(255,255,255,0.82);
  border-radius: 8px;
  border: 1px solid var(--line);
}

.wall-logo img {
  width: 96px;
  filter: drop-shadow(0 10px 14px rgba(9, 25, 67, 0.18));
}

.people {
  position: absolute;
  left: 12%;
  right: 8%;
  bottom: 34px;
  height: 120px;
  display: flex;
  align-items: flex-end;
  justify-content: space-around;
}

.person {
  width: 62px;
  height: 90px;
  border-radius: 32px 32px 8px 8px;
  background: linear-gradient(#e0b991 0 32%, #102a52 32%);
  box-shadow: 0 12px 16px rgba(9,25,67,0.14);
}

.table {
  position: absolute;
  left: 10%;
  right: 8%;
  bottom: 22px;
  height: 34px;
  background: linear-gradient(90deg, #d8a052, #f0c277);
  border-radius: 999px;
}

.screen-board {
  position: absolute;
  right: 10%;
  top: 18%;
  width: 310px;
  height: 140px;
  border-radius: 8px;
  background: #fff;
  border: 8px solid #102a52;
  display: grid;
  place-items: center;
  font-weight: 900;
  color: var(--heading);
}

.streaming-scene {
  position: relative;
  background:
    radial-gradient(circle at 78% 28%, rgba(5, 155, 154, 0.22), transparent 13rem),
    radial-gradient(circle at 22% 75%, rgba(228, 154, 37, 0.16), transparent 12rem),
    linear-gradient(135deg, #030913, #071b36 60%, #111724);
  min-height: 430px;
}

.stream-nav {
  position: absolute;
  left: 6%;
  top: 10%;
  bottom: 20%;
  width: 100px;
  display: grid;
  align-content: start;
  gap: 14px;
  color: rgba(255, 255, 255, 0.7);
  font-size: 12px;
  z-index: 2;
}

.stream-nav strong {
  color: #fff;
  font-size: 28px;
}

.stream-nav span {
  padding: 8px 10px;
  border-radius: 6px;
}

.stream-nav .active {
  color: #fff;
  background: rgba(20, 100, 207, 0.4);
  border-left: 3px solid var(--blue);
}

.tv-frame {
  position: absolute;
  left: 18%;
  top: 9%;
  width: 62%;
  height: 65%;
  border-radius: 8px;
  background: #0c1420;
  border: 12px solid #020814;
  box-shadow: 0 22px 30px rgba(0,0,0,0.32);
  padding: 22px;
}

.screen-badge {
  position: absolute;
  right: 24px;
  top: 18px;
  z-index: 2;
  min-height: 26px;
  display: inline-flex;
  align-items: center;
  padding: 0 10px;
  border-radius: 999px;
  background: rgba(228, 154, 37, 0.92);
  color: #fff;
  font-size: 11px;
  font-weight: 900;
}

.poster-grid {
  display: grid;
  grid-template-columns: 2fr repeat(4, 1fr);
  gap: 12px;
  height: 100%;
}

.poster {
  border-radius: 6px;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.12), transparent),
    linear-gradient(145deg, #14345c, #6a2134);
}

.hero-poster {
  background:
    radial-gradient(circle at 50% 28%, rgba(255, 255, 255, 0.36), transparent 4rem),
    linear-gradient(160deg, #245589, #10233e 42%, #2d1031);
}

.poster:nth-child(2n) {
  background: linear-gradient(145deg, #0e5b70, #1b224e);
}

.device-phone {
  position: absolute;
  right: 3%;
  bottom: 10%;
  width: 92px;
  height: 178px;
  border-radius: 20px;
  border: 8px solid #060b14;
  background: linear-gradient(145deg, #102242, #06101f);
  box-shadow: 0 20px 26px rgba(0,0,0,0.34);
  color: #fff;
  padding: 18px 8px;
  font-size: 11px;
  font-weight: 800;
}

.device-tablet {
  position: absolute;
  left: 2%;
  bottom: 7%;
  width: 172px;
  height: 118px;
  border-radius: 12px;
  border: 8px solid #060b14;
  background: linear-gradient(145deg, #274d7b, #06101f);
  color: #fff;
  padding: 16px;
  font-size: 12px;
  font-weight: 800;
}

.console {
  position: absolute;
  left: 38%;
  bottom: 5%;
  width: 210px;
  height: 38px;
  border-radius: 999px;
  background: #0a0e17;
  box-shadow: 0 16px 22px rgba(0,0,0,0.36);
}

.isometric-scene {
  position: relative;
  min-height: 340px;
  background:
    linear-gradient(135deg, rgba(20, 100, 207, 0.06), rgba(5, 155, 154, 0.04)),
    #fff;
}

.iso-line {
  position: absolute;
  height: 2px;
  background: #cdd8e5;
  transform: rotate(-28deg);
}

.iso-line:nth-child(1) { width: 330px; left: 18%; top: 43%; }
.iso-line:nth-child(2) { width: 250px; left: 37%; top: 57%; }
.iso-line:nth-child(3) { width: 300px; left: 26%; top: 30%; }
.iso-node {
  position: absolute;
  width: 92px;
  height: 76px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  box-shadow: var(--shadow);
  display: grid;
  place-items: center;
  color: var(--heading);
}
.iso-node:nth-of-type(4) { left: 45%; top: 27%; width: 150px; height: 104px; }
.iso-node:nth-of-type(5) { left: 18%; top: 48%; }
.iso-node:nth-of-type(6) { right: 14%; top: 50%; }
.iso-node:nth-of-type(7) { left: 36%; bottom: 12%; }
.iso-node:nth-of-type(8) { right: 28%; top: 16%; }

.industry-scene {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 1fr;
  min-height: 520px;
  background: #071a3d;
}

.industry-panel {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 24px 12px;
  color: #fff;
  font-weight: 900;
  text-align: center;
  overflow: hidden;
  border-right: 4px solid #fff;
  border-bottom: 4px solid #fff;
}

.industry-panel:nth-child(4n) {
  border-right: 0;
}

.industry-panel:nth-last-child(-n+4) {
  border-bottom: 0;
}

.industry-panel:before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,0.28), rgba(6,26,65,0.92)), var(--bg);
  background-size: cover;
}

.industry-panel span {
  position: relative;
}

.industry-panel .icon {
  width: 48px;
  height: 48px;
  margin: 0 auto 10px;
  color: #fff;
  border-color: rgba(255, 255, 255, 0.55);
  background: rgba(255, 255, 255, 0.08);
}

.industry-diagram {
  position: absolute;
  top: 18px;
  left: 50%;
  transform: translateX(-50%);
  width: 68%;
  max-width: 100px;
  aspect-ratio: 1 / 1;
  color: rgba(255, 255, 255, 0.6);
}

.case-scene {
  position: relative;
  min-height: 318px;
  padding: 28px;
  background:
    radial-gradient(circle at 82% 28%, rgba(199,124,21,0.14), transparent 10rem),
    linear-gradient(135deg, #f6f8fb, #fff);
  display: grid;
  grid-template-columns: 1fr 150px;
  gap: 20px;
  align-items: end;
}

.laptop {
  height: 230px;
  border: 12px solid #16213b;
  border-radius: 10px;
  background: #0b1424;
  padding: 18px;
  box-shadow: 0 20px 30px rgba(9,25,67,0.18);
}

.chart {
  height: 100%;
  border-radius: 8px;
  background:
    linear-gradient(160deg, transparent 45%, rgba(5,155,154,0.42) 46% 51%, transparent 52%),
    linear-gradient(25deg, transparent 55%, rgba(20,100,207,0.45) 56% 61%, transparent 62%),
    repeating-linear-gradient(0deg, rgba(255,255,255,0.07), rgba(255,255,255,0.07) 1px, transparent 1px, transparent 32px),
    #101f37;
}

.mug {
  width: 112px;
  height: 118px;
  border-radius: 8px 8px 40px 40px;
  background: #fff;
  border: 1px solid var(--line);
  display: grid;
  place-items: center;
}

.case-kpis {
  position: absolute;
  left: 54px;
  right: 190px;
  top: 28px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.case-kpis span {
  min-height: 66px;
  padding: 12px;
  border: 1px solid rgba(219, 227, 238, 0.34);
  border-radius: 8px;
  background: rgba(6, 26, 65, 0.88);
  color: rgba(255, 255, 255, 0.78);
  box-shadow: 0 12px 22px rgba(9, 25, 67, 0.12);
}

.case-kpis strong {
  display: block;
  color: #fff;
  font-size: 18px;
}

.blog-hero-scene {
  position: relative;
  min-height: 360px;
  border-radius: 8px;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 46%, rgba(6, 183, 217, 0.2), transparent 12rem),
    linear-gradient(135deg, rgba(255,255,255,0.05), rgba(255,255,255,0)),
    #061a41;
}

.blog-hero-scene:before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(255,255,255,0.08) 1px, transparent 1px),
    linear-gradient(0deg, rgba(255,255,255,0.08) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(circle at center, #000 0 38%, transparent 72%);
}

.circuit-core {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 96px;
  height: 96px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.28);
  box-shadow: 0 0 60px rgba(6, 183, 217, 0.26);
}

.circuit-core .icon {
  margin: 0;
}

.insight-node {
  position: absolute;
  min-height: 38px;
  min-width: 76px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255,255,255,0.22);
  border-radius: 999px;
  color: #fff;
  background: rgba(255,255,255,0.11);
  font-weight: 900;
}

.node-0 { left: 12%; top: 20%; }
.node-1 { right: 14%; top: 18%; }
.node-2 { left: 18%; bottom: 18%; }
.node-3 { right: 20%; bottom: 20%; }
.node-4 { left: 42%; top: 10%; }
.node-5 { left: 43%; bottom: 10%; }

.circuit-line {
  position: absolute;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(6, 183, 217, 0.85), transparent);
}

.line-one { width: 72%; left: 14%; top: 50%; }
.line-two { width: 44%; left: 28%; top: 34%; transform: rotate(28deg); }
.line-three { width: 44%; left: 28%; top: 66%; transform: rotate(-28deg); }

.mug img {
  width: 72px;
  filter: drop-shadow(0 5px 8px rgba(9, 25, 67, 0.14));
}

.quote-card {
  position: absolute;
  right: 34px;
  bottom: -38px;
  max-width: 300px;
  padding: 28px;
  background: var(--surface);
  border-radius: 8px;
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}

.split {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 36px;
  align-items: start;
}

.list-check {
  display: grid;
  gap: 13px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
  text-align: left;
}

.list-check li {
  display: flex;
  gap: 10px;
  color: var(--muted);
  text-align: left;
}

.list-check li:before {
  content: "";
  width: 18px;
  height: 18px;
  margin-top: 3px;
  border-radius: 50%;
  border: 1px solid var(--gold);
  background: radial-gradient(circle, var(--gold) 0 3px, transparent 4px);
  flex: 0 0 auto;
}

.process {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 16px;
}

.process-step {
  text-align: center;
  position: relative;
}

.process-step strong {
  color: var(--gold);
  display: block;
  margin-bottom: 4px;
}

.product-card {
  padding: 26px 22px;
  min-height: 430px;
}

.product-card .badge {
  display: inline-flex;
  min-height: 26px;
  padding: 0 10px;
  border-radius: 999px;
  align-items: center;
  color: var(--teal);
  background: #e7faf8;
  font-size: 12px;
  font-weight: 900;
  margin: 16px 0 20px;
}

.case-card,
.article-card {
  overflow: hidden;
}

.image-tile {
  min-height: 210px;
  background-image:
    linear-gradient(135deg, rgba(6,26,65,0.12), rgba(199,124,21,0.1)),
    var(--tile-img, none);
  /* Gradient tint still covers the full tile; the photo itself uses
     "contain" so it shrinks to fit fully inside the (now taller) box
     instead of being cropped to fill it. */
  background-size: cover, contain;
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
  background-color: var(--tile-bg, #eef4fb);
  position: relative;
}

.image-tile:after {
  content: "";
  position: absolute;
  inset: 30px;
  border-radius: 8px;
  background:
    linear-gradient(90deg, rgba(255,255,255,0.65), transparent),
    repeating-linear-gradient(90deg, rgba(6,26,65,0.12), rgba(6,26,65,0.12) 2px, transparent 2px, transparent 36px);
}

/* When a real photo is set via --tile-img, drop the decorative placeholder
   stripe texture — it was designed to dress up an empty color swatch, not
   to sit on top of an actual image. */
.image-tile.has-photo:after {
  display: none;
}

.case-card .body,
.article-card .body {
  padding: 22px;
}

.mini-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

.mini-stats strong {
  display: block;
  font-size: 20px;
}

.testimonial-band,
.cta-band,
.blog-subscribe {
  border-radius: 8px;
  background:
    radial-gradient(circle at 94% 35%, rgba(6, 183, 217, 0.18), transparent 15rem),
    linear-gradient(135deg, #061a41, #082b5a);
  color: #fff;
}

.testimonial-band {
  padding: 30px;
}

.testimonial-band h3,
.cta-band h2,
.cta-band p,
.blog-subscribe h3,
.blog-subscribe p {
  color: #fff;
}

.testimonial-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.testimonial {
  padding: 22px;
  border: 1px solid rgba(255,255,255,0.24);
  border-radius: 8px;
  background: rgba(255,255,255,0.04);
}

.cta-band {
  width: min(var(--content-w), calc(100% - 48px));
  margin: 24px auto;
  padding: 28px 32px;
  display: grid;
  grid-template-columns: 80px 1fr auto;
  gap: 24px;
  align-items: center;
}

.cta-band .icon {
  margin-bottom: 0;
  background: #fff;
}

.form-layout {
  display: grid;
  grid-template-columns: 1.4fr 0.8fr;
  gap: 28px;
}

.form-card,
.contact-card,
.map-card {
  padding: 28px;
}

.contact-card .icon {
  width: 34px;
  height: 34px;
  margin: 0 10px 0 0;
  vertical-align: middle;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}

.field {
  display: grid;
  gap: 8px;
}

.field.full {
  grid-column: 1 / -1;
}

label {
  font-weight: 800;
  font-size: 13px;
}

input,
select,
textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  min-height: 48px;
  padding: 0 14px;
  color: var(--ink);
  background: var(--surface);
}

textarea {
  min-height: 130px;
  padding-top: 14px;
  resize: vertical;
}

.faq-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}

/* Used on the Contact page, which only carries 3 FAQ items (trimmed down
   from 6) — a single, narrower, centered column reads better for a short
   list than a half-empty 2-column grid would. */
.faq-grid-single {
  grid-template-columns: 1fr;
  max-width: 700px;
  margin: 0 auto;
}

.faq-item {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  overflow: hidden;
}

.faq-toggle {
  width: 100%;
  border: 0;
  background: none;
  cursor: pointer;
  padding: 16px 18px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  font: inherit;
  font-weight: 800;
  color: var(--heading);
  text-align: left;
}

.faq-plus {
  flex: none;
  color: var(--gold);
  transition: transform 0.15s ease;
}

.faq-item.open .faq-plus {
  transform: rotate(45deg);
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease;
}

.faq-item.open .faq-answer {
  max-height: 240px;
}

.faq-answer p {
  padding: 0 18px 18px;
  font-weight: 400;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.6;
}

.jobs-toolbar {
  display: grid;
  grid-template-columns: 1fr 220px 220px auto;
  gap: 16px;
  margin-bottom: 16px;
}

.jobs-table {
  overflow: hidden;
}

.job-row {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr 0.7fr 0.7fr 34px;
  gap: 16px;
  align-items: center;
  padding: 18px 22px;
  border-bottom: 1px solid var(--line);
}

.job-row:last-child {
  border-bottom: 0;
}

.pill {
  display: inline-flex;
  min-height: 28px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  padding: 0 12px;
  background: #dff8ed;
  color: #08754a;
  font-weight: 900;
  font-size: 12px;
}

.blog-layout {
  display: grid;
  grid-template-columns: 1fr 290px;
  gap: 28px;
}

.blog-search {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 24px;
  align-items: center;
  margin-top: 24px;
}

.searchbox {
  position: relative;
}

.searchbox input {
  padding-right: 46px;
}

.topic-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.topic {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  padding: 0 16px;
  border-radius: 999px;
  color: #fff;
  background: rgba(255,255,255,0.14);
  border: 1px solid rgba(255,255,255,0.18);
  font-weight: 800;
}

.sidebar-stack {
  display: grid;
  gap: 22px;
}

.sidebar-card {
  padding: 24px;
}

.category-row,
.popular-row {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 13px 0;
  border-bottom: 1px solid var(--line);
  font-weight: 800;
}

.category-row:last-child,
.popular-row:last-child {
  border-bottom: 0;
}

.newsletter-row {
  display: grid;
  grid-template-columns: 1fr auto;
}

.newsletter-row input {
  border-radius: 8px 0 0 8px;
}

.newsletter-row .btn {
  border-radius: 0 8px 8px 0;
}

.footer-inner {
  background: linear-gradient(135deg, #061a41, #082d5a);
  color: #fff;
  padding: 46px 0 22px;
}

.footer-grid {
  width: min(var(--content-w), calc(100% - 48px));
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.45fr repeat(4, 1fr);
  gap: 36px;
}

.footer-brand {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 10px;
}

.footer-brand .logo-backplate {
  width: 60px;
  height: 60px;
  background:
    radial-gradient(circle at 45% 38%, rgba(255, 255, 255, 0.97) 0 42%, rgba(232, 242, 248, 0.78) 43% 61%, rgba(228, 154, 37, 0.22) 62% 100%);
}

.footer-brand strong {
  color: #fff;
  font-size: 25px;
}

.footer-brand span {
  color: var(--gold-2);
}

.site-footer p,
.site-footer a,
.footer-bottom {
  color: rgba(255,255,255,0.78);
}

.footer-list a,
.socials a {
  transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
}

.footer-list a:hover,
.footer-list a:focus-visible {
  color: #fff;
  text-decoration: underline;
}

.socials a:hover,
.socials a:focus-visible {
  color: var(--gold-2);
  border-color: var(--gold-2);
}

.site-footer h4 {
  margin: 0 0 14px;
  color: #fff;
}

.footer-list {
  display: grid;
  gap: 8px;
  font-size: 14px;
}

.socials {
  display: flex;
  gap: 10px;
  margin-top: 20px;
}

.socials a {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,0.34);
  border-radius: 50%;
  font-weight: 900;
  color: #fff;
}

.footer-bottom {
  width: min(var(--content-w), calc(100% - 48px));
  margin: 30px auto 0;
  padding-top: 20px;
  border-top: 1px solid rgba(255,255,255,0.14);
  display: flex;
  justify-content: space-between;
  gap: 20px;
  font-size: 13px;
}

@media (max-width: 1180px) {
  .tech-strip {
    grid-template-columns: repeat(4, 1fr);
  }

  .nav {
    min-height: 72px;
    justify-content: space-between;
  }

  .brand {
    min-width: 0;
  }

  .logo-backplate {
    width: 54px;
    height: 54px;
  }

  .brand img {
    width: 44px;
    height: 44px;
  }

  .brand-name {
    font-size: 22px;
  }

  .hamburger {
    display: inline-grid;
  }

  .nav-links {
    position: fixed;
    left: 18px;
    right: 18px;
    top: 78px;
    display: none;
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
    box-shadow: var(--shadow);
    grid-template-columns: repeat(2, 1fr);
    gap: 4px 20px;
  }

  .nav-links.open {
    display: grid;
  }

  .nav-links a {
    padding: 12px 0;
  }

  .nav-actions .btn {
    display: none;
  }

  .hero,
  .hero.full-dark .container,
  .product-showcase,
  .split,
  .form-layout,
  .blog-layout {
    grid-template-columns: 1fr;
  }

  .hero {
    margin-top: 30px;
  }

  .logo-orbit,
  .hero-visual {
    min-height: 360px;
  }

  .grid-5,
  .grid-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .grid-3,
  .stats-band,
  .process,
  .testimonial-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .jobs-toolbar {
    grid-template-columns: 1fr 1fr;
  }

  .job-row {
    grid-template-columns: 1fr;
  }

  .cta-band {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .cta-band .icon {
    margin: 0 auto;
  }

  .footer-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 620px) {
  .tech-strip {
    grid-template-columns: repeat(2, 1fr);
  }

  .container,
  .hero,
  .breadcrumb,
  .stats-band,
  .cta-band,
  .footer-grid,
  .footer-bottom {
    width: min(100% - 28px, var(--content-w));
  }

  .nav {
    width: calc(100% - 24px);
    gap: 10px;
  }

  .brand-name {
    font-size: 18px;
  }

  .hero {
    gap: 28px;
  }

  h1 {
    font-size: 40px;
  }

  .grid-5,
  .grid-4,
  .grid-3,
  .grid-2,
  .stats-band,
  .process,
  .testimonial-grid,
  .trust-points,
  .form-grid,
  .faq-grid,
  .jobs-toolbar,
  .footer-grid {
    grid-template-columns: 1fr;
  }

  .dashboard {
    grid-template-columns: 1fr;
  }

  .dash-sidebar {
    border-right: 0;
    border-bottom: 1px solid var(--line);
    padding-right: 0;
    padding-bottom: 12px;
  }

  .dash-metrics {
    grid-template-columns: repeat(2, 1fr);
  }

  .industry-scene {
    grid-template-columns: repeat(2, 1fr);
    min-height: 640px;
  }

  .industry-panel {
    border-right: 4px solid #fff;
    border-bottom: 4px solid #fff;
  }

  .industry-panel:nth-child(4n) {
    border-right: 4px solid #fff;
  }

  .industry-panel:nth-last-child(-n+4) {
    border-bottom: 4px solid #fff;
  }

  .industry-panel:nth-child(2n) {
    border-right: 0;
  }

  .industry-panel:nth-last-child(-n+2) {
    border-bottom: 0;
  }

  .stat {
    border-right: 0;
    border-bottom: 1px solid var(--line);
    justify-content: flex-start;
  }

  .stats-band.dark .stat {
    border-bottom-color: rgba(255,255,255,0.24);
  }

  .footer-bottom {
    flex-direction: column;
  }
}