/* ---------------------------------------------------------------------------
   codeByte — cyberpunk. Single committed visual world: every colour painted
   explicitly, twin neon accents against ink, notched geometry throughout.
   --------------------------------------------------------------------------- */
:root {
  --ground:  #02060E;
  --surface: #08131F;
  --raised:  #0D1B2B;
  --line:    #14283C;
  --line-2:  #1F3D59;

  --ink:     #E9F1F9;
  --ink-2:   #B3C6D8;
  --muted:   #6E8CA8;

  --cyan:    #5A8FBA;   /* grayer neon blue: fills, borders, glows */
  --cyan-hi: #8FB3CF;   /* grayer neon blue for text: hue 206, sat ~31% */
  --cyan-lo: #2A4A63;

  --mag:     #8FB3CF;
  --mag-lo:  #35525F;

  --notch:   14px;
  --maxw:    1240px;
}

* { box-sizing: border-box; }

body.codebyte-vanguard {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: Newsreader, ui-serif, Georgia, serif;
  font-size: 18px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}

/* Scanlines are applied per image panel (see .vg-hero-media::after), not as a
   page-wide overlay: a full-viewport veil dimmed the photographs badly, with or
   without mix-blend-mode. Texture where it reads, nowhere else. */

.codebyte-vanguard h1,
.codebyte-vanguard h2,
.codebyte-vanguard h3,
.codebyte-vanguard .display {
  font-family: Archivo, "Helvetica Neue", Arial, sans-serif;
  font-weight: 800;
  line-height: .94;
  letter-spacing: -0.024em;
  text-wrap: balance;
  margin: 0;
}
.codebyte-vanguard p { margin: 0; }
.codebyte-vanguard a { color: inherit; }

.vg-wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: 30px; }

.vg-mono, .vg-eyebrow {
  font-family: "Azeret Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11.5px; letter-spacing: .2em; text-transform: uppercase; font-weight: 500;
}
.vg-eyebrow { color: var(--cyan-hi); }
.vg-eyebrow::before { content: "[ "; color: var(--mag); }
.vg-eyebrow::after  { content: " ]"; color: var(--mag); }

.notch {
  clip-path: polygon(0 0, calc(100% - var(--notch)) 0, 100% var(--notch), 100% 100%, var(--notch) 100%, 0 calc(100% - var(--notch)));
}

/* ---------- masthead ---------- */
.vg-top {
  position: relative; z-index: 3;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding-block: 22px;
  border-bottom: 1px solid var(--line);
}
.vg-brand { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.vg-brand .dot {
  width: 9px; height: 9px; background: var(--cyan); border-radius: 50%;
  box-shadow: 0 0 12px 2px rgba(90,143,186,.85);
  animation: vg-pulse 2.6s ease-in-out infinite;
}
@keyframes vg-pulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }
/* Mark is inline SVG so it inherits crispness at any size; the wordmark is real
   text so it uses the page's Archivo rather than an SVG font fallback. */
.vg-lockup { height: 30px; width: auto; display: block; }
.vg-foot-brand .vg-lockup { height: 22px; opacity: .85; }
.vg-mark { height: 22px; width: auto; display: block; flex: none; }
.vg-word {
  font-family: Archivo, "Helvetica Neue", Arial, sans-serif;
  font-size: 22px; font-weight: 500; letter-spacing: -.03em; color: var(--ink-2);
  line-height: 1;
}
.vg-word b { font-weight: 800; color: var(--ink); }
.vg-foot-brand { display: inline-flex; align-items: center; gap: 10px; opacity: .85; }
.vg-foot-brand .vg-mark { height: 16px; }
.vg-foot-brand .vg-word { font-size: 16px; }

