@charset "UTF-8";
/* ==========================================================================
   Simple Systems Limited — Cyber theme layer
   --------------------------------------------------------------------------
   A separate dark skin for the signed-off Light site. This file is loaded
   AFTER assets/css/site.css and only overrides; it never edits the Light
   stylesheet and never touches the Light markup.

   Design brief: "Enterprise Cyber Infrastructure" — deep navy, restrained
   mint accent, thin technical rules, elevated card panels. Professional, not
   sci-fi: no scanlines, no glow orbs, no invented telemetry.

   Scope guard: every rule below is scoped under html[data-theme="cyber"] so
   that the file is inert if it is ever loaded next to the Light site.
   ========================================================================== */

/* --------------------------------------------------------------- tokens -- */
html[data-theme="cyber"] {
  color-scheme: dark;

  /* brand family. --brand-900 is the deepest surface layer; it is never used
     for text in this theme (the Light stylesheet did use it for hover text,
     which would have put near-black on near-black -- those rules are
     overridden individually further down). */
  --brand-900: #060c13;
  --brand-800: #70efb7;
  --brand-700: #36e69a;
  --brand-600: #36e69a;
  --brand:     #36e69a;
  --brand-500: #2fd18a;
  --brand-300: #5fe9ad;

  --tint-100: #16232f;
  --tint-50:  #101c28;

  --surface:      #0b1420;
  --surface-alt:  #101c29;
  --surface-band: #16232f;

  --ink:      #e6edf5;
  --ink-2:    #a4b2c3;
  --ink-3:    #91a1b5;
  --ink-inv:   #e6edf5;
  --ink-inv-2: #a4b2c3;

  --line:      #1f2f40;
  --line-2:    #2b3d52;
  --line-dark: #1a2735;

  --focus:     #70efb7;
  --focus-inv: #70efb7;

  /* theme-only helpers */
  --cyber-cyan: #4cc9f0;
  --cyber-panel: #131e29;
  --cyber-panel-hover: #17242f;
  --cyber-border-accent: #34745d;
  --cyber-on-accent: #05121a;   /* text on a bright mint button */
  --cyber-deep: #070d14;        /* the hero layer */
}

/* ----------------------------------------------------------------- base -- */
html[data-theme="cyber"] body {
  background: var(--surface);
  color: var(--ink-2);
}
html[data-theme="cyber"] h1,
html[data-theme="cyber"] h2,
html[data-theme="cyber"] h3,
html[data-theme="cyber"] h4 { color: var(--ink); }
html[data-theme="cyber"] strong { color: var(--ink); }
html[data-theme="cyber"] a { color: var(--brand-600); }
html[data-theme="cyber"] a:hover { color: var(--brand-800); }
html[data-theme="cyber"] hr { border-top-color: var(--line); }
html[data-theme="cyber"] table th { background: var(--tint-50); color: var(--ink); }
html[data-theme="cyber"] table td { border-bottom-color: var(--line); }
html[data-theme="cyber"] ::selection { background: var(--brand-300); color: #05121a; }
html[data-theme="cyber"] .text-sm,
html[data-theme="cyber"] .muted { color: var(--ink-3); }
html[data-theme="cyber"] .lead { color: var(--ink-2); }

/* the skip link sat on the deepest green in the Light theme; on a dark page a
   bright mint plate with dark type is the readable equivalent */
html[data-theme="cyber"] .skip-link { background: var(--brand); color: var(--cyber-on-accent); }
html[data-theme="cyber"] .skip-link:focus { color: var(--cyber-on-accent); }

/* ---------------------------------------------------------------- header -- */
html[data-theme="cyber"] .site-header {
  background: rgba(9, 16, 24, .84);
  backdrop-filter: saturate(1.3) blur(10px);
  border-bottom-color: var(--line);
}
html[data-theme="cyber"] .brand__name { color: var(--ink); }
html[data-theme="cyber"] .brand__zh { color: var(--ink-3); }
html[data-theme="cyber"] .nav__link { color: #c3cfdc; }
html[data-theme="cyber"] .nav__link:hover { color: var(--brand-700); background: rgba(54, 230, 154, .09); }
html[data-theme="cyber"] .nav__link[aria-current="page"] { color: var(--brand-700); border-bottom-color: var(--brand); }
html[data-theme="cyber"] .lang-switch { border-color: var(--line-2); }
html[data-theme="cyber"] .lang-switch a { color: var(--ink-3); }
html[data-theme="cyber"] .lang-switch a:hover { background: rgba(54, 230, 154, .09); color: var(--brand-700); }
html[data-theme="cyber"] .lang-switch a[aria-current="true"] { background: var(--brand-700); color: var(--cyber-on-accent); }
html[data-theme="cyber"] .nav-toggle { border-color: var(--line-2); color: var(--ink); }
html[data-theme="cyber"] .nav-toggle:hover { background: rgba(54, 230, 154, .09); }

/* --------------------------------------------------------- mobile drawer -- */
html[data-theme="cyber"] .mobile-nav { background: var(--cyber-deep); }
html[data-theme="cyber"] .mobile-nav a:not(.btn) { color: var(--ink); border-bottom-color: var(--line); }
html[data-theme="cyber"] .mobile-nav a:not(.btn):hover { color: var(--brand-700); }
html[data-theme="cyber"] .mobile-nav__close { border-color: var(--line-2); color: var(--ink); }
html[data-theme="cyber"] .mobile-nav__close:hover { background: rgba(54, 230, 154, .09); }

/* --------------------------------------------------------------- buttons -- */
html[data-theme="cyber"] .btn--primary {
  background: var(--brand); color: var(--cyber-on-accent); border-color: var(--brand);
}
html[data-theme="cyber"] .btn--primary:hover {
  background: var(--brand-800); color: var(--cyber-on-accent); border-color: var(--brand-800);
}
html[data-theme="cyber"] .btn--secondary {
  background: transparent; color: var(--brand-700); border-color: var(--cyber-border-accent);
}
html[data-theme="cyber"] .btn--secondary:hover {
  background: rgba(54, 230, 154, .10); color: var(--brand-800); border-color: var(--brand);
}
html[data-theme="cyber"] .btn--on-dark,
html[data-theme="cyber"] .band-dark .btn--on-dark {
  background: var(--brand); color: var(--cyber-on-accent); border-color: var(--brand);
}
html[data-theme="cyber"] .btn--on-dark:hover,
html[data-theme="cyber"] .band-dark .btn--on-dark:hover {
  background: var(--brand-800); color: var(--cyber-on-accent); border-color: var(--brand-800);
}
html[data-theme="cyber"] .btn--ghost-dark,
html[data-theme="cyber"] .band-dark .btn--ghost-dark {
  background: transparent; color: #cfe0ee; border-color: rgba(207, 224, 238, .45);
}
html[data-theme="cyber"] .btn--ghost-dark:hover,
html[data-theme="cyber"] .band-dark .btn--ghost-dark:hover {
  background: rgba(207, 224, 238, .10); color: #fff;
}
html[data-theme="cyber"] .link-arrow { color: var(--brand-700); }
html[data-theme="cyber"] .link-arrow:hover { color: var(--brand-300); }

/* ------------------------------------------------------------ typography -- */
html[data-theme="cyber"] .eyebrow { color: var(--brand-700); }
html[data-theme="cyber"] .section-head .lead { color: var(--ink-2); }
html[data-theme="cyber"] .rule { background: var(--brand); }

/* ------------------------------------------------------------------ hero -- */
html[data-theme="cyber"] .hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background:
    radial-gradient(88% 120% at 76% 22%, rgba(54, 230, 154, .10) 0%, rgba(54, 230, 154, 0) 58%),
    radial-gradient(70% 95% at 96% 74%, rgba(76, 201, 240, .07) 0%, rgba(76, 201, 240, 0) 62%),
    var(--cyber-deep);
  border-bottom-color: var(--line);
}
/* a low-contrast technical grid, faded out towards the copy on the left */
html[data-theme="cyber"] .hero::before {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(126, 196, 226, .055) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(126, 196, 226, .055) 1px, transparent 1px);
  background-size: 68px 68px;
  -webkit-mask-image: radial-gradient(115% 105% at 78% 42%, #000 0%, rgba(0, 0, 0, .35) 52%, transparent 76%);
  mask-image: radial-gradient(115% 105% at 78% 42%, #000 0%, rgba(0, 0, 0, .35) 52%, transparent 76%);
}
html[data-theme="cyber"] .hero__inner { position: relative; z-index: 1; }
html[data-theme="cyber"] .hero h1 { color: var(--ink); }
html[data-theme="cyber"] .hero h1 .accent { color: var(--brand-700); }
html[data-theme="cyber"] .hero__lead { color: var(--ink-2); }

@media (min-width: 960px) {
  html[data-theme="cyber"] .hero__visual { position: relative; color: var(--brand); }
  html[data-theme="cyber"] .motif {
    position: relative; z-index: 1;
    margin-inline: auto;              /* centre it so the network mesh and the
                                        mark share one axis */
    max-width: 380px;
  }
  /* the network mesh behind the brand mark: purely decorative */
  html[data-theme="cyber"] .hero__net {
    position: absolute; top: 50%; left: 50%;
    width: 660px; height: 560px;
    transform: translate(-50%, -50%);
    pointer-events: none;
    /* fade the mesh out towards its edges so it dissolves into the page
       instead of ending on a visible rectangle */
    -webkit-mask-image: radial-gradient(ellipse 64% 64% at 50% 50%, #000 42%, rgba(0, 0, 0, .38) 74%, transparent 100%);
    mask-image: radial-gradient(ellipse 64% 64% at 50% 50%, #000 42%, rgba(0, 0, 0, .38) 74%, transparent 100%);
  }
}
html[data-theme="cyber"] .motif__ring circle { opacity: .42; stroke-width: 5; }
html[data-theme="cyber"] .motif__ring path { opacity: .85; stroke-width: 5; }

/* -------------------------------------------------------------- problems -- */
html[data-theme="cyber"] .problems {
  position: relative;
  border-top: 1px solid var(--line);
  padding-top: 24px;
}
/* the short bright rule that sits on the left of the section rule */
html[data-theme="cyber"] .problems::before {
  content: "";
  position: absolute; top: -1px; left: 0;
  width: 132px; height: 3px;
  background: var(--brand);
}
html[data-theme="cyber"] .problems__title { color: var(--brand-700); }
html[data-theme="cyber"] .problems__h { color: var(--ink); }
html[data-theme="cyber"] .problems__p { color: var(--ink-2); }
html[data-theme="cyber"] .problems__item { border-top-color: var(--line); }
@media (min-width: 700px) {
  html[data-theme="cyber"] .problems__list { gap: 0; }
  html[data-theme="cyber"] .problems__item { padding: 18px 28px; }
  html[data-theme="cyber"] .problems__item:first-child { padding-left: 0; }
  html[data-theme="cyber"] .problems__item:last-child { padding-right: 0; }
  html[data-theme="cyber"] .problems__item + .problems__item { border-left: 1px solid var(--line); }
}

/* ----------------------------------------------- section separators (home) */
html[data-theme="cyber"] #solutions,
html[data-theme="cyber"] #services,
html[data-theme="cyber"] #about,
html[data-theme="cyber"] #resources,
html[data-theme="cyber"] #contact { border-top: 1px solid var(--line); }

/* ------------------------------------------------------- solution cards -- */
html[data-theme="cyber"] .sol-grid { gap: 16px; border-top: 0; }
html[data-theme="cyber"] .sol {
  padding: 24px 22px 26px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--cyber-panel);
  transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
}
html[data-theme="cyber"] .sol:hover {
  background: var(--cyber-panel-hover);
  border-color: var(--cyber-border-accent);
  box-shadow: 0 0 0 1px rgba(54, 230, 154, .16), 0 14px 34px -22px rgba(54, 230, 154, .65);
  color: inherit;
}
html[data-theme="cyber"] .sol:focus-visible { border-color: var(--brand); }
/* the Light theme dropped the right-hand rule on every third card in the
   three-up grid; in the Cyber theme every card is a standalone panel */
html[data-theme="cyber"] .sol-grid--3 .sol:nth-child(3n) { border-right: 1px solid var(--line); }
html[data-theme="cyber"] .sol-grid--3 .sol:nth-child(2n) { border-right: 1px solid var(--line); }
html[data-theme="cyber"] .sol:nth-child(4n) { border-right: 1px solid var(--line); }
/* The Light site gives .sol-grid four columns above 1024px, but only the
   three professional-service cards use the plain .sol-grid -- on the home
   page they carry .sol-grid--3 as well. So on the services page the third
   card stopped three quarters of the way across and left an empty column.
   Every .sol-grid that is not the four-up solutions grid holds those same
   three cards, so it gets three columns here and lines up with the home
   page. */
@media (min-width: 1024px) {
  html[data-theme="cyber"] .sol-grid:not(.sol-grid--4) { grid-template-columns: repeat(3, 1fr); }
}
html[data-theme="cyber"] .sol__idx { color: var(--brand); }
html[data-theme="cyber"] .sol__title { color: var(--ink); }
html[data-theme="cyber"] .sol:hover .sol__title { color: var(--brand-300); }
html[data-theme="cyber"] .sol__desc { color: var(--ink-2); }
html[data-theme="cyber"] .sol__more { color: var(--brand-700); }
html[data-theme="cyber"] .sol:hover .sol__more { color: var(--brand-300); }

/* ------------------------------------------- technology partner grid ----
   The short list of the most prominent partners, shown on the solutions
   page above the link to the full list. Every name here is already on the
   site's own technologies page. */
html[data-theme="cyber"] .cyber-partners { margin-top: 36px; }
html[data-theme="cyber"] .cyber-partners__label {
  font-family: var(--cyber-font-mono);
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--brand-700);
  margin: 0 0 14px;
}
html[data-theme="cyber"] .cyber-partners__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(158px, 1fr));
}
html[data-theme="cyber"] .cyber-partner {
  border: 1px solid var(--cyber-hairline);
  border-radius: 8px;
  background: var(--cyber-surface-1);
  padding: 16px 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 84px;
  transition: background-color .18s ease, border-color .18s ease, transform .18s ease;
}
html[data-theme="cyber"] .cyber-partner:hover {
  background: var(--cyber-surface-2);
  border-color: var(--brand-700);
  transform: translateY(-2px);
}
html[data-theme="cyber"] .cyber-partner__name {
  font-family: var(--cyber-font-display);
  font-weight: 700;
  font-size: 1.0625rem;
  letter-spacing: .01em;
  color: var(--ink);
  transition: color .18s ease;
}
html[data-theme="cyber"] .cyber-partner:hover .cyber-partner__name { color: var(--brand-300); }
html[data-theme="cyber"] .cyber-partner__desc {
  font-family: var(--cyber-font-mono);
  font-size: .625rem;
  letter-spacing: .04em;
  color: var(--ink-3);
  margin-top: 5px;
}

