/* ===== Design tokens (shared with QuettaWeb) ===== */
:root {
  --navy-950: #05090f;
  --navy-900: #080f1c;
  --navy-800: #0c1626;
  --navy-700: #122036;
  --navy-600: #1a2e4a;
  --steel: #6d8bad;
  --steel-light: #9fb7d3;
  --cyan: #2fd8e5;
  --cyan-strong: #17c3d6;
  --white: #ffffff;
  --off-white: #f6f9fc;
  --paper: #eef3f8;
  --ink: #0c1526;
  --muted: #55647c;
  --muted-light: #9fb0c7;
  --border-light: rgba(12, 21, 38, 0.09);
  --border-dark: rgba(255, 255, 255, 0.09);
  --shadow-soft: 0 20px 60px rgba(8, 15, 28, 0.35);
  --radius: 16px;
  --maxw: 1180px;
}

* { box-sizing: border-box; }
html { scroll-behavior: auto; }

body {
  margin: 0;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: var(--off-white);
  color: var(--ink);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }

.container {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 28px;
}

h1, h2, h3, h4 {
  margin: 0 0 .5em;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.01em;
}

h2 { font-size: clamp(1.9rem, 3.2vw, 2.6rem); max-width: 780px; }
#approach h2 { max-width: 1000px; }
#products h2 { max-width: 1120px; }
h3 { font-size: 1.5rem; }
h4 { font-size: 1.15rem; }

p { margin: 0 0 1em; }

.eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--cyan-strong);
  margin: 0 0 .9em;
}

.lead {
  font-size: 1.1rem;
  color: var(--muted);
  max-width: 680px;
}
.lead-dark { color: var(--muted-light); }

.accent-text { color: var(--cyan); }

/* ===== Background glow field ===== */
.glow-field {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: var(--off-white);
}

/* ===== Grain texture overlay ===== */
.grain-overlay {
  position: fixed;
  inset: 0;
  z-index: 500;
  pointer-events: none;
  opacity: .05;
  /* No mix-blend-mode: on a full-viewport fixed layer it forces the
     browser to repaint the blend against whatever scrolls underneath
     on every frame, which is what caused scrolling to feel like it
     sped up over some sections and stuttered over others. A plain
     translucent layer stays on its own GPU-composited layer instead. */
  transform: translateZ(0);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
}

/* ===== Buttons ===== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 26px;
  border-radius: 999px;
  font-weight: 600;
  font-size: .95rem;
  transition: transform .15s ease-out, box-shadow .2s ease, background .2s ease, border-color .2s ease;
  white-space: nowrap;
  border: none;
  cursor: pointer;
}
.btn-primary {
  background: linear-gradient(135deg, var(--cyan), var(--cyan-strong));
  color: var(--navy-950);
  box-shadow: 0 8px 30px rgba(47, 216, 229, .25);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 12px 36px rgba(47, 216, 229, .4); }
.btn-ghost {
  border: 1px solid rgba(255,255,255,.25);
  color: var(--white);
  background: rgba(255,255,255,.04);
}
.btn-ghost:hover { background: rgba(255,255,255,.1); transform: translateY(-2px); }

/* ===== Header ===== */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  background: transparent;
  transition: transform .35s ease;
}

/* The header only shows the full nav right at the top of the page
   (the hero). Scrolled past that it stays compact — logo only
   (Insights moved to its own floating nav on the right) — and stays
   that way regardless of scroll direction, rather than hiding on the
   way down. The logo's own dark/light swap is untouched by either
   state. See scroll-animations.js. Desktop only (min-width:721px
   in JS). */
.site-header.nav-compact .main-nav > a,
.site-header.nav-compact .nav-dropdown { display: none; }

/* Bottom-left floating nav that appears once the hero has scrolled
   out of view, styled as a stacked list with the current section
   picked out by a solid highlight pill (rather than just a color
   change), and hidden on narrow viewports where it would collide with
   the mobile nav drawer. */
.scroll-spy-nav {
  position: fixed;
  left: 24px;
  top: 50%;
  z-index: 90;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px 22px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-50%) translateX(-12px);
  transition: opacity .3s ease, transform .3s ease, visibility .3s ease;
  pointer-events: none;
}
.scroll-spy-nav.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(-50%) translateX(0);
  pointer-events: auto;
}
/* Mirrored variant for the Insights nav (News/Articles), pinned to
   the right instead of the left — same vertical-center position,
   sliding in from the right edge, text right-aligned to sit flush
   against it. */
.scroll-spy-nav-right {
  left: auto;
  right: 24px;
  align-items: flex-end;
  transform: translateY(-50%) translateX(12px);
}
.scroll-spy-nav-right.visible { transform: translateY(-50%) translateX(0); }