.vg-nav { display: flex; gap: 26px; align-items: center; }
.vg-nav a {
  font-family: "Azeret Mono", monospace; font-size: 11.5px; letter-spacing: .14em;
  text-transform: uppercase; text-decoration: none; color: var(--ink-2);
  padding-bottom: 3px; border-bottom: 1px solid transparent;
  transition: color .15s, border-color .15s, text-shadow .15s;
}
.vg-nav a:hover, .vg-nav a:focus-visible {
  color: var(--cyan-hi); border-bottom-color: var(--mag); text-shadow: 0 0 10px rgba(90,143,186,.8);
}
@media (max-width: 900px) { .vg-nav { display: none; } }

/* ---------- hero ---------- */
.vg-hero { position: relative; overflow: hidden; isolation: isolate; border-bottom: 1px solid var(--line); }
#vg-lattice { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; }
.vg-hero > .vg-wrap { position: relative; z-index: 3; }
.vg-hero::after {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background:
    radial-gradient(ellipse 60% 50% at 16% 34%, rgba(90,143,186,.16), transparent 70%),
    radial-gradient(ellipse 50% 45% at 84% 70%, rgba(143,179,207,.14), transparent 72%);
}
.vg-hero-inner { padding-block: clamp(64px, 9vw, 122px) clamp(52px, 7vw, 92px); }
.vg-hero-grid { display: grid; grid-template-columns: minmax(0,1.08fr) minmax(0,.92fr); gap: clamp(32px,5vw,68px); align-items: center; }
@media (max-width: 940px) { .vg-hero-grid { grid-template-columns: 1fr; } }

.vg-hero h1 { font-size: clamp(44px, 8vw, 106px); max-width: 15ch; position: relative; }
.vg-hero h1 em { font-style: normal; color: var(--cyan-hi); }
/* chromatic aberration, the quiet kind */
.vg-hero h1 { text-shadow: -2px 0 rgba(143,179,207,.45), 2px 0 rgba(90,143,186,.55); }
@media (prefers-reduced-motion: no-preference) {
  .vg-hero h1 { animation: vg-shift 7s steps(1) infinite; }
  @keyframes vg-shift {
    0%, 92%, 100% { text-shadow: -2px 0 rgba(143,179,207,.55), 2px 0 rgba(90,143,186,.45); }
    94%  { text-shadow: -5px 0 rgba(143,179,207,.8), 4px 0 rgba(90,143,186,.7); transform: translateX(1px); }
    96%  { text-shadow: 4px 0 rgba(143,179,207,.7), -4px 0 rgba(90,143,186,.8); transform: translateX(-1px); }
  }
}
.vg-hero .lede { margin-top: 28px; max-width: 54ch; font-size: clamp(17px,1.9vw,21px); color: var(--ink-2); }

.vg-cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }
.vg-btn {
  font-family: "Azeret Mono", monospace; font-size: 12px; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase; text-decoration: none;
  padding: 16px 26px; border: 1px solid transparent;
  display: inline-flex; align-items: center; gap: 10px;
  --notch: 10px;
  transition: box-shadow .16s, transform .16s, border-color .16s, color .16s;
}
.vg-btn-solid {
  background: var(--cyan); color: #06121C; font-weight: 600;
  box-shadow: 0 0 26px -6px rgba(90,143,186,.9), inset 0 0 0 1px rgba(255,255,255,.25);
}
.vg-btn-solid:hover, .vg-btn-solid:focus-visible { transform: translateY(-2px); box-shadow: 0 0 40px -4px rgba(90,143,186,1), 0 0 18px -2px rgba(143,179,207,.55); }
.vg-btn-line { border-color: var(--line-2); color: var(--ink); }
.vg-btn-line:hover, .vg-btn-line:focus-visible { border-color: var(--mag); color: var(--mag); box-shadow: 0 0 22px -8px rgba(143,179,207,.9); }