/* --------------------------------------------------------- process flow -- */
html[data-theme="cyber"] .flow { border-top: 1px solid var(--line); gap: 0; }
html[data-theme="cyber"] .flow__step { padding: 18px 34px 18px 0; border-bottom: 0; }
/* the per-step tick is replaced by a row rule and a chevron between steps */
html[data-theme="cyber"] .flow__step::before { content: none; }
html[data-theme="cyber"] .flow__step::after {
  content: "\203A";
  position: absolute; right: 12px; top: 50%;
  transform: translateY(-38%);
  color: var(--ink-3);
  font-size: 1.375rem; line-height: 1;
}
html[data-theme="cyber"] .flow__step:last-child::after { content: none; }
html[data-theme="cyber"] .flow__n { color: var(--brand); }
html[data-theme="cyber"] .flow__t { color: var(--ink); }
@media (max-width: 899px) {
  html[data-theme="cyber"] .flow__step:nth-child(2n) { padding-right: 34px; }
  html[data-theme="cyber"] .flow__step:nth-child(2n)::after { display: none; }
}

/* ---------------------------------------------------------- lifecycle ---- */
html[data-theme="cyber"] .lifecycle { border-top-color: var(--line); }
html[data-theme="cyber"] .lifecycle__step { border-bottom-color: var(--line); border-right-color: var(--line); }
html[data-theme="cyber"] .lifecycle__step::before { background: var(--brand); }
html[data-theme="cyber"] .lifecycle__step b { color: var(--ink); }
html[data-theme="cyber"] .lifecycle__step span { color: var(--ink-3); }

/* ----------------------------------------------------------- dark bands -- */
html[data-theme="cyber"] .band-dark { background: var(--brand-900); color: var(--ink-inv); }
html[data-theme="cyber"] .band-dark h2,
html[data-theme="cyber"] .band-dark h3 { color: var(--ink); }
html[data-theme="cyber"] .band-dark p { color: var(--ink-2); }
html[data-theme="cyber"] .band-dark a { color: var(--brand-700); }
html[data-theme="cyber"] .band-dark .link-arrow { color: var(--brand-700); }
html[data-theme="cyber"] .band-dark .link-arrow:hover { color: var(--brand-300); }
html[data-theme="cyber"] .band-dark .rule { background: var(--brand-300); }
html[data-theme="cyber"] .band-dark .eyebrow { color: var(--brand-300); }

html[data-theme="cyber"] .facts li { border-top-color: var(--line); }
html[data-theme="cyber"] .facts b { color: var(--ink); }
html[data-theme="cyber"] .facts span { color: var(--ink-2); }
html[data-theme="cyber"] .facts__k { color: var(--brand-700); }
html[data-theme="cyber"] .band-dark .facts li { border-top-color: var(--line-dark); }
html[data-theme="cyber"] .band-dark .facts b { color: var(--ink); }
html[data-theme="cyber"] .band-dark .facts span { color: var(--ink-2); }
html[data-theme="cyber"] .band-dark .facts__k { color: var(--brand-300); }

html[data-theme="cyber"] .contact-list li { border-top-color: var(--line); }
html[data-theme="cyber"] .contact-list .k { color: var(--brand-700); }
html[data-theme="cyber"] .contact-list .v { color: var(--ink); }
html[data-theme="cyber"] .contact-list .v a { color: var(--brand-700); }
html[data-theme="cyber"] .contact-list .v a:hover { color: var(--brand-300); }
html[data-theme="cyber"] .band-dark .contact-list li { border-top-color: var(--line-dark); }
html[data-theme="cyber"] .band-dark .contact-list .k { color: var(--brand-300); }
html[data-theme="cyber"] .band-dark .contact-list .v,
html[data-theme="cyber"] .band-dark .contact-list .v a { color: var(--ink); }
html[data-theme="cyber"] .band-dark .contact-list .v a:hover { color: var(--brand-300); }