.scroll-spy-nav a {
  font-family: 'JetBrains Mono', monospace;
  font-size: .82rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: rgba(255,255,255,.85);
  white-space: nowrap;
  padding: 4px 10px;
  border-radius: 6px;
  transition: color .2s ease, background .2s ease;
}
.scroll-spy-nav a:hover { color: #fff; }
.scroll-spy-nav a.active { color: var(--navy-950); background: var(--cyan); }
/* Same content-aware adaptation as the top header (see
   scroll-animations.js): dark ink over a light section behind it,
   white over a dark one. The active pill keeps its own fixed colors
   either way, since it always has a solid cyan background. */
.scroll-spy-nav.on-light a { color: rgba(12,21,38,.92); }
.scroll-spy-nav.on-light a:hover { color: var(--cyan-strong); }
.scroll-spy-nav.on-light a.active { color: var(--navy-950); }
/* Hide both floating side navs whenever there isn't enough clear
   margin beside the centered content column for them to sit in
   without overlapping it — see the clearance check in
   scroll-animations.js (replaces what used to be a fixed max-width
   media query, which let them start crowding the content on anything
   narrower than a wide desktop but still above that fixed cutoff). */
body.floating-nav-cramped .scroll-spy-nav { display: none; }

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 78px;
  /* The rest of the site's .container caps at --maxw (1180px) so body
     copy stays readable, but the nav bar should use the full browser
     width — that shared cap left dead space on both sides of the
     logo/links instead of the bar reaching the edges. */
  max-width: none;
  padding: 0 40px;
}
.brand-logo { height: 60px; width: auto; filter: drop-shadow(0 1px 3px rgba(0,0,0,.5)); }
.brand-logo-dark { display: none; }
.brand-logo-light { display: block; }
.site-header:not(.scrolled) .brand-logo-dark {
  display: block;
  filter: brightness(0) saturate(100%);
}
.site-header:not(.scrolled) .brand-logo-light { display: none; }

.main-nav {
  display: flex;
  align-items: center;
  gap: 28px;
}
.main-nav a {
  font-size: .92rem;
  font-weight: 500;
  color: rgba(255,255,255,.82);
  transition: color .2s ease;
}
.main-nav a:hover { color: var(--cyan); }
.main-nav a.active-link { color: var(--cyan); }
/* "Liquid glass" pill — frosted, refractive, with a soft inner sheen
   and a sweep of light that glides across it on hover. */
.nav-cta {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: 10px 22px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.35);
  color: #fff !important;
  background: linear-gradient(135deg, rgba(255,255,255,.22), rgba(255,255,255,.05));
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.45),
    inset 0 -8px 12px -8px rgba(255,255,255,.15),
    0 6px 16px rgba(5,9,15,.18);
  transition: transform .25s ease, box-shadow .25s ease, background .3s ease;
}
.nav-cta::before {
  content: '';
  position: absolute;
  inset: 0 -20%;
  background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,.55) 50%, transparent 60%);
  transform: translateX(-120%);
  transition: transform .7s ease;
  pointer-events: none;
}
.nav-cta:hover {
  transform: translateY(-1px);
  background: linear-gradient(135deg, rgba(255,255,255,.3), rgba(255,255,255,.08));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.55),
    inset 0 -8px 12px -8px rgba(255,255,255,.2),
    0 10px 22px rgba(5,9,15,.22);
}
.nav-cta:hover::before { transform: translateX(120%); }

.nav-dropdown { position: relative; }
.nav-dropdown-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: inherit;
  font-size: .92rem;
  font-weight: 500;
  color: rgba(255,255,255,.82);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  transition: color .2s ease;
}
.nav-dropdown-toggle:hover,
.nav-dropdown-toggle.active-link { color: var(--cyan); }
.nav-dropdown-chevron { transition: transform .2s ease; }
.nav-dropdown.open .nav-dropdown-chevron { transform: rotate(180deg); }

/* top sits flush against the toggle (no gap) so the mouse never
   crosses dead space between button and menu while hovering across —
   a gap there closed the menu before the pointer reached it. The
   breathing room above the visible card is padding-top instead of an
   offset, which keeps it part of the hoverable box. */
.nav-dropdown-menu {
  position: absolute;
  top: 100%;
  left: 50%;
  min-width: 160px;
  padding-top: 14px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate(-50%, -6px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
  z-index: 20;
}
.nav-dropdown-menu-card {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px;
  background: rgba(10,16,28,.97);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 12px;
  box-shadow: 0 16px 32px rgba(0,0,0,.35);
}
.nav-dropdown-menu a {
  padding: 8px 14px;
  border-radius: 8px;
  font-size: .9rem;
  color: rgba(255,255,255,.82);
}
.nav-dropdown-menu a:hover { background: rgba(47,216,229,.12); color: var(--cyan); }
.nav-dropdown-menu a.active-link { color: var(--cyan); }
.nav-dropdown.open .nav-dropdown-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate(-50%, 0);
}
@media (min-width: 721px) {
  .nav-dropdown:hover .nav-dropdown-menu,
  .nav-dropdown:focus-within .nav-dropdown-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translate(-50%, 0);
  }
}

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
}
.nav-toggle span {
  width: 24px; height: 2px;
  background: #fff;
  border-radius: 2px;
  transition: transform .25s ease, opacity .25s ease;
}

/* Header adapts to whatever section currently sits behind it (see the
   scroll handler in main.js, which toggles .scrolled based on whether
   that section is .section-dark) rather than a fixed scroll distance.
   Over a light section it needs dark ink instead of the usual
   white-on-dark. Excluded when the mobile dropdown (.main-nav.open) is
   showing, since that panel always has its own dark background. */