/* ---------- duotone imagery ---------- */
.vg-hero-media, .vg-media {
  position: relative; margin: 0; overflow: hidden;
  border: 1px solid var(--line-2); background: var(--surface);
  /* Required: without it the duotone blend composites against the page
     backdrop instead of the photograph directly beneath it. */
  isolation: isolate;
}
.vg-hero-media { aspect-ratio: 4 / 3; }
.vg-media { aspect-ratio: 5 / 4; }
/* Neon grade without blend modes. mix-blend-mode composited against the page
   backdrop here and flattened the photograph to black; a full sepia/hue-rotate
   duotone crushed it too. A partial desaturation plus a magenta/cyan wash keeps
   the subject readable and still reads as neon in context. Verified in-browser. */
.vg-hero-media, .vg-media { background: #070A12; }
.vg-hero-media img, .vg-media img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  /* Already deep blue in-camera; only a light contrast lift is needed. */
  filter: contrast(1.06) saturate(1.05);
}
.vg-hero-media::before, .vg-media::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  /* Zero-alpha colours, not `transparent`: the keyword is transparent BLACK and
     gradients interpolating to it visibly darken the image underneath. */
  background: linear-gradient(200deg, rgba(90,143,186,.10), rgba(90,143,186,0) 55%);
}
.vg-hero-media::after, .vg-media::after {
  content: ""; position: absolute; inset: 0; z-index: 2;
  background: repeating-linear-gradient(180deg, rgba(0,0,0,.18) 0 1px, transparent 1px 3px);
}
.vg-hero-media figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 3;
  padding: 12px 16px;
  font-family: "Azeret Mono", monospace; font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--cyan-hi);
  background: linear-gradient(0deg, rgba(6,7,13,.94), rgba(6,7,13,0));
}

/* ---------- readout strip ---------- */
.vg-strip { border-bottom: 1px solid var(--line); background: var(--surface); }
.vg-strip .vg-wrap { display: grid; grid-template-columns: repeat(4,1fr); gap: 1px; background: var(--line); }
@media (max-width: 820px) { .vg-strip .vg-wrap { grid-template-columns: repeat(2,1fr); } }
.vg-cellstat { background: var(--surface); padding: 26px 24px; position: relative; }
.vg-cellstat::before { content: ""; position: absolute; left: 0; top: 0; width: 2px; height: 100%; background: linear-gradient(180deg, var(--cyan), transparent); }
.vg-cellstat b {
  display: block; font-family: Archivo, sans-serif; font-weight: 800;
  font-size: clamp(30px,3.6vw,44px); line-height: 1; letter-spacing: -.03em;
  font-variant-numeric: tabular-nums; color: var(--ink);
  text-shadow: 0 0 22px rgba(90,143,186,.35);
}
.vg-cellstat span { display: block; margin-top: 9px; font-family: "Azeret Mono", monospace; font-size: 11px; letter-spacing: .08em; color: var(--muted); }

/* ---------- sections ---------- */
.vg-sec { padding-block: clamp(68px,9vw,114px); border-bottom: 1px solid var(--line); }
.vg-head { max-width: 64ch; margin-bottom: clamp(36px,5vw,58px); }
.vg-head h2 { font-size: clamp(36px,5.4vw,64px); margin-top: 16px; }
.vg-head p { margin-top: 20px; color: var(--ink-2); max-width: 58ch; }

.vg-lat { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; }
@media (max-width: 940px) { .vg-lat { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width: 620px) { .vg-lat { grid-template-columns: 1fr; } }
.vg-cap {
  background: var(--surface); border: 1px solid var(--line);
  padding: clamp(22px,2.5vw,30px);
  display: flex; flex-direction: column; gap: 11px; min-height: 210px;
  position: relative;
  transition: border-color .18s, box-shadow .18s, transform .18s;
}
.vg-cap:hover { border-color: var(--cyan); box-shadow: 0 0 30px -14px rgba(90,143,186,.9); transform: translateY(-2px); }
.vg-cap .idx { font-family: "Azeret Mono", monospace; font-size: 11px; color: var(--mag); letter-spacing: .16em; }
.vg-cap h3 { font-size: 24px; letter-spacing: -.015em; }
.vg-cap p { font-size: 15.5px; color: var(--ink-2); line-height: 1.55; }
.vg-cap.is-core { border-color: var(--cyan-lo); background: linear-gradient(180deg, rgba(90,143,186,.10), rgba(143,179,207,.05)); }
.vg-cap .tag { margin-top: auto; font-family: "Azeret Mono", monospace; font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--cyan-hi); }