/* ----------------------------------------------------------------- map --- */
html[data-theme="cyber"] .map__cta {
  background: var(--cyber-panel);
  border-color: var(--line);
  border-top-color: var(--brand);
}
html[data-theme="cyber"] .map__note { color: var(--ink-3); }
html[data-theme="cyber"] .map--dark .map__cta { background: rgba(54, 230, 154, .05); border-color: var(--line-dark); border-top-color: var(--brand-300); }
html[data-theme="cyber"] .map--dark .map__note { color: var(--ink-inv-2); }
html[data-theme="cyber"] .map__embed { background: var(--cyber-panel); border-color: var(--line); }
html[data-theme="cyber"] .map--dark .map__embed { border-color: var(--line-dark); }
html[data-theme="cyber"] .map__status { color: var(--ink-3); }
html[data-theme="cyber"] .map--dark .map__status { color: var(--ink-inv-2); }

/* ------------------------------------------------------------- insights -- */
html[data-theme="cyber"] .insight { border-top-color: var(--line); }
html[data-theme="cyber"] .insight__meta { color: var(--ink-3); }
html[data-theme="cyber"] .insight__title { color: var(--ink); }
html[data-theme="cyber"] .insight__title a:hover { color: var(--brand-300); }
html[data-theme="cyber"] .insight p { color: var(--ink-2); }

/* ------------------------------------------------ resources: year index --
   The resources page is a long list of articles grouped by year. The theme
   puts a sticky index beside it: the year headings become link targets and
   the index marks the year being read.

   The base stylesheet caps .prose at 72ch, which squeezes the articles into
   a narrow column and makes the page run to several thousand pixels. The cap
   is lifted here so the index has a column of its own and the article text
   still keeps a comfortable measure. */
html[data-theme="cyber"] .cyber-insights {
  /* .prose caps the measure at 72ch, which squeezes the articles into a
     narrow column and makes the page run to several thousand pixels. The
     container's own width cap is kept -- only the prose cap is dropped. */
  max-width: var(--maxw);
  display: grid;
  gap: 24px;
  align-items: start;
}
@media (min-width: 1024px) {
  html[data-theme="cyber"] .cyber-insights {
    grid-template-columns: 236px minmax(0, 1fr);
    gap: 24px;
  }
}
html[data-theme="cyber"] .cyber-insights__body {
  min-width: 0;
  border-left: 1px solid var(--line);
  padding-left: 40px;
}
/* the rule above each article spans the column; the paragraph keeps a
   readable measure rather than running the full width */
html[data-theme="cyber"] .cyber-insights__body .insight p { max-width: 78ch; }
html[data-theme="cyber"] .cyber-insights__body .insight__title { max-width: none; }
/* the year heading carries the divider, so the first article of a group
   does not repeat it */
html[data-theme="cyber"] .cyber-insights__body .cyber-insight--lead { border-top: 0; }