.site-header:not(.scrolled) .main-nav:not(.open) a { color: var(--ink); }
.site-header:not(.scrolled) .main-nav:not(.open) a:hover { color: var(--cyan-strong); }
.site-header:not(.scrolled) .main-nav:not(.open) .nav-dropdown-toggle { color: var(--ink); }
.site-header:not(.scrolled) .main-nav:not(.open) .nav-dropdown-toggle:hover,
.site-header:not(.scrolled) .main-nav:not(.open) .nav-dropdown-toggle.active-link { color: var(--cyan-strong); }
/* The dropdown menu itself is always a dark floating panel, so its
   links must stay light regardless of what the header text color is
   doing over the section behind it. */
.site-header:not(.scrolled) .main-nav:not(.open) .nav-dropdown-menu a { color: rgba(255,255,255,.82); }
.site-header:not(.scrolled) .main-nav:not(.open) .nav-dropdown-menu a:hover,
.site-header:not(.scrolled) .main-nav:not(.open) .nav-dropdown-menu a.active-link { color: var(--cyan); }
.site-header:not(.scrolled) .main-nav:not(.open) .nav-cta {
  border-color: rgba(12,21,38,.16);
  color: var(--ink) !important;
  background: linear-gradient(135deg, rgba(255,255,255,.65), rgba(255,255,255,.28));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.8),
    inset 0 -8px 12px -8px rgba(12,21,38,.06),
    0 6px 16px rgba(12,21,38,.08);
}
.site-header:not(.scrolled) .main-nav:not(.open) .nav-cta::before {
  background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,.85) 50%, transparent 60%);
}
.site-header:not(.scrolled) .main-nav:not(.open) .nav-cta:hover {
  background: linear-gradient(135deg, rgba(255,255,255,.8), rgba(255,255,255,.4));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    inset 0 -8px 12px -8px rgba(12,21,38,.08),
    0 10px 22px rgba(12,21,38,.12);
}
.site-header:not(.scrolled) .nav-toggle span { background: var(--ink); }

/* ===== Hero — big condensed poster headline on a light, grain-textured ground ===== */
.hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 100vh;
  min-height: 100svh;
  background: var(--off-white);
  color: var(--ink);
  overflow: hidden;
}
.hero-flow {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}
.hero-inner { position: relative; z-index: 1; padding-top: 110px; padding-bottom: 30px; }
.hero-copy { position: relative; z-index: 1; }
.hero-headline {
  font-family: 'Anton', 'Inter', sans-serif;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  line-height: .96;
  font-size: clamp(2.8rem, 7.4vw, 5.8rem);
  max-width: 1000px;
  margin: 0 0 .35em;
  color: var(--ink);
}
#heroHeadline .word { display: inline-block; will-change: transform, opacity; }

/* Cyan spotlight that follows the cursor over the headline — a cyan
   clone of the text is masked to a soft circle centered on the mouse,
   so only the type right around the cursor tints cyan. Fades in fast
   on hover, then lingers and fades out slowly rather than snapping off.
   Visibility is driven entirely by JS (.glow-active), not CSS :hover —
   :hover is also matched by a tap on touch/hybrid devices, and with no
   real cursor to "leave", it can stay stuck lit wherever was last
   tapped. JS only ever toggles this class on genuine mouse movement
   (see main.js), so touch devices never light it at all. */
.hero-title-wrap { position: relative; }
.hero-title-glow {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin: 0;
  color: var(--cyan-strong);
  pointer-events: none;
  opacity: 0;
  -webkit-mask-image: radial-gradient(circle 150px at var(--mx, 50%) var(--my, 30%), #000 45%, transparent 100%);
  mask-image: radial-gradient(circle 150px at var(--mx, 50%) var(--my, 30%), #000 45%, transparent 100%);
  transition: opacity 1.6s ease;
}
.hero-title-glow.glow-active {
  opacity: 1;
  transition: opacity .25s ease;
}
.hero-sub {
  font-size: 1.15rem;
  color: var(--muted);
  max-width: 620px;
  margin-bottom: 2em;
}
.hero-actions { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 4em; }
/* "Liquid glass" — same frosted, refractive treatment as the Contact
   Us nav pill: a soft inner sheen plus a sweep of light on hover. */
.hero .btn-ghost {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid rgba(12,21,38,.18);
  color: var(--ink);
  background: linear-gradient(135deg, rgba(255,255,255,.65), rgba(255,255,255,.25));
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.8),
    inset 0 -8px 12px -8px rgba(12,21,38,.06),
    0 6px 16px rgba(12,21,38,.08);
  transition: transform .25s ease, box-shadow .25s ease, background .3s ease;
}
.hero .btn-ghost::before {
  content: '';
  position: absolute;
  inset: 0 -20%;
  background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,.85) 50%, transparent 60%);
  transform: translateX(-120%);
  transition: transform .7s ease;
  pointer-events: none;
}
.hero .btn-ghost:hover {
  transform: translateY(-2px);
  background: linear-gradient(135deg, rgba(255,255,255,.8), rgba(255,255,255,.38));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    inset 0 -8px 12px -8px rgba(12,21,38,.08),
    0 10px 22px rgba(12,21,38,.12);
}
.hero .btn-ghost:hover::before { transform: translateX(120%); }