/* AI band */
.vg-ai { background: var(--surface); position: relative; isolation: isolate; overflow: hidden; }
.vg-ai::before {
  content: ""; position: absolute; inset: 0; z-index: -2;
  background: radial-gradient(80% 120% at 12% 0%, rgba(90,143,186,.14), rgba(90,143,186,0) 70%);
}
.vg-ai::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, var(--surface) 24%, rgba(12,14,24,.7) 60%, rgba(143,179,207,.07));
}
.vg-ai-grid { display: grid; grid-template-columns: minmax(0,1.05fr) minmax(0,.95fr); gap: clamp(34px,5vw,70px); align-items: start; }
@media (max-width: 900px) { .vg-ai-grid { grid-template-columns: 1fr; } }
.vg-pipe { border: 1px solid var(--line-2); background: rgba(6,7,13,.72); }
.vg-pipe .row { display: grid; grid-template-columns: 44px 1fr; gap: 16px; padding: 19px 22px; border-bottom: 1px solid var(--line); align-items: baseline; }
.vg-pipe .row:last-child { border-bottom: 0; }
.vg-pipe .n { font-family: "Azeret Mono", monospace; font-size: 11.5px; color: var(--cyan-hi); }
.vg-pipe h4 { margin: 0 0 5px; font-family: Archivo, sans-serif; font-size: 16.5px; font-weight: 600; color: var(--ink); }
.vg-pipe p { font-size: 14.5px; color: var(--muted); line-height: 1.5; }

.vg-split-media { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,.85fr); gap: clamp(30px,5vw,64px); align-items: center; }
@media (max-width: 900px) { .vg-split-media { grid-template-columns: 1fr; } }

/* hardware band — the red source is pulled into the duotone */
.vg-band { position: relative; isolation: isolate; overflow: hidden; border-bottom: 1px solid var(--line); padding-block: clamp(72px,9vw,118px); }
.vg-band::before {
  content: ""; position: absolute; inset: 0; z-index: -2;
  background-image: var(--band-img); background-size: cover; background-position: center right;
}
.vg-band::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(90deg, rgba(2,6,14,.96) 12%, rgba(2,6,14,.62) 52%, rgba(2,6,14,.34));
}
.vg-band h2 { font-size: clamp(32px,4.4vw,54px); }
.vg-band p { margin-top: 18px; color: var(--ink-2); max-width: 54ch; }

/* markets */
.vg-mkt { display: grid; grid-template-columns: repeat(5,1fr); gap: 10px; }
@media (max-width: 820px) { .vg-mkt { grid-template-columns: repeat(2,1fr); } }
.vg-mkt div { background: var(--surface); border: 1px solid var(--line); padding: 22px 20px; transition: border-color .16s, box-shadow .16s; }
.vg-mkt div:hover { border-color: var(--mag); box-shadow: 0 0 24px -12px rgba(143,179,207,.9); }
.vg-mkt b { display: block; font-family: Archivo, sans-serif; font-size: 19px; color: var(--ink); }
.vg-mkt span { display: block; margin-top: 6px; font-family: "Azeret Mono", monospace; font-size: 10.5px; letter-spacing: .12em; color: var(--muted); }

/* closing */
.vg-close { background: linear-gradient(160deg, rgba(90,143,186,.12), rgba(143,179,207,.08) 60%, transparent), var(--ground); }
.vg-close .vg-wrap { display: grid; grid-template-columns: minmax(0,1.15fr) minmax(0,.85fr); gap: clamp(30px,5vw,64px); align-items: center; }
@media (max-width: 860px) { .vg-close .vg-wrap { grid-template-columns: 1fr; } }
.vg-close h2 { font-size: clamp(38px,5.8vw,72px); }
.vg-close p { margin-top: 18px; color: var(--ink-2); max-width: 46ch; }