/* the year headings themselves */
html[data-theme="cyber"] .cyber-year {
  font-family: var(--cyber-font-display);
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -.015em;
  color: var(--ink);
  margin: 20px 0 2px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  /* the base stylesheet already sets scroll-padding-top on the page, so the
     heading lands just under the header on its own -- adding a scroll-margin
     here would push it down twice as far */
}
html[data-theme="cyber"] .cyber-year.cyber-year--first {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}
html[data-theme="cyber"] .cyber-year.cyber-year--first-archived {
  margin-top: 16px;
  padding-top: 0;
  border-top: 0;
}
html[data-theme="cyber"] .cyber-archive-banner {
  font-family: var(--cyber-font-mono);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin: 28px 0 0;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

/* the index itself */
html[data-theme="cyber"] .cyber-toc {
  font-size: .9375rem;
  line-height: 1.5;
}
@media (min-width: 1024px) {
  html[data-theme="cyber"] .cyber-toc {
    position: sticky;
    top: calc(var(--nav-h) + 28px);
    max-height: calc(100vh - var(--nav-h) - 56px);
    overflow-y: auto;
  }
}
html[data-theme="cyber"] .cyber-toc__title {
  font-family: var(--cyber-font-mono);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin: 0;
}
html[data-theme="cyber"] .cyber-toc__sub {
  font-size: .875rem;
  color: var(--ink-3);
  margin: 4px 0 24px;
}
html[data-theme="cyber"] .cyber-toc__group-title {
  font-family: var(--cyber-font-mono);
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0 0 10px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}
html[data-theme="cyber"] .cyber-toc__group:first-child .cyber-toc__group-title {
  padding-top: 0;
  border-top: 0;
}
html[data-theme="cyber"] .cyber-toc__list {
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
}
html[data-theme="cyber"] .cyber-toc__list li { list-style: none; margin: 0; }
html[data-theme="cyber"] .cyber-toc__list a {
  display: block;
  padding: 6px 10px 6px 13px;
  border-left: 2px solid transparent;
  color: var(--ink-3);
  text-decoration: none;
  transition: color .15s ease, background-color .15s ease, border-color .15s ease;
}
html[data-theme="cyber"] .cyber-toc__list a:hover { color: var(--ink); }
html[data-theme="cyber"] .cyber-toc__list a[aria-current] {
  color: var(--brand-300);
  border-left-color: var(--brand-700);
  background: var(--cyber-surface-2);
  font-weight: 600;
}
html[data-theme="cyber"] .cyber-toc__top {
  display: inline-block;
  width: 100%;
  margin-top: 4px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  color: var(--brand-300);
  font-weight: 600;
  font-size: .875rem;
  text-decoration: none;
}
html[data-theme="cyber"] .cyber-toc__top::after {
  content: "\2191";
  margin-left: 6px;
  transition: transform .15s ease;
}
html[data-theme="cyber"] .cyber-toc__top:hover { color: var(--brand-700); }
html[data-theme="cyber"] .cyber-toc__top:hover::after { transform: translateY(-3px); }

/* Below the two-column breakpoint the index becomes a single strip of year
   chips above the articles, so it costs a line rather than a screen. */
@media (max-width: 1023px) {
  html[data-theme="cyber"] .cyber-insights { display: block; }
  html[data-theme="cyber"] .cyber-insights__body {
    border-left: 0;
    padding-left: 0;
  }
  html[data-theme="cyber"] .cyber-toc {
    margin-bottom: 28px;
    padding: 14px 16px;
    border: 1px solid var(--cyber-hairline);
    border-radius: 10px;
    background: var(--cyber-panel);
  }
  html[data-theme="cyber"] .cyber-toc__title,
  html[data-theme="cyber"] .cyber-toc__sub,
  html[data-theme="cyber"] .cyber-toc__group-title,
  html[data-theme="cyber"] .cyber-toc__top { display: none; }
  html[data-theme="cyber"] .cyber-toc__groups {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }
  html[data-theme="cyber"] .cyber-toc__group,
  html[data-theme="cyber"] .cyber-toc__list { display: contents; }
  html[data-theme="cyber"] .cyber-toc__list a {
    display: inline-block;
    padding: 5px 12px;
    border: 1px solid var(--cyber-hairline-hi);
    border-radius: 999px;
    font-size: .8125rem;
  }
  html[data-theme="cyber"] .cyber-toc__list a[aria-current] {
    border-color: var(--brand-700);
    border-left-width: 1px;
    background: var(--cyber-surface-2);
  }
}

/* --------------------------------------------------------------- footer -- */
html[data-theme="cyber"] .site-footer {
  background: #04080d;
  color: var(--ink-2);
  border-top: 1px solid var(--line);
}
html[data-theme="cyber"] .site-footer h2,
html[data-theme="cyber"] .site-footer h3 { color: var(--ink); }
html[data-theme="cyber"] .footer__brand .brand__name { color: var(--ink); }
html[data-theme="cyber"] .footer__brand .brand__zh { color: var(--ink-3); }
html[data-theme="cyber"] .footer__tag { color: var(--ink-2); }
html[data-theme="cyber"] .footer__col h3,
html[data-theme="cyber"] .footer__sum-t,
html[data-theme="cyber"] .footer__sum::after { color: var(--brand-700); }
html[data-theme="cyber"] .footer__col a { color: var(--ink-2); }
html[data-theme="cyber"] .footer__col a:hover { color: var(--ink); }
html[data-theme="cyber"] .footer__bottom { border-top-color: var(--line-dark); color: var(--ink-3); }

/* ----------------------------------------------------------- inner pages -- */
html[data-theme="cyber"] .page-head { background: var(--tint-50); border-bottom-color: var(--line); }
html[data-theme="cyber"] .breadcrumb { color: var(--ink-3); }
html[data-theme="cyber"] .breadcrumb a { color: var(--ink-3); }
html[data-theme="cyber"] .breadcrumb a:hover { color: var(--brand-700); }
html[data-theme="cyber"] .side-nav { background: var(--cyber-panel); border-color: var(--line); }
html[data-theme="cyber"] .side-nav h2 { color: var(--ink-3); }
html[data-theme="cyber"] .side-nav a { color: var(--ink-2); border-bottom-color: var(--line); }
html[data-theme="cyber"] .side-nav a:hover { color: var(--brand-700); }
html[data-theme="cyber"] .side-nav a[aria-current="page"] { color: var(--brand-700); }
html[data-theme="cyber"] .prose { color: var(--ink-2); }

html[data-theme="cyber"] .schematic { background: var(--cyber-panel); border-color: var(--line); }
html[data-theme="cyber"] .sch__band { background: rgba(255, 255, 255, .03); border-left-color: var(--brand); }
html[data-theme="cyber"] .sch__band:nth-child(2) { border-left-color: var(--brand-600); }
html[data-theme="cyber"] .sch__band:nth-child(3) { border-left-color: var(--brand-300); }
html[data-theme="cyber"] .sch__label { color: var(--brand-700); }
html[data-theme="cyber"] .sch__node a {
  background: var(--tint-100);
  border-color: var(--line-2);
  color: var(--ink);
}
html[data-theme="cyber"] .sch__node a::before { background: var(--brand); }
html[data-theme="cyber"] .sch__node a:hover { border-color: var(--brand-300); background: rgba(54, 230, 154, .10); }

html[data-theme="cyber"] .note { background: var(--tint-50); border-left-color: var(--brand); color: var(--ink-2); }
html[data-theme="cyber"] .note strong { color: var(--ink); }
html[data-theme="cyber"] .pill { background: var(--tint-100); color: var(--brand-300); }
html[data-theme="cyber"] .problem { border-top-color: var(--line-2); }
html[data-theme="cyber"] .problem:hover { border-top-color: var(--brand); }
html[data-theme="cyber"] .problem__idx { color: var(--brand); }

/* ------------------------------------------------- legacy article colours --
   The 2010-era article bodies carry hard-coded light-background colours.
   On a dark surface they would fall below the contrast floor, so they are
   re-pointed at the theme's own palette. The text itself is untouched. */
html[data-theme="cyber"] .legacy [style*="color:#006000"] { color: var(--brand-300) !important; }
html[data-theme="cyber"] .legacy [style*="color:blue"] { color: var(--cyber-cyan) !important; }
html[data-theme="cyber"] .legacy [style*="color:green"] { color: var(--brand-300) !important; }
html[data-theme="cyber"] .legacy font[color="#010101"] { color: var(--ink-2) !important; }
html[data-theme="cyber"] .legacy font[color="#ffffff"] { color: var(--ink) !important; }
html[data-theme="cyber"] .legacy [bgcolor="#ffffff"],
html[data-theme="cyber"] .legacy [bgcolor="#FFFFFF"] { background-color: transparent !important; }
html[data-theme="cyber"] .legacy table { border-color: var(--line); }
html[data-theme="cyber"] .legacy img { border-radius: var(--radius); }

/* ==========================================================================
   ENHANCEMENT LAYER
   --------------------------------------------------------------------------
   Structure first, glow second. The reference design leans hard on neon
   glassmorphism; this layer keeps the Cyber brief ("professional, not
   sci-fi") and borrows only what earns its place:

     * a display typeface and a telemetry-label face, self-hosted;
     * an icon set drawn as CSS masks (no markup, no webfont, no request);
     * glass surfaces with an edge-lit top hairline;
     * the six-stage service life cycle turned into a circuit of nodes with
       a progress rail and a detail panel;
     * scroll reveal, and a hero grid that answers the cursor.

   Everything below is scoped under html[data-theme="cyber"] except the
   @font-face rules, which stay inert until something asks for the family.
   ========================================================================== */

/* ----------------------------------------------------------------- fonts --
   Self-hosted, Latin + Latin-Extended only. Traditional Chinese keeps the
   system CJK stack: a CJK webfont would add megabytes for no gain, and the
   Chinese pages carry a type scale of their own.

   The paths are relative to where this stylesheet is deployed:
   site/assets/css/cyber.css  ->  site/assets/fonts/*.woff2               */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('../fonts/plus-jakarta-sans-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('../fonts/plus-jakarta-sans-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url('../fonts/jetbrains-mono-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url('../fonts/jetbrains-mono-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------------------------------------------------------------- tokens -- */
html[data-theme="cyber"] {
  /* the display face for headings, and the telemetry face for the small
     uppercase labels. The CJK faces follow immediately so Chinese glyphs
     never fall through to the Latin UI font. */
  --cyber-font-display: "Plus Jakarta Sans", "Noto Sans TC", "PingFang TC",
                        "Microsoft JhengHei", "Hiragino Sans CNS", system-ui,
                        -apple-system, "Segoe UI", sans-serif;
  --cyber-font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo,
                     Consolas, "Noto Sans TC", "Microsoft JhengHei", monospace;

  /* opaque surface tiers -- cards must hide the rail that runs behind them */
  --cyber-surface-1: #0f1926;
  --cyber-surface-2: #14202e;
  --cyber-surface-3: #1c2c3d;
  --cyber-hairline: #213244;
  --cyber-hairline-hi: #2d4257;
  --cyber-glow-mint: rgba(54, 230, 154, .16);
  --cyber-glow-cyan: rgba(76, 201, 240, .13);
}

/* ------------------------------------------------------------ typography --
   The headings take the geometric display face; the small uppercase labels
   take the monospace face, which is what turns an index number into a
   readout. Everything else keeps the Light stack. */
html[data-theme="cyber"] h1,
html[data-theme="cyber"] h2,
html[data-theme="cyber"] h3,
html[data-theme="cyber"] h4,
html[data-theme="cyber"] .brand__name,
html[data-theme="cyber"] .btn,
html[data-theme="cyber"] .link-arrow {
  font-family: var(--cyber-font-display);
  letter-spacing: -.02em;
}
html[data-theme="cyber"] .hero h1 { letter-spacing: -.03em; }
html[data-theme="cyber"] .eyebrow,
html[data-theme="cyber"] .problems__title,
html[data-theme="cyber"] .sol__idx,
html[data-theme="cyber"] .flow__n,
html[data-theme="cyber"] .contact-list .k,
html[data-theme="cyber"] .insight__meta,
html[data-theme="cyber"] .sch__label,
html[data-theme="cyber"] .side-nav h2,
html[data-theme="cyber"] .footer__col h3,
html[data-theme="cyber"] .footer__sum-t {
  font-family: var(--cyber-font-mono);
}
/* the Chinese pages keep their own label scale, so the monospace face is
   only allowed to carry the Latin weight there */
html[lang="zh-Hant"][data-theme="cyber"] .eyebrow,
html[lang="zh-Hant"][data-theme="cyber"] .problems__title,
html[lang="zh-Hant"][data-theme="cyber"] .sch__label,
html[lang="zh-Hant"][data-theme="cyber"] .side-nav h2,
html[lang="zh-Hant"][data-theme="cyber"] .footer__col h3,
html[lang="zh-Hant"][data-theme="cyber"] .footer__sum-t {
  font-family: inherit;
}

/* ----------------------------------------------------------------- icons --
   The glyph is an inline SVG used as a mask. The mask reads only the alpha
   channel, so the stroke colour inside the SVG never shows: what the
   visitor sees is background-color, which means the icon can take the
   colour of the element it sits in and change on hover.

   Two shapes are used: a block icon that sits above a heading, and an inline
   icon that sits in a flex row. */
html[data-theme="cyber"] .problems__item::before,
html[data-theme="cyber"] .sol::before,
html[data-theme="cyber"] .flow__step::before,
html[data-theme="cyber"] .lifecycle__step::before,
html[data-theme="cyber"] .insight::before {
  content: "";
  display: block;
  position: static;
  width: 44px;
  height: 44px;
  margin-bottom: 14px;
  background-color: var(--brand-700);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  transition: background-color .18s ease, transform .18s ease;
}
html[data-theme="cyber"] .contact-list li::before {
  content: "";
  display: block;
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  align-self: center;
  background-color: var(--brand-700);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}
html[data-theme="cyber"] .about__grid .facts li::before {
  content: "";
  display: block;
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  align-self: flex-start;
  margin-top: 2px;
  background-color: var(--brand-300);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}

/* --- the glyph set (generated) --- */
/* === ICONS:BEGIN (generated by build_icons.py - do not edit) === */
   /* Each glyph is an inline SVG mask. The mask reads only the alpha
      channel, so the stroke colour inside a drawn shape never shows:
      background-color (currentColor) is what the visitor sees. The
      Material Symbols glyphs are filled paths and work the same way. */
html[data-theme="cyber"] {
  --ico-award:         url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%229%22%20r%3D%225.2%22%2F%3E%3Cpath%20d%3D%22m8.6%2013.4-1.4%207.4%204.8-2.4%204.8%202.4-1.4-7.4%22%2F%3E%3C%2Fsvg%3E");
  --ico-blueprint:     url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Crect%20x%3D%223%22%20y%3D%223%22%20width%3D%227%22%20height%3D%227%22%20rx%3D%221%22%2F%3E%3Crect%20x%3D%2214%22%20y%3D%2214%22%20width%3D%227%22%20height%3D%227%22%20rx%3D%221%22%2F%3E%3Cpath%20d%3D%22M10%206.5h4a2%202%200%200%201%202%202v5.5%22%2F%3E%3C%2Fsvg%3E");
  --ico-calendar:      url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Crect%20x%3D%223.4%22%20y%3D%225%22%20width%3D%2217.2%22%20height%3D%2215.6%22%20rx%3D%221.6%22%2F%3E%3Cpath%20d%3D%22M3.4%2010h17.2M8.2%203.2v3.6M15.8%203.2v3.6%22%2F%3E%3C%2Fsvg%3E");
  --ico-checklist:     url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%22m4%206.6%201.6%201.6L8.4%205.4%22%2F%3E%3Cpath%20d%3D%22m4%2012.6%201.6%201.6%202.8-2.8%22%2F%3E%3Cpath%20d%3D%22m4%2018.6%201.6%201.6%202.8-2.8%22%2F%3E%3Cpath%20d%3D%22M11.6%206.8h8.2M11.6%2012.8h8.2M11.6%2018.8h8.2%22%2F%3E%3C%2Fsvg%3E");
  --ico-clock-off:     url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%2224%22%20viewBox%3D%220%20-960%20960%20960%22%20width%3D%2224%22%3E%3Cpath%20d%3D%22m798-274-60-60q11-27%2016.5-53.5T760-440q0-116-82-198t-198-82q-24%200-51%205t-56%2016l-60-60q38-20%2080.5-30.5T480-800q60%200%20117.5%2020T706-722l56-56%2056%2056-56%2056q38%2051%2058%20108.5T840-440q0%2042-10.5%2083.5T798-274ZM520-552v-88h-80v8l80%2080ZM792-56l-96-96q-48%2035-103.5%2053.5T480-80q-74%200-139.5-28.5T226-186q-49-49-77.5-114.5T120-440q0-60%2018.5-115.5T192-656L56-792l56-56%20736%20736-56%2056ZM480-160q42%200%2082-13t75-37L248-599q-24%2035-36%2075t-12%2084q0%20116%2082%20198t198%2082ZM360-840v-80h240v80H360Zm83%20435Zm113-112Z%22%2F%3E%3C%2Fsvg%3E");
  --ico-database:      url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%2224%22%20viewBox%3D%220%20-960%20960%20960%22%20width%3D%2224%22%3E%3Cpath%20d%3D%22M840-680v480q0%2033-23.5%2056.5T760-120H200q-33%200-56.5-23.5T120-200v-560q0-33%2023.5-56.5T200-840h480l160%20160Zm-80%2034L646-760H200v560h560v-446ZM565-275q35-35%2035-85t-35-85q-35-35-85-35t-85%2035q-35%2035-35%2085t35%2085q35%2035%2085%2035t85-35ZM240-560h360v-160H240v160Zm-40-86v446-560%20114Z%22%2F%3E%3C%2Fsvg%3E");
  --ico-document:      url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%22M6.2%203.4h7.4l4.2%204.2v13H6.2z%22%2F%3E%3Cpath%20d%3D%22M13.6%203.4v4.2h4.2%22%2F%3E%3Cpath%20d%3D%22M9.2%2012.4h5.6M9.2%2015.8h4%22%2F%3E%3C%2Fsvg%3E");
  --ico-gear:          url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%22M19.4%2015a1.65%201.65%200%200%200%20.33%201.82l.06.06a2%202%200%201%201-2.83%202.83l-.06-.06a1.65%201.65%200%200%200-1.82-.33%201.65%201.65%200%200%200-1%201.51V21a2%202%200%201%201-4%200v-.09A1.65%201.65%200%200%200%209%2019.4a1.65%201.65%200%200%200-1.82.33l-.06.06a2%202%200%201%201-2.83-2.83l.06-.06A1.65%201.65%200%200%200%204.6%2015a1.65%201.65%200%200%200-1.51-1H3a2%202%200%201%201%200-4h.09A1.65%201.65%200%200%200%204.6%209a1.65%201.65%200%200%200-.33-1.82l-.06-.06a2%202%200%201%201%202.83-2.83l.06.06A1.65%201.65%200%200%200%209%204.6a1.65%201.65%200%200%200%201-1.51V3a2%202%200%201%201%204%200v.09a1.65%201.65%200%200%200%201%201.51%201.65%201.65%200%200%200%201.82-.33l.06-.06a2%202%200%201%201%202.83%202.83l-.06.06A1.65%201.65%200%200%200%2019.4%209a1.65%201.65%200%200%200%201.51%201H21a2%202%200%201%201%200%204h-.09a1.65%201.65%200%200%200-1.51%201z%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%223%22%2F%3E%3C%2Fsvg%3E");
  --ico-hub:           url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%2224%22%20viewBox%3D%220%20-960%20960%20960%22%20width%3D%2224%22%3E%3Cpath%20d%3D%22M155-75q-35-35-35-85t35-85q35-35%2085-35%2014%200%2026%203t23%208l57-71q-28-31-39-70t-5-78l-81-27q-17%2025-43%2040t-58%2015q-50%200-85-35T0-580q0-50%2035-85t85-35q50%200%2085%2035t35%2085v8l81%2028q20-36%2053.5-61t75.5-32v-87q-39-11-64.5-42.5T360-840q0-50%2035-85t85-35q50%200%2085%2035t35%2085q0%2042-26%2073.5T510-724v87q42%207%2075.5%2032t53.5%2061l81-28v-8q0-50%2035-85t85-35q50%200%2085%2035t35%2085q0%2050-35%2085t-85%2035q-32%200-58.5-15T739-515l-81%2027q6%2039-5%2077.5T614-340l57%2070q11-5%2023-7.5t26-2.5q50%200%2085%2035t35%2085q0%2050-35%2085t-85%2035q-50%200-85-35t-35-85q0-20%206.5-38.5T624-232l-57-71q-41%2023-87.5%2023T392-303l-56%2071q11%2015%2017.5%2033.5T360-160q0%2050-35%2085t-85%2035q-50%200-85-35Zm-35-465q17%200%2028.5-11.5T160-580q0-17-11.5-28.5T120-620q-17%200-28.5%2011.5T80-580q0%2017%2011.5%2028.5T120-540Zm148.5%20408.5Q280-143%20280-160t-11.5-28.5Q257-200%20240-200t-28.5%2011.5Q200-177%20200-160t11.5%2028.5Q223-120%20240-120t28.5-11.5Zm240-680Q520-823%20520-840t-11.5-28.5Q497-880%20480-880t-28.5%2011.5Q440-857%20440-840t11.5%2028.5Q463-800%20480-800t28.5-11.5ZM480-360q42%200%2071-29t29-71q0-42-29-71t-71-29q-42%200-71%2029t-29%2071q0%2042%2029%2071t71%2029Zm268.5%20228.5Q760-143%20760-160t-11.5-28.5Q737-200%20720-200t-28.5%2011.5Q680-177%20680-160t11.5%2028.5Q703-120%20720-120t28.5-11.5Zm120-420Q880-563%20880-580t-11.5-28.5Q857-620%20840-620t-28.5%2011.5Q800-597%20800-580t11.5%2028.5Q823-540%20840-540t28.5-11.5ZM480-840ZM120-580Zm360%20120Zm360-120ZM240-160Zm480%200Z%22%2F%3E%3C%2Fsvg%3E");
  --ico-layers:        url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%2224%22%20viewBox%3D%220%20-960%20960%20960%22%20width%3D%2224%22%3E%3Cpath%20d%3D%22M480-540ZM80-160v-80h400v80H80Zm120-120q-33%200-56.5-23.5T120-360v-360q0-33%2023.5-56.5T200-800h560q33%200%2056.5%2023.5T840-720H200v360h280v80H200Zm600%2040v-320H640v320h160Zm-180%2080q-25%200-42.5-17.5T560-220v-360q0-25%2017.5-42.5T620-640h200q25%200%2042.5%2017.5T880-580v360q0%2025-17.5%2042.5T820-160H620Zm100-300q13%200%2021.5-9t8.5-21q0-13-8.5-21.5T720-520q-12%200-21%208.5t-9%2021.5q0%2012%209%2021t21%209Zm0%2060Z%22%2F%3E%3C%2Fsvg%3E");
  --ico-mail:          url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%2224%22%20viewBox%3D%220%20-960%20960%20960%22%20width%3D%2224%22%3E%3Cpath%20d%3D%22M160-160q-33%200-56.5-23.5T80-240v-480q0-33%2023.5-56.5T160-800h640q33%200%2056.5%2023.5T880-720v480q0%2033-23.5%2056.5T800-160H160Zm320-280L160-640v400h640v-400L480-440Zm0-80%20320-200H160l320%20200ZM160-640v-80%20480-400Z%22%2F%3E%3C%2Fsvg%3E");
  --ico-phone:         url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%2224%22%20viewBox%3D%220%20-960%20960%20960%22%20width%3D%2224%22%3E%3Cpath%20d%3D%22M798-120q-125%200-247-54.5T329-329Q229-429%20174.5-551T120-798q0-18%2012-30t30-12h162q14%200%2025%209.5t13%2022.5l26%20140q2%2016-1%2027t-11%2019l-97%2098q20%2037%2047.5%2071.5T387-386q31%2031%2065%2057.5t72%2048.5l94-94q9-9%2023.5-13.5T670-390l138%2028q14%204%2023%2014.5t9%2023.5v162q0%2018-12%2030t-30%2012ZM241-600l66-66-17-94h-89q5%2041%2014%2081t26%2079Zm358%20358q39%2017%2079.5%2027t81.5%2013v-88l-94-19-67%2067ZM241-600Zm358%20358Z%22%2F%3E%3C%2Fsvg%3E");
  --ico-pin:           url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%2224%22%20viewBox%3D%220%20-960%20960%20960%22%20width%3D%2224%22%3E%3Cpath%20d%3D%22M536.5-503.5Q560-527%20560-560t-23.5-56.5Q513-640%20480-640t-56.5%2023.5Q400-593%20400-560t23.5%2056.5Q447-480%20480-480t56.5-23.5ZM480-186q122-112%20181-203.5T720-552q0-109-69.5-178.5T480-800q-101%200-170.5%2069.5T240-552q0%2071%2059%20162.5T480-186Zm0%20106Q319-217%20239.5-334.5T160-552q0-150%2096.5-239T480-880q127%200%20223.5%2089T800-552q0%20100-79.5%20217.5T480-80Zm0-480Z%22%2F%3E%3C%2Fsvg%3E");
  --ico-power:         url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%2224%22%20viewBox%3D%220%20-960%20960%20960%22%20width%3D%2224%22%3E%3Cpath%20d%3D%22M480-80q-83%200-156-31.5T197-197q-54-54-85.5-127T80-480q0-84%2031.5-156.5T197-763l56%2056q-44%2044-68.5%20102T160-480q0%20134%2093%20227t227%2093q134%200%20227-93t93-227q0-67-24.5-125T707-707l56-56q54%2054%2085.5%20126.5T880-480q0%2083-31.5%20156T763-197q-54%2054-127%2085.5T480-80Zm-40-360v-440h80v440h-80Z%22%2F%3E%3C%2Fsvg%3E");
  --ico-pulse:         url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%22M2.8%2012.4h4L9%207.2l3.1%209.6%202.4-4.4h6.7%22%2F%3E%3C%2Fsvg%3E");
  --ico-recycle:       url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%2224%22%20viewBox%3D%220%20-960%20960%20960%22%20width%3D%2224%22%3E%3Cpath%20d%3D%22m368-592%2089-147-59-98q-12-20-34.5-20T329-837l-98%20163%20137%2082Zm387%20272-89-148%20139-80%2064%20107q11%2017%2012%2038t-9%2039q-10%2020-29.5%2032T800-320h-45ZM640-40%20480-200l160-160v80h190l-58%20116q-11%2020-30%2032t-42%2012h-60v80Zm-387-80q-20%200-36.5-10.5T192-158q-8-16-7.5-33.5T194-224l34-56h172v160H253Zm-99-114L89-364q-9-18-8.5-38.5T92-441l16-27-68-41%20219-55%2055%20220-69-42-91%20152Zm540-342-219-55%2069-41-125-208h141q21%200%2039.5%2010.5T629-841l52%2087%2068-42-55%20220Z%22%2F%3E%3C%2Fsvg%3E");
  --ico-renew:         url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%22M20.2%2011.4A8.3%208.3%200%200%200%205.9%207.2L3.8%209.2%22%2F%3E%3Cpath%20d%3D%22M3.8%204.8v4.4h4.4%22%2F%3E%3Cpath%20d%3D%22M3.8%2012.6a8.3%208.3%200%200%200%2014.3%204.2l2.1-2%22%2F%3E%3Cpath%20d%3D%22M20.2%2019.2v-4.4h-4.4%22%2F%3E%3C%2Fsvg%3E");
  --ico-search:        url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%2210.8%22%20cy%3D%2210.8%22%20r%3D%226.2%22%2F%3E%3Cpath%20d%3D%22m20%2020-4.4-4.4%22%2F%3E%3C%2Fsvg%3E");
  --ico-server:        url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%2224%22%20viewBox%3D%220%20-960%20960%20960%22%20width%3D%2224%22%3E%3Cpath%20d%3D%22M160-160q-33%200-56.5-23.5T80-240v-480q0-33%2023.5-56.5T160-800h640q33%200%2056.5%2023.5T880-720v480q0%2033-23.5%2056.5T800-160H160Zm0-80h640v-400H160v400Zm140-40-56-56%20103-104-104-104%2057-56%20160%20160-160%20160Zm180%200v-80h240v80H480Z%22%2F%3E%3C%2Fsvg%3E");
  --ico-shield-check:  url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%2224%22%20viewBox%3D%220%20-960%20960%20960%22%20width%3D%2224%22%3E%3Cpath%20d%3D%22M480-320q102-92%20131-129.5t29-74.5q0-36-26-62t-62-26q-21%200-40.5%208.5T480-580q-12-15-31-23.5t-41-8.5q-36%200-62%2026t-26%2062q0%2019%205%2035t22%2037.5q17%2021.5%2048.5%2052.5t84.5%2079Zm0%20240q-139-35-229.5-159.5T160-516v-244l320-120%20320%20120v244q0%20152-90.5%20276.5T480-80Zm0-84q104-33%20172-132t68-220v-189l-240-90-240%2090v189q0%20121%2068%20220t172%20132Zm0-316Z%22%2F%3E%3C%2Fsvg%3E");
  --ico-transfer:      url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%2224%22%20viewBox%3D%220%20-960%20960%20960%22%20width%3D%2224%22%3E%3Cpath%20d%3D%22M280-120%2080-320l200-200%2057%2056-104%20104h607v80H233l104%20104-57%2056Zm400-320-57-56%20104-104H120v-80h607L623-784l57-56%20200%20200-200%20200Z%22%2F%3E%3C%2Fsvg%3E");
  --ico-upgrade:       url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%2224%22%20viewBox%3D%220%20-960%20960%20960%22%20width%3D%2224%22%3E%3Cpath%20d%3D%22M360-360v-240h240v240H360Zm80-80h80v-80h-80v80Zm-80%20320v-80h-80q-33%200-56.5-23.5T200-280v-80h-80v-80h80v-80h-80v-80h80v-80q0-33%2023.5-56.5T280-760h80v-80h80v80h80v-80h80v80h80q33%200%2056.5%2023.5T760-680v80h80v80h-80v80h80v80h-80v80q0%2033-23.5%2056.5T680-200h-80v80h-80v-80h-80v80h-80Zm320-160v-400H280v400h400ZM480-480Z%22%2F%3E%3C%2Fsvg%3E");
  --ico-verified:      url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%2224%22%20viewBox%3D%220%20-960%20960%20960%22%20width%3D%2224%22%3E%3Cpath%20d%3D%22m344-60-76-128-144-32%2014-148-98-112%2098-112-14-148%20144-32%2076-128%20136%2058%20136-58%2076%20128%20144%2032-14%20148%2098%20112-98%20112%2014%20148-144%2032-76%20128-136-58-136%2058Zm34-102%20102-44%20104%2044%2056-96%20110-26-10-112%2074-84-74-86%2010-112-110-24-58-96-102%2044-104-44-56%2096-110%2024%2010%20112-74%2086%2074%2084-10%20114%20110%2024%2058%2096Zm102-318Zm-42%20142%20226-226-56-58-170%20170-86-84-56%2056%20142%20142Z%22%2F%3E%3C%2Fsvg%3E");
}
/* === ICONS:END === */

/* --- which glyph belongs where --- */
html[data-theme="cyber"] .problems__item:nth-child(1)::before { -webkit-mask-image: var(--ico-upgrade); mask-image: var(--ico-upgrade); }
html[data-theme="cyber"] .problems__item:nth-child(2)::before { -webkit-mask-image: var(--ico-clock-off); mask-image: var(--ico-clock-off); }
html[data-theme="cyber"] .problems__item:nth-child(3)::before { -webkit-mask-image: var(--ico-shield-check); mask-image: var(--ico-shield-check); }

html[data-theme="cyber"] .sol-grid--4 .sol:nth-child(1)::before { -webkit-mask-image: var(--ico-server); mask-image: var(--ico-server); }
html[data-theme="cyber"] .sol-grid--4 .sol:nth-child(2)::before { -webkit-mask-image: var(--ico-hub); mask-image: var(--ico-hub); }
html[data-theme="cyber"] .sol-grid--4 .sol:nth-child(3)::before { -webkit-mask-image: var(--ico-layers); mask-image: var(--ico-layers); }
html[data-theme="cyber"] .sol-grid--4 .sol:nth-child(4)::before { -webkit-mask-image: var(--ico-database); mask-image: var(--ico-database); }

/* every other solution grid on the site holds the three professional
   services, in the same order on the home page and on the services page */
html[data-theme="cyber"] .sol-grid:not(.sol-grid--4) .sol:nth-child(1)::before { -webkit-mask-image: var(--ico-power); mask-image: var(--ico-power); }
html[data-theme="cyber"] .sol-grid:not(.sol-grid--4) .sol:nth-child(2)::before { -webkit-mask-image: var(--ico-transfer); mask-image: var(--ico-transfer); }
html[data-theme="cyber"] .sol-grid:not(.sol-grid--4) .sol:nth-child(3)::before { -webkit-mask-image: var(--ico-recycle); mask-image: var(--ico-recycle); }

html[data-theme="cyber"] .flow__step:nth-child(1)::before { -webkit-mask-image: var(--ico-search); mask-image: var(--ico-search); }
html[data-theme="cyber"] .flow__step:nth-child(2)::before { -webkit-mask-image: var(--ico-blueprint); mask-image: var(--ico-blueprint); }
html[data-theme="cyber"] .flow__step:nth-child(3)::before { -webkit-mask-image: var(--ico-checklist); mask-image: var(--ico-checklist); }
html[data-theme="cyber"] .flow__step:nth-child(4)::before { -webkit-mask-image: var(--ico-gear); mask-image: var(--ico-gear); }
html[data-theme="cyber"] .flow__step:nth-child(5)::before { -webkit-mask-image: var(--ico-pulse); mask-image: var(--ico-pulse); }
html[data-theme="cyber"] .flow__step:nth-child(6)::before { -webkit-mask-image: var(--ico-renew); mask-image: var(--ico-renew); }

html[data-theme="cyber"] .insight::before {
  width: 30px; height: 30px; margin-bottom: 4px;
  color: var(--ink-3); background-color: currentColor;
  -webkit-mask-image: var(--ico-document);
  mask-image: var(--ico-document);
}

html[data-theme="cyber"] .contact-list li:nth-child(1)::before { -webkit-mask-image: var(--ico-pin); mask-image: var(--ico-pin); }
html[data-theme="cyber"] .contact-list li:nth-child(2)::before { -webkit-mask-image: var(--ico-phone); mask-image: var(--ico-phone); }
html[data-theme="cyber"] .contact-list li:nth-child(3)::before { -webkit-mask-image: var(--ico-mail); mask-image: var(--ico-mail); }

html[data-theme="cyber"] .about__grid .facts li:nth-child(1)::before { -webkit-mask-image: var(--ico-calendar); mask-image: var(--ico-calendar); }
html[data-theme="cyber"] .about__grid .facts li:nth-child(2)::before { -webkit-mask-image: var(--ico-award); mask-image: var(--ico-award); }

/* ------------------------------------------------------- glass surfaces --
   A translucent panel over a 1px hairline, with a specular top edge that
   lights up on hover. The glow is local to the panel -- there is no orb
   washing the page. */
html[data-theme="cyber"] .sol {
  background: var(--cyber-surface-1);
  border: 1px solid var(--cyber-hairline);
  border-radius: 10px;
  overflow: hidden;
  transition: background-color .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
html[data-theme="cyber"] .sol::after {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--brand-700), transparent);
  opacity: 0;
  transition: opacity .22s ease;
}
html[data-theme="cyber"] .sol:hover {
  background: var(--cyber-surface-2);
  border-color: var(--cyber-hairline-hi);
  box-shadow: 0 18px 40px -28px rgba(0, 0, 0, .9), 0 0 0 1px var(--cyber-glow-mint);
  transform: translateY(-2px);
}
html[data-theme="cyber"] .sol:hover::after { opacity: 1; }
html[data-theme="cyber"] .sol:hover::before { background-color: var(--brand-300); transform: scale(1.06); }
html[data-theme="cyber"] .sol__more::after {
  content: " \2192";
  display: inline-block;
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity .18s ease, transform .18s ease;
}
html[data-theme="cyber"] .sol:hover .sol__more::after { opacity: 1; transform: none; }

html[data-theme="cyber"] .problems__item {
  transition: background-color .18s ease, border-color .18s ease;
}
html[data-theme="cyber"] .problems__item:hover { border-top-color: var(--cyber-hairline-hi); }
html[data-theme="cyber"] .problems__item:hover::before { background-color: var(--brand-300); transform: translateY(-2px); }
html[data-theme="cyber"] .problems__h { transition: color .18s ease; }
html[data-theme="cyber"] .problems__item:hover .problems__h { color: var(--brand-300); }

/* the rule above a section head becomes an edge-lit gradient */
html[data-theme="cyber"] .rule {
  background: linear-gradient(90deg, var(--brand-700), var(--cyber-cyan));
  border-radius: 2px;
}

/* ------------------------------------------- service life cycle: circuit --
   The six delivery phases already exist in the markup as .flow (home) and
   .lifecycle (services page). They become the nodes of a circuit: each one
   is a panel with an icon, and a rail runs behind them with a progress
   fill that follows the selected phase. */
html[data-theme="cyber"] .flow {
  counter-reset: cyber-phase;
  border-top: 0;
  margin-bottom: 26px;
}
html[data-theme="cyber"] .flow__step {
  counter-increment: cyber-phase;
  position: relative;
  padding: 20px 18px 22px;
  border: 1px solid var(--cyber-hairline);
  border-radius: 10px;
  background: var(--cyber-surface-1);
  cursor: pointer;
  transition: background-color .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
html[data-theme="cyber"] .flow__step:hover {
  background: var(--cyber-surface-2);
  border-color: var(--cyber-hairline-hi);
  transform: translateY(-2px);
}
html[data-theme="cyber"] .flow__step[aria-selected="true"] {
  background: var(--cyber-surface-2);
  border-color: var(--brand-700);
  box-shadow: 0 0 0 1px var(--cyber-glow-mint), 0 18px 40px -28px rgba(0, 0, 0, .9);
}
html[data-theme="cyber"] .flow__step[aria-selected="true"]::before { background-color: var(--brand-300); }
html[data-theme="cyber"] .flow__n {
  font-family: var(--cyber-font-mono);
  font-size: .6875rem;
  letter-spacing: .16em;
  color: var(--ink-3);
  margin-bottom: 4px;
}
html[data-theme="cyber"] .flow__step[aria-selected="true"] .flow__n { color: var(--brand-300); }
html[data-theme="cyber"] .flow__t {
  font-family: var(--cyber-font-display);
  font-size: .9375rem;
  font-weight: 600;
  letter-spacing: -.01em;
}
/* the chevron that used to sit between the steps is gone: the rail below
   already carries the eye from one node to the next */
html[data-theme="cyber"] .flow__step::after { content: none; }

/* the small caption under the phase name */
html[data-theme="cyber"] .flow__tag {
  display: block;
  font-family: var(--cyber-font-mono);
  font-size: .625rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-top: 6px;
}
html[data-theme="cyber"] .flow__step[aria-selected="true"] .flow__tag { color: var(--brand-300); }
html[lang="zh-Hant"][data-theme="cyber"] .flow__tag { letter-spacing: .04em; }

/* the rail and its progress fill. The rail sits behind the panels, so only
   the gaps between them show -- the panels themselves are opaque. */
@media (min-width: 900px) {
  html[data-theme="cyber"] .flow {
    position: relative;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 14px;
  }
  html[data-theme="cyber"] .flow::before {
    content: "";
    position: absolute;
    left: 0; right: 0;
    top: 42px;
    height: 2px;
    background: linear-gradient(90deg,
      var(--brand-700) 0 var(--flow-progress, 16.6%),
      var(--cyber-hairline) var(--flow-progress, 16.6%) 100%);
    transition: background .35s ease;
  }
}

/* the services-page life cycle: three columns, two rows -- no rail, but the
   same numbered node treatment */
html[data-theme="cyber"] .lifecycle {
  counter-reset: cyber-phase;
  gap: 14px;
  border-top: 0;
  margin-bottom: 26px;
}
html[data-theme="cyber"] .lifecycle__step {
  counter-increment: cyber-phase;
  position: relative;
  padding: 20px 18px 22px;
  border: 1px solid var(--cyber-hairline);
  border-radius: 10px;
  background: var(--cyber-surface-1);
  cursor: pointer;
  transition: background-color .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
html[data-theme="cyber"] .lifecycle__step:hover {
  background: var(--cyber-surface-2);
  border-color: var(--cyber-hairline-hi);
  transform: translateY(-2px);
}
html[data-theme="cyber"] .lifecycle__step[aria-selected="true"] {
  background: var(--cyber-surface-2);
  border-color: var(--brand-700);
  box-shadow: 0 0 0 1px var(--cyber-glow-mint), 0 18px 40px -28px rgba(0, 0, 0, .9);
}
html[data-theme="cyber"] .lifecycle__step::before {
  content: counter(cyber-phase, decimal-leading-zero);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-bottom: 14px;
  border: 1px solid var(--cyber-hairline-hi);
  border-radius: 10px;
  background: var(--cyber-surface-3);
  color: var(--ink-3);
  font-family: var(--cyber-font-mono);
  font-size: .9375rem;
  letter-spacing: .06em;
  -webkit-mask-image: none;
  mask-image: none;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
html[data-theme="cyber"] .lifecycle__step[aria-selected="true"]::before {
  background: var(--brand-700);
  border-color: var(--brand-700);
  color: var(--cyber-on-accent);
}
html[data-theme="cyber"] .lifecycle__step b {
  font-family: var(--cyber-font-display);
  font-size: 1rem;
  letter-spacing: -.01em;
}

/* ------------------------------------------------------- detail panel ----
   The panel is built by cyber.js and holds no new copy: the phase number and
   the phase name come from the page, and the links point at pages that
   already exist. */
html[data-theme="cyber"] .cyber-panel {
  margin-top: 20px;
  margin-bottom: 34px;
  border: 1px solid var(--cyber-hairline);
  border-left: 3px solid var(--brand-700);
  border-radius: 10px;
  background: var(--cyber-surface-1);
  padding: 24px 26px 26px;
  overflow: hidden;
}
html[data-theme="cyber"] .cyber-panel[hidden] { display: none; }
html[data-theme="cyber"] .cyber-panel.is-in { animation: cyber-panel-in .32s ease both; }
@keyframes cyber-panel-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
html[data-theme="cyber"] .cyber-panel__head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 14px;
  margin-bottom: 10px;
}
html[data-theme="cyber"] .cyber-panel__code {
  font-family: var(--cyber-font-mono);
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--brand-300);
  background: rgba(54, 230, 154, .10);
  border: 1px solid rgba(54, 230, 154, .28);
  border-radius: 4px;
  padding: 3px 9px;
  white-space: nowrap;
}
html[data-theme="cyber"] .cyber-panel__badge {
  font-family: var(--cyber-font-mono);
  font-size: .6875rem;
  letter-spacing: .06em;
  color: var(--ink-3);
}
html[data-theme="cyber"] .cyber-panel__num {
  font-family: var(--cyber-font-mono);
  font-size: 2rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .02em;
  margin-left: auto;
  /* muted, but still a legible readout -- this is text, not a watermark */
  color: var(--ink-3);
}
html[data-theme="cyber"] .cyber-panel__title {
  font-family: var(--cyber-font-display);
  font-size: 1.5rem;
  letter-spacing: -.02em;
  margin: 0 0 10px;
}
html[data-theme="cyber"] .cyber-panel__desc {
  margin: 0 0 18px;
  max-width: 78ch;
  color: var(--ink-2);
  line-height: 1.7;
}
html[data-theme="cyber"] .cyber-panel__bullets {
  list-style: none;
  margin: 0 0 20px;
  padding: 0;
  display: grid;
  gap: 10px 26px;
}
@media (min-width: 700px) {
  html[data-theme="cyber"] .cyber-panel__bullets { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
html[data-theme="cyber"] .cyber-panel__bullets li {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  color: var(--ink);
  font-size: .9375rem;
}
html[data-theme="cyber"] .cyber-panel__bullets li::before {
  content: "";
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  background-color: var(--brand-700);
  -webkit-mask-image: var(--ico-verified);
  mask-image: var(--ico-verified);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}
html[data-theme="cyber"] .cyber-panel__meta {
  display: grid;
  gap: 12px;
  margin: 0 0 20px;
  padding: 16px 0 0;
  border-top: 1px solid var(--cyber-hairline);
}
@media (min-width: 640px) {
  html[data-theme="cyber"] .cyber-panel__meta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
html[data-theme="cyber"] .cyber-panel__metaitem dt {
  font-family: var(--cyber-font-mono);
  font-size: .6875rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 4px;
}
html[data-theme="cyber"] .cyber-panel__metaitem dd {
  margin: 0;
  color: var(--ink);
  font-weight: 600;
  font-size: .9375rem;
}
html[data-theme="cyber"] .cyber-panel__hint {
  font-family: var(--cyber-font-mono);
  font-size: .6875rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* ------------------------------------------------------- scroll reveal ----
   The hidden state is only applied once cyber.js has marked the document as
   scripted, so a failed script, a crawler or a printed page shows every
   element exactly as it is written. */
html.cyber-js .cyber-reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .55s ease, transform .55s ease;
}
html.cyber-js .cyber-reveal.is-in {
  opacity: 1;
  transform: none;
}

/* ------------------------------------------------- hero: cursor-reactive --
   The grid already carries a technical pattern; this adds a light that
   follows the pointer, so the hero answers the mouse instead of sitting
   there. The script sets --hero-x / --hero-y as percentages. */
html[data-theme="cyber"] .hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(300px circle at var(--hero-x, 50%) var(--hero-y, 35%),
                              var(--cyber-glow-mint), transparent 68%);
  opacity: 0;
  transition: opacity .35s ease;
}
html[data-theme="cyber"] .hero.cyber-cursor::after { opacity: 1; }

/* the mesh nodes twinkle, each one on its own offset, so the network behind
   the mark looks alive instead of printed on the page.

   A bright star is three parts: a hot core that pulses, a soft bloom behind
   it, and a ring that expands and fades away. The ring is what makes the
   flash read as a twinkle instead of a flicker -- a dot that changes size
   this small is invisible in motion. */
html[data-theme="cyber"] .hero__net .net-star {
  animation: cyber-twinkle 3.4s ease-in-out infinite;
}
html[data-theme="cyber"] .hero__net .net-star-halo {
  transform-box: fill-box;
  transform-origin: center;
  animation: cyber-twinkle-halo 3.4s ease-out infinite;
}
html[data-theme="cyber"] .hero__net .net-star-bloom {
  animation: cyber-twinkle-bloom 3.4s ease-in-out infinite;
}
html[data-theme="cyber"] .hero__net .net-star-green {
  animation: cyber-twinkle-green 3.8s ease-in-out infinite;
}
html[data-theme="cyber"] .hero__net .net-node {
  animation: cyber-twinkle-soft 5.4s ease-in-out infinite;
}
@keyframes cyber-twinkle {
  0%, 100% { opacity: .05; }
  40%      { opacity: 1; }
}
@keyframes cyber-twinkle-halo {
  0%   { transform: scale(.45); opacity: 0; }
  10%  { opacity: .85; }
  40%  { opacity: .45; }
  100% { transform: scale(4.4); opacity: 0; }
}
@keyframes cyber-twinkle-bloom {
  0%, 100% { opacity: 0; }
  40%      { opacity: .3; }
}
@keyframes cyber-twinkle-green {
  0%, 100% { opacity: .12; }
  45%      { opacity: 1; }
}
@keyframes cyber-twinkle-soft {
  0%, 100% { opacity: .08; }
  50%      { opacity: .62; }
}

/* a slow radar sweep over the brand mark */
@media (min-width: 960px) {
  html[data-theme="cyber"] .hero__visual::before {
    content: "";
    position: absolute;
    left: 50%; top: 50%;
    width: 320px; height: 320px;
    margin: -160px 0 0 -160px;
    border-radius: 50%;
    background: conic-gradient(from 0deg, var(--cyber-glow-mint), transparent 34%);
    -webkit-mask-image: radial-gradient(circle, #000 0 58%, transparent 72%);
    mask-image: radial-gradient(circle, #000 0 58%, transparent 72%);
    animation: cyber-sweep 8s linear infinite;
    pointer-events: none;
  }
}
@keyframes cyber-sweep {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* ------------------------------------------------------- micro motion ----
   A live-status dot on the eyebrow, and a card that lifts a little when the
   pointer arrives. */
html[data-theme="cyber"] .eyebrow { position: relative; padding-left: 18px; }
html[data-theme="cyber"] .eyebrow::before {
  content: "";
  position: absolute;
  left: 0; top: .42em;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--brand-700);
  animation: cyber-ping 2.6s ease-out infinite;
}
html[data-theme="cyber"] .band-dark .eyebrow::before { background: var(--brand-300); }
@keyframes cyber-ping {
  0%   { box-shadow: 0 0 0 0 rgba(54, 230, 154, .45); }
  70%  { box-shadow: 0 0 0 9px rgba(54, 230, 154, 0); }
  100% { box-shadow: 0 0 0 0 rgba(54, 230, 154, 0); }
}

/* ----------------------------------------------------------------- print --
   A dark page prints as a black rectangle, so the print stylesheet puts the
   whole document back onto paper. */
@media print {
  html[data-theme="cyber"] {
    --surface: #ffffff;
    --surface-alt: #ffffff;
    --surface-band: #ffffff;
    --tint-50: #ffffff;
    --tint-100: #ffffff;
    --ink: #000000;
    --ink-2: #222222;
    --ink-3: #444444;
    --ink-inv: #000000;
    --ink-inv-2: #222222;
    --line: #cccccc;
    --line-2: #999999;
    --line-dark: #cccccc;
    --brand-900: #ffffff;
    --brand: #009151;
    --brand-700: #006b3d;
    --brand-600: #006b3d;
    --brand-800: #00512f;
    --brand-300: #006b3d;
    --cyber-panel: #ffffff;
    --cyber-panel-hover: #ffffff;
  }
  html[data-theme="cyber"] body { background: #fff !important; }
  html[data-theme="cyber"] .hero,
  html[data-theme="cyber"] .band-dark,
  html[data-theme="cyber"] .section--alt,
  html[data-theme="cyber"] .page-head,
  html[data-theme="cyber"] .site-footer { background: #fff !important; }
  html[data-theme="cyber"] .hero::before { display: none !important; }
  html[data-theme="cyber"] .hero__net { display: none !important; }
  html[data-theme="cyber"] .band-dark,
  html[data-theme="cyber"] .band-dark h2,
  html[data-theme="cyber"] .band-dark h3,
  html[data-theme="cyber"] .band-dark p,
  html[data-theme="cyber"] .band-dark a,
  html[data-theme="cyber"] .band-dark .link-arrow,
  html[data-theme="cyber"] .band-dark .facts b,
  html[data-theme="cyber"] .band-dark .facts span,
  html[data-theme="cyber"] .band-dark .contact-list .v,
  html[data-theme="cyber"] .band-dark .contact-list .v a { color: #000 !important; }
  html[data-theme="cyber"] .sol,
  html[data-theme="cyber"] .schematic,
  html[data-theme="cyber"] .map__cta,
  html[data-theme="cyber"] .side-nav { background: #fff !important; border-color: #999 !important; }
  html[data-theme="cyber"] .sol__title,
  html[data-theme="cyber"] .sol__desc,
  html[data-theme="cyber"] .sol__more { color: #000 !important; }
  /* the enhancement layer must not leave anything invisible on paper */
  html.cyber-js .cyber-reveal { opacity: 1 !important; transform: none !important; }
  html[data-theme="cyber"] .hero__visual::before { display: none !important; }
  html[data-theme="cyber"] .hero::after { display: none !important; }
  html[data-theme="cyber"] .eyebrow::before { display: none !important; }
  /* the year index is a screen aid; on paper it would only take up a column */
  html[data-theme="cyber"] .cyber-toc { display: none !important; }
  html[data-theme="cyber"] .problems__item::before,
  html[data-theme="cyber"] .sol::before,
  html[data-theme="cyber"] .flow__step::before,
  html[data-theme="cyber"] .lifecycle__step::before,
  html[data-theme="cyber"] .insight::before,
  html[data-theme="cyber"] .contact-list li::before,
  html[data-theme="cyber"] .about__grid .facts li::before {
    background-color: #444 !important;
  }
  html[data-theme="cyber"] .flow__step,
  html[data-theme="cyber"] .lifecycle__step,
  html[data-theme="cyber"] .cyber-panel {
    background: #fff !important;
    border-color: #999 !important;
    box-shadow: none !important;
    transform: none !important;
  }
  html[data-theme="cyber"] .cyber-panel__code,
  html[data-theme="cyber"] .cyber-panel__badge,
  html[data-theme="cyber"] .cyber-panel__title,
  html[data-theme="cyber"] .cyber-panel__desc,
  html[data-theme="cyber"] .cyber-panel__bullets li,
  html[data-theme="cyber"] .cyber-panel__metaitem dt,
  html[data-theme="cyber"] .cyber-panel__metaitem dd { color: #000 !important; }
  html[data-theme="cyber"] .cyber-panel__code {
    background: #fff !important; border-color: #999 !important;
  }
  html[data-theme="cyber"] .cyber-panel__bullets li::before { background-color: #444 !important; }
  html[data-theme="cyber"] .cyber-panel__meta { border-top-color: #999 !important; }
  html[data-theme="cyber"] .cyber-partner {
    background: #fff !important; border-color: #999 !important; transform: none !important;
  }
  html[data-theme="cyber"] .cyber-partner__name,
  html[data-theme="cyber"] .cyber-partner__desc { color: #000 !important; }
  html[data-theme="cyber"] .flow::before { display: none !important; }
}