/* ===== Sections =====
   Each section fills at least one full viewport — on a tall/short
   window it still reads as "one section per screen" — but min-height
   (not a fixed height) lets a section with more content than fits in
   one viewport (e.g. Products' tabs on a small phone) grow past 100vh
   instead of clipping. The flex centering keeps shorter content
   vertically centered in whatever height the section ends up at. */
.section {
  display: flex;
  align-items: center;
  min-height: 100vh;
  min-height: 100svh;
  padding: 110px 0;
  box-sizing: border-box;
}
.section > .container { width: 100%; }
.hero + .section { padding-top: 60px; }
/* News/Articles' intro section only ever holds a short eyebrow +
   title + one-line lead — full min-height:100vh (meant for
   content-rich sections) just left it as a wall of near-empty dark
   space. Size it to its own content instead. */
.updates-hero { min-height: auto; padding: 100px 0 20px; }
/* Same reasoning as .updates-hero: the news/article feed itself is a
   short, growing list, not content meant to fill a full viewport —
   the generic min-height:100vh flex-centering left a large dead gap
   above the first card whenever there were only a few of them. */
#blog, #articles { min-height: auto; padding: 30px 0 110px; }
.section-alt { background: var(--paper); }
.section-dark {
  background: linear-gradient(180deg, var(--navy-950), var(--navy-900));
  color: #fff;
}
.section-dark h2, .section-dark h3, .section-dark h4 { color: #fff; }
.section-dark .eyebrow { color: var(--cyan); }

/* ===== Split (About) ===== */
.split {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 64px;
  align-items: center;
  margin-bottom: 80px;
}
.split-media img {
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
}
.pillar-caption { color: var(--muted); font-size: .92rem; margin: 0; }

/* ===== Feature grid ===== */
.feature-grid {
  display: grid;
  gap: 28px;
}
.feature-grid.three { grid-template-columns: repeat(3, 1fr); }
.feature-card {
  background: #fff;
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
  padding: 30px 26px;
  cursor: default;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.feature-card.open {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(12,21,38,.08);
  border-color: rgba(47,216,229,.35);
  outline: none;
}
.feature-head {
  display: flex;
  align-items: center;
  gap: 16px;
}
.icon-badge {
  width: 46px; height: 46px;
  flex-shrink: 0;
  border-radius: 12px;
  background: rgba(47,216,229,.12);
  color: var(--cyan-strong);
  display: flex; align-items: center; justify-content: center;
  transition: transform .25s ease;
}
.feature-card.open .icon-badge { transform: scale(1.08); }
.icon-badge svg { width: 24px; height: 24px; }
.feature-card h3 { font-size: 1.1rem; margin: 0; }
.feature-detail {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height .35s ease, opacity .3s ease, margin-top .35s ease;
}
.feature-card.open .feature-detail {
  max-height: 100px;
  opacity: 1;
  margin-top: 12px;
}
.feature-card p { color: var(--muted); margin: 0; font-size: .95rem; }

/* ===== Approach — four equal icon cards =====
   Compute / Network / Power / Cooling as matched cards. Static —
   each card animates in independently on scroll, then just sits
   there with everything already visible. */
.approach-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin: 48px 0 40px;
}
.approach-card {
  background: linear-gradient(160deg, var(--navy-700), var(--navy-800));
  border: 1px solid rgba(47,216,229,.22);
  border-radius: var(--radius);
  padding: 30px 24px;
  text-align: center;
}
.approach-icon {
  width: 56px; height: 56px;
  margin: 0 auto 18px;
  border-radius: 50%;
  background: rgba(47,216,229,.12);
  color: var(--cyan);
  display: flex; align-items: center; justify-content: center;
}
.approach-icon svg { width: 26px; height: 26px; }
.approach-card h3 { color: #fff; font-size: 1.1rem; margin-bottom: 4px; }
.approach-kicker {
  font-family: 'JetBrains Mono', monospace;
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--cyan);
  margin: 0 0 14px;
}
.approach-desc { color: rgba(255,255,255,.72); font-size: .92rem; margin: 0 0 14px; }
.approach-deliverables {
  font-size: .82rem !important;
  color: var(--steel-light) !important;
  margin: 0 !important;
  border-top: 1px solid rgba(255,255,255,.12);
  padding-top: 12px;
}
.approach-deliverables strong { color: #fff; }

.banner-strip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  flex-wrap: wrap;
  padding: 22px;
  border-radius: 999px;
  background: rgba(47,216,229,.08);
  border: 1px solid rgba(47,216,229,.25);
  font-weight: 600;
  color: var(--cyan);
}
.banner-strip i { width: 4px; height: 4px; background: var(--cyan); border-radius: 50%; opacity: .6; }

/* ===== Solutions / platform cards ===== */
.platform-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  margin: 44px 0 28px;
}
.platform-card {
  background: linear-gradient(160deg, var(--navy-700), var(--navy-800));
  border: 1px solid rgba(47,216,229,.22);
  border-radius: var(--radius);
  padding: 40px 34px;
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.platform-card:hover {
  transform: translateY(-4px);
  border-color: rgba(47,216,229,.5);
  box-shadow: 0 16px 40px rgba(0,0,0,.3);
}
.platform-tag {
  display: inline-block;
  font-family: 'JetBrains Mono', monospace;
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--cyan);
  background: rgba(47,216,229,.14);
  padding: 5px 12px;
  border-radius: 999px;
  margin-bottom: 16px;
}
.platform-sub { color: var(--steel-light); font-weight: 500; margin-bottom: 20px; }
.kv-list { list-style: none; margin: 0 0 22px; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.kv-list li { font-size: .95rem; color: rgba(255,255,255,.82); padding-left: 0; }
.kv-list li span {
  display: block;
  font-family: 'JetBrains Mono', monospace;
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--steel-light);
  margin-bottom: 3px;
}
.platform-tagline {
  font-style: italic;
  color: var(--steel-light);
  border-top: 1px solid rgba(255,255,255,.12);
  padding-top: 18px;
  margin: 0;
}
.callout {
  background: var(--navy-950);
  color: #fff;
  border: 1px solid rgba(47,216,229,.25);
  border-radius: var(--radius);
  padding: 26px 32px;
}
.callout p { margin: 0; font-size: 1.05rem; }