.vg-foot { padding-block: 32px; color: var(--muted); font-size: 12px; font-family: "Azeret Mono", monospace; letter-spacing: .08em; }
.vg-foot .vg-wrap { display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between; align-items: center; }
.vg-foot a { text-decoration: none; color: var(--cyan-hi); }
.vg-foot a:hover { text-shadow: 0 0 10px rgba(90,143,186,.85); }

.codebyte-vanguard :focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .codebyte-vanguard *, .codebyte-vanguard *::before { animation: none !important; transition: none !important; } }
/* Codebyte Vanguard: image-matched palette. Add after the theme stylesheet. */
body.codebyte-vanguard {
 --ground:#050A12; --surface:#081522; --raised:#0D2135;
 --line:#183149; --line-2:#285171;
 --ink:#E3F0FC; --ink-2:#B4CBDD; --muted:#8CAAC3;
 --cyan:#3399DD; --cyan-hi:#78BCEE; --cyan-lo:#20547A;
 --mag:#78BCEE; --mag-lo:#244C6C;
}
.codebyte-vanguard .vg-hero h1 em {color:#3399DD;}
.codebyte-vanguard .vg-btn-solid {background:#3399DD;color:#050A12;box-shadow:0 0 24px -10px #3399dd80;}
.codebyte-vanguard .vg-btn-solid:hover,.codebyte-vanguard .vg-btn-solid:focus-visible {background:#78BCEE;color:#050A12;box-shadow:0 0 30px -10px #3399dd99;}
.codebyte-vanguard .vg-hero::after {background:radial-gradient(60% 50% at 16% 34%,#3399dd14,transparent 70%),radial-gradient(50% 45% at 84% 70%,#3399dd12,transparent 72%);}
.codebyte-vanguard .vg-cap.is-core {background:linear-gradient(#3399dd14,#3399dd05);}
.codebyte-vanguard .vg-cap:hover {box-shadow:0 0 30px -14px #3399dd80;}
.codebyte-vanguard .vg-ai::before {background:radial-gradient(80% 120% at 12% 0%,#3399dd17,transparent 70%);}
.codebyte-vanguard .vg-ai::after {background:linear-gradient(90deg,var(--surface) 24%,#081522b3 60%,#3399dd0d);}
.codebyte-vanguard .vg-band::after {background:linear-gradient(90deg,#050a12f5 12%,#050a129e 52%,#050a1257);}
.codebyte-vanguard .vg-close {background:linear-gradient(160deg,#3399dd1a,#78bcee0d 60%,transparent),var(--ground);}
.codebyte-vanguard .vg-hero-media,.codebyte-vanguard .vg-media {background:#050A12;}
.codebyte-vanguard .vg-hero-media::before,.codebyte-vanguard .vg-media::before {background:linear-gradient(200deg,#3399dd0d,transparent 55%);}
.codebyte-vanguard .vg-hero-media figcaption {background:linear-gradient(0deg,#050a12f0,#050a1200);}
.codebyte-vanguard .vg-nav a:hover,.codebyte-vanguard .vg-nav a:focus-visible {text-shadow:0 0 10px #3399dd66;}
.codebyte-vanguard .vg-mkt div:hover {box-shadow:0 0 24px -12px #3399dd80;}

/* White logo */
.codebyte-vanguard .vg-lockup { filter: brightness(0) invert(1); opacity: 1; }
/* Codebyte: refined engineering studio */
body.codebyte-vanguard{font-family:Archivo,Arial,sans-serif;font-size:16px;line-height:1.75;--ground:#050a12;--surface:#0a1422;--raised:#101f32;--line:#1a2a3d;--line-2:#2b435e;--ink:#edf4fc;--ink-2:#adbed1;--muted:#8da5be}
.codebyte-vanguard h1,.codebyte-vanguard h2,.codebyte-vanguard h3{font-weight:600;letter-spacing:-.045em;line-height:1.07}
.codebyte-vanguard .vg-hero h1{font-size:clamp(44px,6.2vw,84px);animation:none;text-shadow:none;max-width:15ch}
.codebyte-vanguard .vg-hero h1 em{color:#6db7f1}
.codebyte-vanguard .vg-hero .lede{font-size:18px;line-height:1.8;max-width:51ch}
.codebyte-vanguard .vg-hero-inner{padding-block:100px 110px}
.codebyte-vanguard .vg-hero-grid{gap:65px;grid-template-columns:1.05fr 1fr}
.codebyte-vanguard .vg-hero::after{background:radial-gradient(ellipse at 75% 40%,#176eb71a,transparent 60%)}
.codebyte-vanguard #vg-lattice{opacity:.15}
.codebyte-vanguard .notch{clip-path:none;border-radius:12px}
.codebyte-vanguard .vg-hero-media{aspect-ratio:1.15;box-shadow:0 24px 80px #0006;border-color:#28425d}
.codebyte-vanguard .vg-hero-media::after,.codebyte-vanguard .vg-media::after{display:none}
.codebyte-vanguard .vg-hero-media img,.codebyte-vanguard .vg-media img{filter:none}
.codebyte-vanguard .vg-hero-media figcaption{padding:22px;color:#bfd7ec;font-size:12px;letter-spacing:.09em}
.codebyte-vanguard .vg-top{padding-block:26px}
.codebyte-vanguard .vg-lockup{height:34px}
.codebyte-vanguard .vg-nav a{font-family:Archivo,Arial,sans-serif;font-size:14px;letter-spacing:0;text-transform:none}
.codebyte-vanguard .vg-eyebrow{font-size:12px;letter-spacing:.12em;color:#80b9e5}
.codebyte-vanguard .vg-eyebrow::before,.codebyte-vanguard .vg-eyebrow::after{content:none}
.codebyte-vanguard .vg-btn{font-family:Archivo,Arial,sans-serif;font-size:14px;letter-spacing:0;text-transform:none;padding:14px 22px;border-radius:7px}
.codebyte-vanguard .vg-btn-solid{background:#3399dd;color:#04101d;box-shadow:0 1px 0 #ffffff30 inset}
.codebyte-vanguard .vg-btn-line{background:#ffffff03}
.codebyte-vanguard .vg-strip .vg-wrap{background:transparent}
.codebyte-vanguard .vg-cellstat{background:transparent;border-right:1px solid var(--line);padding-block:32px}
.codebyte-vanguard .vg-cellstat:last-child{border:0}
.codebyte-vanguard .vg-cellstat::before{display:none}
.codebyte-vanguard .vg-cellstat b{font-size:34px;font-weight:500;text-shadow:none}
.codebyte-vanguard .vg-cellstat span{font-family:Archivo,Arial,sans-serif;font-size:13px;letter-spacing:0}
.codebyte-vanguard .vg-head{max-width:740px}
.codebyte-vanguard .vg-head h2{font-size:clamp(36px,4.4vw,58px)}
.codebyte-vanguard .vg-lat{gap:18px}
.codebyte-vanguard .vg-cap{padding:32px;gap:17px;background:linear-gradient(145deg,#102033,#09131f);min-height:265px}
.codebyte-vanguard .vg-cap h3{font-size:23px}
.codebyte-vanguard .vg-cap p{font-size:16px;line-height:1.7}
.codebyte-vanguard .vg-cap .idx{font-size:13px;color:#64b2ee}
.codebyte-vanguard .vg-cap .tag{font-size:12px;letter-spacing:.08em}
.codebyte-vanguard .vg-cap:hover{border-color:#477ba4;box-shadow:0 12px 34px #0003;transform:translateY(-3px)}
.codebyte-vanguard .vg-cap.is-core{background:linear-gradient(145deg,#12304b,#0b1929);border-color:#315c7e}
.codebyte-vanguard .vg-pipe{border-radius:12px;background:#08131f}
.codebyte-vanguard .vg-pipe p{font-size:15px;line-height:1.7}
.codebyte-vanguard .vg-pipe h4{font-family:Archivo,Arial,sans-serif}
.codebyte-vanguard .vg-mkt div{border-radius:8px}
.codebyte-vanguard .vg-mkt span{font-size:12px}
.codebyte-vanguard .vg-close{background:radial-gradient(ellipse at 80% 100%,#16456a44,transparent 70%),#091522}
.vg-system{margin:0 0 48px;padding:32px;border:1px solid #20384f;border-radius:14px;background:radial-gradient(ellipse at center,#13385955,transparent 65%),#07111e}
.vg-system-head{display:flex;justify-content:space-between;gap:20px;align-items:center;margin-bottom:24px;color:#a7c7e0;font-size:13px}
.vg-system-head span:last-child{color:#7794af;font-family:monospace}
.vg-system-map{display:grid;grid-template-columns:1fr 1fr 1fr;gap:22px 40px;position:relative}
.vg-system-node{padding:18px 14px;text-align:center;border:1px solid #254664;border-radius:8px;background:#0c1b2c;color:#cce0f2;position:relative;font-size:14px}
.vg-system-node::after{content:'';position:absolute;top:50%;left:100%;width:40px;height:1px;background:linear-gradient(90deg,#3399dd22,#6bbaf1,#3399dd22);animation:signal-flow 3s ease-in-out infinite}
.vg-system-node:nth-child(3n)::after{display:none}.vg-system-node:nth-child(2),.vg-system-node:nth-child(5){border-color:#43749c;background:#12304a}
@keyframes signal-flow{0%,100%{opacity:.25}50%{opacity:1}}
@media(max-width:940px){.codebyte-vanguard .vg-hero-grid{grid-template-columns:1fr}.codebyte-vanguard .vg-hero-inner{padding-block:60px}.codebyte-vanguard .vg-hero h1{max-width:17ch}.codebyte-vanguard .vg-hero-media{aspect-ratio:1.6}.codebyte-vanguard .vg-nav{display:flex;gap:16px;flex-wrap:wrap}.codebyte-vanguard .vg-top{flex-wrap:wrap}}
@media(max-width:600px){.codebyte-vanguard .vg-wrap{padding-inline:22px}.codebyte-vanguard .vg-nav{gap:16px}.codebyte-vanguard .vg-nav a{font-size:13px}.codebyte-vanguard .vg-hero .lede{font-size:16px}.codebyte-vanguard .vg-hero-media{aspect-ratio:1.2}.vg-system{padding:22px 16px}.vg-system-head{display:block}.vg-system-head span{display:block}.vg-system-map{gap:15px}.vg-system-node{font-size:12px;padding:15px 5px}.vg-system-node::after{width:15px}.codebyte-vanguard .vg-cap{padding:25px}.codebyte-vanguard .vg-cellstat{padding:22px 10px}}
@media(prefers-reduced-motion:reduce){.vg-system-node::after{animation:none}}

/* Align section introductions with the full card row. */
.codebyte-vanguard .vg-head, .codebyte-vanguard .vg-head p { max-width:none; width:100%; }

/* Stack Delivery cards before their text columns become cramped. */
@media (max-width: 940px) {
  .codebyte-vanguard #delivery .vg-lat { grid-template-columns: minmax(0, 1fr); }
}

/* Keep dividers only between statistics columns on smaller screens. */
@media (max-width: 820px) {
  .codebyte-vanguard .vg-cellstat:nth-child(2n) { border-right: 0; }
}