/* ===== Products explorer ===== */
.product-tabs {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin: 44px 0 36px;
  border-bottom: 1px solid var(--border-light);
  padding-bottom: 0;
}
.product-tab {
  background: none;
  border: none;
  padding: 14px 6px;
  margin-right: 20px;
  font-size: 1rem;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  position: relative;
  transition: color .2s ease;
}
.product-tab .tab-sub {
  display: block;
  font-size: .74rem;
  font-weight: 500;
  color: var(--muted);
  font-family: 'JetBrains Mono', monospace;
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-top: 2px;
}
.product-tab::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 3px;
  background: var(--cyan);
  border-radius: 3px 3px 0 0;
  transform: scaleX(0);
  transition: transform .25s ease;
}
.product-tab.active { color: var(--ink); }
.product-tab.active::after { transform: scaleX(1); }
.product-tab:hover { color: var(--ink); }

.product-panel { display: none; }
.product-panel.active {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: stretch;
  animation: panelFade .4s ease;
}
@keyframes panelFade {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
.product-media { min-height: 340px; }
.product-media img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius); box-shadow: var(--shadow-soft); }
/* VasEdge's copy column (spec table + toggle) is much taller than its
   photo needs to be — left to stretch with align-items:stretch, the
   image gets cropped into an overly tall, zoomed-in sliver. Cap it
   and stop it stretching, so it keeps a natural crop instead. */
#panel-vasedge .product-media { align-self: start; max-height: 400px; }
#edgeImage { transition: opacity .2s ease; }
#edgeImage.swap { opacity: 0; }
#vasrackImage { transition: opacity .2s ease; }
#vasrackImage.swap { opacity: 0; }

.product-tag {
  font-family: 'JetBrains Mono', monospace;
  font-size: .78rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--cyan-strong);
  margin-bottom: 10px;
}
.product-desc { color: var(--muted); }
.spec-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 20px; }
.spec-chips span {
  font-size: .82rem;
  font-weight: 500;
  background: var(--paper);
  border: 1px solid var(--border-light);
  padding: 7px 14px;
  border-radius: 999px;
  color: var(--ink);
}
.product-takeaway {
  font-size: .95rem;
  color: var(--steel);
  border-left: 3px solid var(--cyan);
  padding-left: 14px;
  margin-top: 20px;
}

.spec-table {
  display: grid;
  gap: 10px;
  margin-bottom: 20px;
}
.spec-table > div {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 12px;
  font-size: .92rem;
  padding: 10px 0;
  border-top: 1px solid var(--border-light);
}
.spec-table > div span:first-child {
  font-family: 'JetBrains Mono', monospace;
  font-size: .74rem;
  text-transform: uppercase;
  color: var(--muted);
  letter-spacing: .04em;
}
.spec-table > div span:last-child {
  color: var(--ink);
  transition: opacity .15s ease;
}
.spec-table > div span:last-child.swap { opacity: 0; }
.pill-list { display: flex; flex-wrap: wrap; gap: 8px; }
.pill-list span {
  font-size: .78rem;
  font-weight: 600;
  color: var(--navy-950);
  background: linear-gradient(135deg, rgba(47,216,229,.35), rgba(47,216,229,.15));
  padding: 6px 13px;
  border-radius: 999px;
}

/* Segmented toggle (VasEdge i8/i16) */
.segmented {
  display: inline-flex;
  background: var(--paper);
  border: 1px solid var(--border-light);
  border-radius: 999px;
  padding: 4px;
  margin-bottom: 20px;
  gap: 4px;
}
.segmented button {
  background: none;
  border: none;
  padding: 8px 22px;
  border-radius: 999px;
  font-weight: 600;
  font-size: .88rem;
  color: var(--muted);
  cursor: pointer;
  transition: background .2s ease, color .2s ease;
}
.segmented button.active {
  background: var(--navy-950);
  color: #fff;
}
.edge-spec-table {
  display: grid;
  gap: 0;
  border: 1px solid var(--border-light);
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 20px;
}
.edge-spec-table > div {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 12px;
  padding: 12px 16px;
  font-size: .92rem;
  border-top: 1px solid var(--border-light);
}
.edge-spec-table > div:first-child { border-top: none; }
.edge-spec-table > div:nth-child(even) { background: var(--paper); }
.edge-spec-table > div span:first-child {
  font-family: 'JetBrains Mono', monospace;
  font-size: .72rem;
  text-transform: uppercase;
  color: var(--muted);
  letter-spacing: .04em;
}
.edge-spec-table > div span:last-child {
  font-weight: 600;
  color: var(--ink);
  transition: opacity .15s ease;
}
.edge-spec-table > div span:last-child.swap { opacity: 0; }

.usecase-block { margin-top: 20px; text-align: center; }
.usecase-block h4 { margin-bottom: 34px; }
.usecase-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 16px;
}
.usecase-grid > div {
  background: #fff;
  border: 1px solid var(--border-light);
  border-radius: 14px;
  padding: 24px 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
  font-size: .82rem;
  font-weight: 500;
  color: var(--ink);
  transition: transform .2s ease, border-color .2s ease;
}
.usecase-grid > div:hover { transform: translateY(-3px); border-color: rgba(47,216,229,.4); }
.usecase-grid svg { width: 26px; height: 26px; color: var(--cyan-strong); }

/* ===== Why us ===== */
.pull-quote {
  font-size: clamp(1.3rem, 2.4vw, 1.8rem);
  font-weight: 600;
  color: #fff;
  max-width: 820px;
  margin: 32px 0 50px;
  padding-left: 24px;
  border-left: 3px solid var(--cyan);
  font-style: normal;
}
.compare-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-bottom: 50px;
}
.compare-card {
  background: var(--navy-800);
  border: 1px solid var(--border-dark);
  border-radius: var(--radius);
  padding: 28px 24px;
  transition: transform .25s ease, border-color .25s ease;
}
.compare-card:hover { transform: translateY(-4px); border-color: rgba(47,216,229,.3); }
.compare-card p { color: rgba(255,255,255,.72); margin: 0; font-size: .95rem; }
.compare-card.highlight {
  background: linear-gradient(160deg, rgba(47,216,229,.16), var(--navy-800));
  border-color: rgba(47,216,229,.4);
}
.compare-card.highlight h4 { color: var(--cyan); }
.benchmark-note { max-width: 880px; }
.benchmark-note em { color: #fff; font-style: normal; font-weight: 600; }

/* ===== Credentials ===== */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin: 44px 0 60px;
}
.stat-card {
  background: #fff;
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
  padding: 28px 22px;
  text-align: center;
}
.stat-num {
  display: block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 2.1rem;
  font-weight: 700;
  color: var(--navy-950);
  margin-bottom: 8px;
}
.stat-lbl { font-size: .85rem; color: var(--muted); }

.case-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 26px;
  margin-bottom: 50px;
}
.case-card {
  background: #fff;
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
  overflow: hidden;
}
.case-header {
  padding: 32px 28px 0;
}
.case-tag {
  font-family: 'JetBrains Mono', monospace;
  font-size: .74rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--cyan-strong);
  display: block;
  margin-bottom: 10px;
}
.case-header h4 { margin-bottom: 0; }
.case-body-inner { padding: 20px 28px 32px; }
.case-body-inner p { color: var(--muted); font-size: .95rem; }
.case-goals { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.case-goals li {
  font-size: .88rem;
  font-weight: 500;
  color: var(--ink);
  padding-left: 22px;
  position: relative;
}
.case-goals li::before {
  content: '';
  position: absolute; left: 0; top: 6px;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: rgba(47,216,229,.25);
  border: 2px solid var(--cyan-strong);
}

.partner-banner {
  background: var(--navy-950);
  color: #fff;
  border-radius: var(--radius);
  padding: 38px 36px;
  margin-bottom: 50px;
}
.partner-banner .eyebrow { color: var(--cyan); margin-bottom: 10px; }
.partner-banner p:last-child { color: rgba(255,255,255,.72); margin: 0; max-width: 760px; }

.milestone-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 26px;
}
.milestone {
  border-top: 2px solid var(--cyan);
  padding-top: 16px;
}
.milestone-date {
  font-family: 'JetBrains Mono', monospace;
  font-size: .8rem;
  color: var(--muted);
  margin-bottom: 8px;
}
.milestone p:last-child { margin: 0; color: var(--ink); }
.milestone-status { color: var(--muted); font-size: .95rem; grid-column: 1 / -1; }
.milestone-link {
  display: inline-block;
  margin-top: 24px;
  font-weight: 600;
  color: var(--steel);
}
.milestone-link:hover { color: var(--cyan-strong); }

/* ===== CTA / contact ===== */
.cta-section { text-align: center; }
.cta-inner h2 { max-width: 100%; margin-left: auto; margin-right: auto; }
.cta-inner .lead { max-width: 100%; margin-left: auto; margin-right: auto; margin-bottom: 40px; }
.cta-actions { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; margin-bottom: 70px; }
.contact-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  max-width: 780px;
  margin: 0 auto;
  padding-top: 40px;
  border-top: 1px solid rgba(255,255,255,.12);
  text-align: left;
}
.contact-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--cyan);
  margin-bottom: 8px;
}
.contact-grid p { margin: 0 0 4px; color: rgba(255,255,255,.85); }
.contact-grid a:hover { color: var(--cyan); }

/* ===== Updates page ===== */
.updates-h1 {
  font-size: clamp(2.2rem, 4.2vw, 3.2rem);
  color: var(--ink);
  max-width: 720px;
}

/* Blog feed */
.blog-feed { display: flex; flex-direction: column; gap: 26px; }
.blog-feed-status { color: var(--muted); font-size: .95rem; }
.blog-card {
  background: #fff;
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
  padding: 36px;
  transition: opacity .25s ease, transform .25s ease;
}
.blog-meta { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; flex-wrap: wrap; }
.blog-tag {
  font-family: 'JetBrains Mono', monospace;
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--cyan-strong);
  background: rgba(47,216,229,.12);
  padding: 4px 11px;
  border-radius: 999px;
}
.blog-date { font-family: 'JetBrains Mono', monospace; font-size: .85rem; font-weight: 600; color: var(--ink); }
.blog-place { font-size: .85rem; color: var(--muted); }
.blog-title { font-size: 1.35rem; margin-bottom: .5em; }
.blog-body { color: var(--muted); }

.blog-card.has-image {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 28px;
  align-items: center;
}
.blog-card.has-image .blog-image {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 12px;
}
.blog-source { font-size: .82rem; color: var(--muted); margin-top: 14px; }
.blog-source a { color: var(--steel); text-decoration: underline; text-underline-offset: 2px; }
.blog-source a:hover { color: var(--cyan-strong); }

/* Long-form illustrated articles (articles.html) — a stacked list of
   horizontal preview cards (image left, text right — same shape as
   the news feed) that link to a single full article (?article=<slug>),
   rather than every article's full body living on one long page. */
.article-preview-card {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 28px;
  align-items: center;
  background: #fff;
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
  padding: 36px;
  color: inherit;
  text-decoration: none;
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.article-preview-card:hover {
  transform: translateY(-4px);
  border-color: rgba(47,216,229,.4);
  box-shadow: 0 16px 32px rgba(12,21,38,.08);
}
.article-preview-image { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 12px; display: block; }
.article-preview-body { display: flex; flex-direction: column; }
.article-preview-title { font-size: 1.1rem; margin: 0 0 8px; }
.article-preview-excerpt {
  color: var(--muted);
  font-size: .92rem;
  line-height: 1.6;
  margin-bottom: 14px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.article-preview-link { font-size: .88rem; font-weight: 600; color: var(--cyan-strong); }
.article-preview-card:hover .article-preview-link { color: var(--cyan); }

.article-back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: .9rem;
  font-weight: 600;
  color: var(--steel);
  margin-bottom: 20px;
}
.article-back-link:hover { color: var(--cyan-strong); }
.article-back-link-bottom { margin-top: 24px; margin-bottom: 0; }

/* Single full-article detail view — full-width hero instead of the
   news feed's small thumbnail, plus rich body markup. */
.article-card { padding: 0; overflow: hidden; }
.article-card .article-content-top { padding: 36px 36px 24px; }
.article-card .article-content-bottom { padding: 24px 36px 36px; }
.article-hero {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
  cursor: zoom-in;
}
.article-lead { font-size: 1.05rem; color: var(--ink); margin-bottom: 0; }
.article-body { color: var(--muted); }
.article-body h3 { color: var(--ink); font-size: 1.1rem; margin: 32px 0 12px; }
.article-body h3:first-child { margin-top: 0; }
.article-body p { margin-bottom: 14px; line-height: 1.7; }
.article-body ul { margin: 0 0 14px; padding-left: 20px; }
.article-body li { margin-bottom: 10px; line-height: 1.6; }
.article-body li strong { color: var(--ink); }
.article-body a { color: var(--steel); text-decoration: underline; text-underline-offset: 2px; }
.article-body a:hover { color: var(--cyan-strong); }
.article-usecase-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin: 18px 0 28px;
}
.article-usecase-grid img {
  width: 100%;
  border-radius: 12px;
  border: 1px solid var(--border-light);
  display: block;
  cursor: zoom-in;
}

/* ===== Zoomable images / Lightbox ===== */
.zoomable {
  cursor: zoom-in;
  transition: filter .2s ease, transform .2s ease;
}
.zoomable:hover { filter: brightness(1.04); transform: translateY(-2px); }

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 999;
  background: rgba(5, 9, 15, .93);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 56px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease;
}
.lightbox.open { opacity: 1; pointer-events: auto; }
.lightbox-img {
  max-width: 90vw;
  max-height: 88vh;
  width: auto;
  border-radius: 12px;
  box-shadow: 0 30px 90px rgba(0,0,0,.55);
  cursor: zoom-out;
}
.lightbox-close {
  position: absolute;
  top: 26px;
  right: 32px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.22);
  color: #fff;
  font-size: 1.7rem;
  line-height: 1;
  cursor: pointer;
  transition: background .2s ease;
}
.lightbox-close:hover { background: rgba(255,255,255,.18); }

/* ===== Footer ===== */
.site-footer {
  background: var(--navy-950);
  padding: 32px 0;
  border-top: 1px solid rgba(255,255,255,.08);
}
.footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
}
.footer-logo { height: 36px; opacity: .7; }
.footer-inner p { margin: 0; font-size: .82rem; color: rgba(255,255,255,.5); }

/* ===== Reveal animations ===== */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 1.3s ease, transform 1.3s ease;
}
.reveal.in-view { opacity: 1; transform: translateY(0); }

.reveal-left {
  opacity: 0;
  transform: translateX(-36px);
  transition: opacity 1.3s ease, transform 1.3s ease;
}
.reveal-left.in-view { opacity: 1; transform: translateX(0); }

.reveal-right {
  opacity: 0;
  transform: translateX(36px);
  transition: opacity 1.3s ease, transform 1.3s ease;
}
.reveal-right.in-view { opacity: 1; transform: translateX(0); }

.reveal-scale {
  opacity: 0;
  transform: scale(.88);
  transition: opacity 1.1s ease, transform 1.1s cubic-bezier(.34, 1.56, .64, 1);
}
.reveal-scale.in-view { opacity: 1; transform: scale(1); }

/* .usecase-grid > div and .compare-card each already carry their own
   hover transition on `transform`/`border-color`; without this, that
   rule's equal-or-higher specificity clobbers .reveal-scale's slow
   entrance transition (or vice versa), making hover feel sluggish or
   the entrance snap in instantly. Keep hover snappy, entrance slow. */
.usecase-grid > div.reveal-scale {
  transition: opacity 1.1s ease, transform .2s ease, border-color .2s ease;
}
.compare-card.reveal-scale {
  transition: opacity 1.1s ease, transform .25s ease, border-color .25s ease;
}

/* Cascading entrance for grid/list groups — direct children reveal
   one after another instead of popping in all at once. */
.stagger > *:nth-child(1) { transition-delay: 0s; }
.stagger > *:nth-child(2) { transition-delay: .35s; }
.stagger > *:nth-child(3) { transition-delay: .7s; }
.stagger > *:nth-child(4) { transition-delay: 1.05s; }
.stagger > *:nth-child(5) { transition-delay: 1.4s; }
.stagger > *:nth-child(6) { transition-delay: 1.75s; }

@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-left, .reveal-right, .reveal-scale {
    transition-duration: .01ms !important;
    transform: none !important;
  }
}

/* ===== Responsive ===== */
@media (max-width: 980px) {
  .split { grid-template-columns: 1fr; gap: 40px; }
  .feature-grid.three { grid-template-columns: 1fr 1fr; }
  .approach-grid { grid-template-columns: 1fr 1fr; }
  .platform-grid { grid-template-columns: 1fr; }
  .product-panel.active { grid-template-columns: 1fr; }
  .compare-grid { grid-template-columns: 1fr; }
  .stat-grid { grid-template-columns: 1fr 1fr; }
  .case-grid { grid-template-columns: 1fr; }
  .milestone-row { grid-template-columns: 1fr; }
  .usecase-grid { grid-template-columns: repeat(3, 1fr); }
  .contact-grid { grid-template-columns: 1fr; text-align: center; }
}

@media (max-width: 720px) {
  .main-nav {
    position: fixed;
    top: 78px; left: 0; right: 0;
    background: rgba(5,9,15,.97);
    backdrop-filter: blur(14px);
    flex-direction: column;
    align-items: flex-start;
    padding: 24px 28px 32px;
    gap: 18px;
    transform: translateY(-130%);
    transition: transform .3s ease;
    border-bottom: 1px solid rgba(255,255,255,.08);
  }
  .main-nav.open { transform: translateY(0); }
  .nav-toggle { display: flex; }
  .nav-cta { align-self: flex-start; }

  .nav-dropdown { width: 100%; }
  .nav-dropdown-toggle { width: 100%; justify-content: space-between; }
  .nav-dropdown-menu {
    position: static;
    min-width: 0;
    padding: 4px 0 0;
    transform: none;
    display: none;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
  .nav-dropdown.open .nav-dropdown-menu { display: flex; transform: none; }
  .nav-dropdown-menu-card {
    padding: 0 0 0 12px;
    background: none;
    border: none;
    box-shadow: none;
  }
  .nav-dropdown-menu a { padding: 6px 0; }

  .section { padding: 76px 0; }
  .blog-card.has-image { grid-template-columns: 1fr; }
  .blog-card.has-image .blog-image { aspect-ratio: 16 / 9; }
  .article-preview-card { grid-template-columns: 1fr; padding: 24px; gap: 18px; }
  .article-preview-image { aspect-ratio: 16 / 9; }
  .article-card .article-content-top { padding: 26px 26px 18px; }
  .article-card .article-content-bottom { padding: 18px 26px 26px; }
  .article-usecase-grid { grid-template-columns: 1fr; }
  .usecase-grid { grid-template-columns: repeat(2, 1fr); }
  .approach-grid { grid-template-columns: 1fr; }
  .product-tabs { gap: 4px; }
  .product-tab { margin-right: 12px; padding: 10px 4px; }
  .edge-spec-table > div { grid-template-columns: 110px 1fr; }
}