@charset "UTF-8";
/* ==========================================================================
   VODISOFT — Design System
   --------------------------------------------------------------------------
   A corporate software-services identity on the site's original dark navy /
   indigo / violet palette. Buyer-facing, not developer-tool: no terminal
   chrome, no code-comment labels. Mono type appears only inside code blocks.

   Dark is the default. Light is opt-in via the toggle.

   No Bootstrap. No Font Awesome. No render-blocking third-party CSS.
   Icons ship as an inline SVG sprite (see Partials/IconSprite.cshtml).

   Contents
     01  Tokens
     02  Reset & base
     03  Typography
     04  Layout primitives
     05  Buttons
     06  Tags, badges, eyebrows
     07  Navigation
     08  Hero
     09  Cards
     10  Stats & proof
     11  Forms
     12  Alerts
     13  Breadcrumb & page header
     14  Prose (CMS / markdown output)
     15  Gallery
     16  CTA band
     17  Footer
     18  Utilities
     19  Motion & preferences
     20  Print
   ========================================================================== */


/* 01  TOKENS
   Tokens live in tokens.css, which every surface loads first.
   ========================================================================== */

/* 02  RESET & BASE
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

/* Components below set an explicit `display`, which outranks the user-agent
   rule for [hidden]. Without this, toggling `el.hidden` has no visual effect —
   it silently broke the projects filter and the docs search. */
[hidden] { display: none !important; }

* { margin: 0; }

html {
  width: 100%;
  max-width: 100%;
  overflow-x: clip;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--nav-h) + var(--s-5));
  tab-size: 2;
}

body {
  width: 100%;
  max-width: 100%;
  min-height: 100svh;
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--t-md);
  line-height: var(--lh-base);
  font-feature-settings: "cv02", "cv03", "cv04", "cv11";
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}

img, svg, video, canvas { display: block; max-width: 100%; }
img, video { height: auto; }

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

button { background: none; border: 0; cursor: pointer; }

a { color: var(--brand-ink); text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { color: var(--brand-hover); }

ul[class], ol[class] { list-style: none; padding: 0; }

hr { height: 1px; border: 0; background: var(--line); }

::selection { background: var(--brand-wash); color: var(--text); }

/* Focus — visible for keyboard users on every interactive surface. */
:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}
:focus:not(:focus-visible) { outline: none; }

/* Scrollbar */
@supports selector(::-webkit-scrollbar) {
  ::-webkit-scrollbar { width: 10px; height: 10px; }
  ::-webkit-scrollbar-track { background: var(--bg-alt); }
  ::-webkit-scrollbar-thumb {
    background: var(--line-strong);
    border: 2px solid var(--bg-alt);
    border-radius: var(--r-full);
  }
  ::-webkit-scrollbar-thumb:hover { background: var(--text-faint); }
}

/* Skip link */
.skip-link {
  position: absolute;
  top: var(--s-2);
  left: var(--s-2);
  z-index: var(--z-skip);
  padding: var(--s-3) var(--s-4);
  font-weight: 600;
  color: var(--text-on-brand);
  background: var(--brand);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-3);
  transform: translateY(-160%);
  transition: transform var(--dur-2) var(--ease);
}
.skip-link:focus-visible { transform: translateY(0); color: var(--text-on-brand); }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}


/* 02b PAGE LOADER
   --------------------------------------------------------------------------
   The branded loader is back. What is not back is the old implementation:
   it blurred every child of <body>, which is an expensive full-page filter and
   also broke position:fixed on the navbar. A plain fading overlay looks the
   same and costs nothing.
   ========================================================================== */
#loader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  /* Pinned to the brand navy in both themes — the GIF frames are composited
     onto this exact colour, so the artwork has no visible edge. */
  background: #07101F;
  transition: opacity var(--dur-4) var(--ease), visibility var(--dur-4);
}
#loader img {
  width: 260px;
  height: 260px;
  max-width: 62vw;
  max-height: 62vw;
  object-fit: contain;
}
#loader[data-done="true"] { opacity: 0; visibility: hidden; }
/* Never trap content behind the loader if the script fails to run. */
html:not(.js) #loader { display: none; }
@media (prefers-reduced-motion: reduce) {
  #loader { transition: none; }
}


/* 03  TYPOGRAPHY
   ========================================================================== */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--text);
  text-wrap: balance;
}

h1 { font-size: var(--t-4xl); line-height: var(--lh-tight); }
h2 { font-size: var(--t-3xl); }
h3 { font-size: var(--t-2xl); }
h4 { font-size: var(--t-xl); }
h5 { font-size: var(--t-lg); }
h6 { font-size: var(--t-md); letter-spacing: var(--tracking-flat); }

p { text-wrap: pretty; }

.display {
  font-family: var(--font-display);
  font-size: var(--t-5xl);
  font-weight: 700;
  line-height: var(--lh-tight);
  letter-spacing: -0.035em;
}

.lede {
  max-width: 58ch;
  font-size: var(--t-lg);
  line-height: var(--lh-loose);
  color: var(--text-muted);
  text-wrap: pretty;
}

.mono {
  font-family: var(--font-mono);
  font-size: 0.92em;
  font-variant-ligatures: none;
}

.num {
  font-family: var(--font-display);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
  letter-spacing: -0.01em;
}


/* 04  LAYOUT PRIMITIVES
   ========================================================================== */
.wrap {
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.wrap--wide   { max-width: 1400px; }
.wrap--narrow { max-width: 820px; }

.section { padding-block: var(--section-y); }
.section--tight { padding-block: calc(var(--section-y) * .62); }
.section--alt   { background: var(--bg-alt); }
.section--sunken{ background: var(--bg-sunken); }

/* Hairline rule between adjacent bands of the same colour only. */
.section--alt + .section--alt,
.section + .section:not(.section--alt):not(.section--sunken) {
  border-top: 1px solid var(--line-soft);
}

.section__head {
  max-width: 62ch;
  margin-bottom: var(--s-8);
}
.section__head--center {
  margin-inline: auto;
  text-align: center;
}
.section__head p { margin-top: var(--s-4); }

/* Flex rather than grid, so a last row that is not full centres itself
   instead of hanging left. CSS Grid cannot centre an incomplete final row. */
.grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s-5);
}
.grid > * { flex: 0 1 100%; min-width: 0; }

@media (min-width: 40rem) {
  .grid--2 > *, .grid--3 > * { flex-basis: calc((100% - var(--s-5)) / 2); }
  .grid--4 > * { flex-basis: calc((100% - var(--s-5)) / 2); }
}
@media (min-width: 64rem) {
  .grid--2 > * { flex-basis: calc((100% - var(--s-5)) / 2); }
  .grid--3 > * { flex-basis: calc((100% - 2 * var(--s-5)) / 3); }
  .grid--4 > * { flex-basis: calc((100% - 3 * var(--s-5)) / 4); }
}

.split {
  display: grid;
  gap: clamp(var(--s-6), 4vw, var(--s-9));
  align-items: center;
  grid-template-columns: 1fr;
}
@media (min-width: 62rem) {
  .split { grid-template-columns: 1fr 1fr; }
  .split--60-40 { grid-template-columns: 3fr 2fr; }
  .split--40-60 { grid-template-columns: 2fr 3fr; }
}

.stack   { display: flex; flex-direction: column; gap: var(--s-4); }
.stack--sm { gap: var(--s-2); }
.stack--lg { gap: var(--s-6); }

.cluster {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  align-items: center;
}
.cluster--center { justify-content: center; }
.cluster--end    { justify-content: flex-end; }
.cluster--between{ justify-content: space-between; }

/* A calm brand wash behind the hero. Replaces the blueprint grid, which read
   as engineering-drawing chrome and pushed the brand towards developer tooling. */
.blueprint {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--bg);
}
.blueprint::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(58rem 34rem at 78% -12%, var(--glow-a), transparent 64%),
    radial-gradient(46rem 30rem at 6% 106%, var(--glow-b), transparent 62%);
  pointer-events: none;
}
/* A lit hairline closing the hero, as the original design had. */
.blueprint::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--brand), var(--violet-500), var(--accent), transparent);
  opacity: .55;
  pointer-events: none;
}


/* 05  BUTTONS
   ========================================================================== */
.btn {
  --btn-bg: transparent;
  --btn-fg: var(--text);
  --btn-bd: var(--line-strong);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  padding: 0.6875rem 1.125rem;
  font-family: var(--font-body);
  font-size: var(--t-base);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: var(--tracking-flat);
  white-space: nowrap;
  text-decoration: none;
  color: var(--btn-fg);
  background: var(--btn-bg);
  border: 1px solid var(--btn-bd);
  border-radius: var(--r-md);
  cursor: pointer;
  transition: background var(--dur-2) var(--ease),
              border-color var(--dur-2) var(--ease),
              color var(--dur-2) var(--ease),
              transform var(--dur-1) var(--ease),
              box-shadow var(--dur-2) var(--ease);
}
.btn:hover { color: var(--btn-fg); }
.btn:active { transform: translateY(1px); }
.btn[disabled], .btn[aria-disabled="true"] {
  opacity: .55;
  pointer-events: none;
}
.btn .ico { flex: none; }

.btn--primary {
  --btn-fg: var(--text-on-brand);
  --btn-bd: transparent;
  background: var(--grad-brand);
  box-shadow: var(--shadow-brand);
}
.btn--primary:hover {
  background: var(--grad-hover);
  box-shadow: 0 10px 32px rgba(91, 110, 248, 0.45);
}

.btn--solid {
  --btn-bg: var(--text);
  --btn-fg: var(--bg);
  --btn-bd: var(--text);
}
.btn--solid:hover { --btn-bg: var(--text-soft); --btn-bd: var(--text-soft); }

.btn--outline {
  --btn-bg: var(--surface);
  --btn-fg: var(--text);
  --btn-bd: var(--line-strong);
}
.btn--outline:hover {
  --btn-bg: var(--surface-hover);
  --btn-bd: var(--brand);
  --btn-fg: var(--brand-ink);
}

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--text-muted);
  --btn-bd: transparent;
}
.btn--ghost:hover {
  --btn-bg: var(--surface-inset);
  --btn-fg: var(--text);
}

.btn--lg  { padding: 0.875rem 1.5rem; font-size: var(--t-md); border-radius: var(--r-lg); }
.btn--sm  { padding: 0.4375rem 0.75rem; font-size: var(--t-sm); border-radius: var(--r-sm); }
.btn--block { width: 100%; }

.btn--icon {
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border-radius: var(--r-md);
}
.btn--icon.btn--sm { width: 2rem; height: 2rem; }

/* Text link with a travelling arrow. */
.link-more {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--t-base);
  font-weight: 600;
  color: var(--brand-ink);
  text-decoration: none;
}
.link-more .ico { transition: transform var(--dur-2) var(--ease); }
.link-more:hover .ico { transform: translateX(3px); }


/* 06  TAGS, BADGES, EYEBROWS
   ========================================================================== */
/* Section label. A short rule plus small caps — a professional-services
   convention. The previous `//` mono form read as a code comment. */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  margin-bottom: var(--s-4);
  font-family: var(--font-body);
  font-size: var(--t-sm);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--brand-ink);
}
.eyebrow::before {
  content: "";
  width: 1.75rem;
  height: 2px;
  background: var(--grad-brand);
  border-radius: var(--r-full);
}
.section__head--center .eyebrow { justify-content: center; }

.tag {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  padding: 0.25rem 0.625rem;
  font-family: var(--font-body);
  font-size: var(--t-xs);
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.01em;
  color: var(--text-muted);
  background: var(--surface-inset);
  border: 1px solid var(--line);
  border-radius: var(--r-full);
}
.tag--brand  { color: var(--violet-300); background: rgba(139, 92, 246, .16); border-color: rgba(139, 92, 246, .38); }
.tag--accent { color: var(--accent-ink); background: var(--accent-wash); border-color: var(--accent-edge); }

.meta {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--t-sm);
  color: var(--text-faint);
}
.meta .ico { color: var(--text-faint); }

.dot-sep::before {
  content: "";
  display: inline-block;
  width: 3px; height: 3px;
  margin-inline: var(--s-3) var(--s-2);
  vertical-align: middle;
  background: currentColor;
  border-radius: 50%;
  opacity: .5;
}

/* Inline SVG icon sizing */
.ico {
  width: 1.125em;
  height: 1.125em;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ico--sm { width: 1em;    height: 1em; }
.ico--lg { width: 1.5em;  height: 1.5em; }
.ico--xl { width: 2rem;   height: 2rem; stroke-width: 1.5; }
.ico--fill { fill: currentColor; stroke: none; }


/* 07  NAVIGATION
   ========================================================================== */
.nav {
  position: sticky;
  top: 0;
  z-index: var(--z-nav);
  background: var(--chrome);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-2) var(--ease),
              background var(--dur-2) var(--ease);
}
.nav[data-stuck="true"] {
  border-bottom-color: var(--line);
  background: var(--chrome-solid);
}
@supports not (backdrop-filter: blur(1px)) {
  .nav { background: var(--bg); }
}

.nav__inner {
  display: flex;
  align-items: center;
  gap: var(--s-5);
  height: var(--nav-h);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  font-family: var(--font-display);
  font-size: 1.3125rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--text);
  text-decoration: none;
  flex: none;
}
.brand:hover { color: var(--text); }
/* The mark is a transparent PNG — no plate, no rounding. */
.brand__mark {
  width: 40px;
  height: 40px;
  flex: none;
  object-fit: contain;
}
.foot .brand__mark { width: 44px; height: 44px; }
@media (max-width: 30rem) { .brand__mark { width: 34px; height: 34px; } }
.brand__name {
  background: var(--grad-brand);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--indigo-400);
}
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .brand__name { color: var(--indigo-400); -webkit-text-fill-color: currentColor; }
}
.brand__suffix{ color: var(--text-faint); font-weight: 500; }

.nav__links {
  display: flex;
  align-items: center;
  gap: var(--s-1);
  margin-inline: auto;
}
.nav__link {
  position: relative;
  padding: 0.5rem 0.75rem;
  font-size: var(--t-base);
  font-weight: 500;
  color: var(--text-muted);
  text-decoration: none;
  border-radius: var(--r-sm);
  transition: color var(--dur-2) var(--ease), background var(--dur-2) var(--ease);
}
.nav__link:hover { color: var(--text); background: var(--surface-inset); }
.nav__link[aria-current="page"] { color: var(--text); font-weight: 600; }
.nav__link[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 0.75rem; right: 0.75rem; bottom: 0.125rem;
  height: 2px;
  background: var(--brand);
  border-radius: var(--r-full);
}

.nav__actions {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  flex: none;
  margin-left: auto;
}

.nav__toggle { display: none; }

/* Menu / language dropdown */
.menu { position: relative; }
.menu__panel {
  position: absolute;
  top: calc(100% + var(--s-2));
  right: 0;
  min-width: 11rem;
  padding: var(--s-2);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-3);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity var(--dur-2) var(--ease),
              transform var(--dur-2) var(--ease),
              visibility var(--dur-2);
}
.menu__trigger[aria-expanded="true"] + .menu__panel {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.menu__item {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  width: 100%;
  padding: 0.5rem 0.625rem;
  font-size: var(--t-base);
  color: var(--text-soft);
  text-decoration: none;
  border-radius: var(--r-sm);
}
.menu__item:hover { color: var(--text); background: var(--surface-inset); }
.menu__item[aria-current="true"] { color: var(--brand-ink); font-weight: 600; }

/* Language switch.
   With exactly two languages a dropdown costs two interactions and hides the
   alternative. A segmented control shows both and switches in one click. */
.langswitch {
  display: inline-flex;
  align-items: center;
  padding: 2px;
  background: var(--surface-inset);
  border: 1px solid var(--line);
  border-radius: var(--r-full);
}
.langswitch__opt {
  padding: 0.3125rem 0.625rem;
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.4;
  color: var(--text-faint);
  text-decoration: none;
  border-radius: var(--r-full);
  transition: color var(--dur-2) var(--ease), background var(--dur-2) var(--ease);
}
.langswitch__opt:hover { color: var(--text); }
.langswitch__opt[aria-current="true"] {
  color: #fff;
  background: var(--grad-brand);
  box-shadow: var(--shadow-1);
}

/* Theme toggle shows the icon of the theme you would switch *to*. */
.theme-toggle .ico { transition: transform var(--dur-3) var(--ease-out); }
.theme-toggle:hover .ico { transform: rotate(18deg); }
.theme-toggle .ico--moon { display: none; }
:root[data-theme="dark"] .theme-toggle .ico--sun,
:root:not([data-theme="light"]) .theme-toggle .ico--sun { display: none; }
:root[data-theme="dark"] .theme-toggle .ico--moon,
:root:not([data-theme="light"]) .theme-toggle .ico--moon { display: block; }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .theme-toggle .ico--sun  { display: block; }
  :root:not([data-theme="dark"]) .theme-toggle .ico--moon { display: none; }
}

/* Mobile navigation */
@media (max-width: 63.99rem) {
  .nav__toggle {
    display: inline-flex;
    order: 3;
  }
  .nav__links {
    position: fixed;
    inset: var(--nav-h) 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin: 0;
    padding: var(--s-3) var(--gutter) var(--s-5);
    background: var(--bg);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-3);
    transform: translateY(-8px);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--dur-2) var(--ease),
                transform var(--dur-2) var(--ease),
                visibility var(--dur-2);
  }
  .nav__links[data-open="true"] {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
  .nav__link {
    padding: 0.8125rem 0.5rem;
    font-size: var(--t-lg);
    border-radius: var(--r-sm);
  }
  .nav__link[aria-current="page"]::after { display: none; }
  .nav__link[aria-current="page"] {
    background: var(--brand-wash);
    color: var(--brand-ink);
  }
  .nav__actions { margin-left: auto; }
  .nav__cta { display: none; }
}


/* 08  HERO
   ========================================================================== */
.hero {
  position: relative;
  padding-block: clamp(3rem, 1.5rem + 6vw, 6rem) clamp(3rem, 2rem + 4vw, 5rem);
  overflow: hidden;
}

.hero__grid {
  display: grid;
  gap: clamp(var(--s-7), 5vw, var(--s-10));
  align-items: center;
  grid-template-columns: 1fr;
}
@media (min-width: 64rem) {
  .hero__grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); }
}

/* Constrained so the headline breaks into three balanced lines instead of the
   six-line wall the previous build produced at desktop width. */
.hero__title {
  max-width: 18ch;
  font-size: var(--t-5xl);
  letter-spacing: -0.038em;
  line-height: 1.02;
}
@media (min-width: 48rem) { .hero__title { max-width: 15ch; } }

.hero__title em {
  font-style: normal;
  color: var(--brand-ink);
}

.hero__lede {
  max-width: 46ch;
  margin-top: var(--s-5);
  font-size: var(--t-lg);
  line-height: var(--lh-loose);
  color: var(--text-muted);
}

.hero__actions { margin-top: var(--s-7); }

.hero__note {
  margin-top: var(--s-5);
  font-size: var(--t-sm);
  color: var(--text-faint);
}

.hero__art {
  position: relative;
  display: grid;
  place-items: center;
}
.hero__art img {
  width: 100%;
  max-width: 520px;
  height: auto;
}

/* 08b CORPORATE BLOCKS
   --------------------------------------------------------------------------
   The blocks a services buyer looks for: who you have worked with, which
   sectors you know, what clients say, and who is behind the company.
   ========================================================================== */

/* -- client logo strip ------------------------------------------------------ */
.clients {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(var(--s-5), 4vw, var(--s-9));
}
.clients__logo {
  max-height: 2rem;
  width: auto;
  opacity: .6;
  filter: grayscale(1);
  transition: opacity var(--dur-2) var(--ease), filter var(--dur-2) var(--ease);
}
.clients__logo:hover { opacity: 1; filter: none; }
.clients__label {
  width: 100%;
  margin-bottom: var(--s-5);
  font-size: var(--t-sm);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-align: center;
  color: var(--text-faint);
}

/* -- sectors ---------------------------------------------------------------- */
/* Fixed column counts rather than auto-fit: with six sectors, auto-fit produced
   a five-plus-one row and a large empty cell. 2x3 and 3x2 always fill. */
.sectors {
  display: grid;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  grid-template-columns: 1fr;
}
@media (min-width: 34rem) { .sectors { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem) { .sectors { grid-template-columns: repeat(3, 1fr); } }
.sector {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-5);
  background: var(--surface);
  font-weight: 600;
  color: var(--text-soft);
  transition: background var(--dur-2) var(--ease);
}
.sector:hover { background: var(--surface-hover); }
.sector .ico { color: var(--brand); }

/* -- testimonial ------------------------------------------------------------ */
.quote {
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
  padding: clamp(var(--s-6), 3vw, var(--s-8));
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
}
.quote__text {
  font-family: var(--font-display);
  font-size: var(--t-xl);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: -0.015em;
  color: var(--text);
  text-wrap: pretty;
}
.quote__text::before { content: "\201C"; }
.quote__text::after  { content: "\201D"; }
.quote__by { display: flex; align-items: center; gap: var(--s-3); }
.quote__avatar {
  width: 2.75rem; height: 2.75rem;
  object-fit: cover;
  border-radius: 50%;
  border: 1px solid var(--line);
  flex: none;
}
.quote__name { font-weight: 600; color: var(--text); }
.quote__role { font-size: var(--t-sm); color: var(--text-muted); }

/* -- people ----------------------------------------------------------------- */
.person { text-align: center; }
.person__photo {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  margin-bottom: var(--s-4);
  background: var(--surface-inset);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}
.person__name { font-weight: 600; color: var(--text); }
.person__role { font-size: var(--t-sm); color: var(--text-muted); }

/* -- capability list (business framing, not a tech spec sheet) -------------- */
.checks { display: flex; flex-direction: column; gap: var(--s-4); }
.checks li {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  color: var(--text-soft);
}
.checks .ico {
  margin-top: .25em;
  color: var(--brand);
  flex: none;
}
.checks strong { color: var(--text); font-weight: 600; }

/* -- hero showcase: a real delivered project, not a terminal ---------------- */
.showcase {
  position: relative;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-4);
}
.showcase__media {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--surface-inset);
  border-bottom: 1px solid var(--line);
}
.showcase__media img { width: 100%; height: 100%; object-fit: cover; }
.showcase__body {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding: var(--s-5);
}
.showcase__label {
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.showcase__title { font-size: var(--t-lg); font-weight: 700; letter-spacing: -0.015em; }
.showcase__text { font-size: var(--t-base); color: var(--text-muted); }


/* 09  CARDS
   ========================================================================== */
/* On a light ground a white card needs elevation, not just a hairline, or the
   panels dissolve into the page. */
:root[data-theme="light"] .card,
:root[data-theme="light"] .quote,
:root[data-theme="light"] .form-panel { box-shadow: var(--shadow-2); }
:root[data-theme="light"] .card:hover { box-shadow: 0 0 0 1px rgba(139, 92, 246, .28), var(--shadow-3); }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .card,
  :root:not([data-theme="dark"]) .quote,
  :root:not([data-theme="dark"]) .form-panel { box-shadow: var(--shadow-2); }
}
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  transition: border-color var(--dur-2) var(--ease),
              box-shadow var(--dur-2) var(--ease),
              transform var(--dur-2) var(--ease);
}
.card:hover {
  border-color: rgba(139, 92, 246, .45);
  box-shadow: 0 0 0 1px rgba(139, 92, 246, .3), 0 16px 44px rgba(139, 92, 246, .22), var(--shadow-2);
}

/* The accent rail is always lit. Hover brightens it and adds a bloom rather
   than being the only thing that reveals it. */
.card--rail::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 2px;
  z-index: 2;
  background: var(--grad-rail);
  opacity: .55;
  pointer-events: none;
  transition: opacity var(--dur-3) var(--ease), box-shadow var(--dur-3) var(--ease);
}
.card--rail:hover::before,
.card--rail:focus-within::before {
  opacity: 1;
  box-shadow: 0 0 12px 1px rgba(139, 92, 246, .65);
}
.card--rail:hover, .card--rail:focus-within { transform: translateY(-3px); }

.card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: var(--s-3);
  padding: var(--s-6);
}
.card__body--tight { padding: var(--s-5); }

/* The card body is a flex column, so a direct-child tag would stretch to the
   full width instead of hugging its label. */
.card__body > .tag,
.card__body > .cluster > .tag { align-self: flex-start; }

.card__title {
  font-size: var(--t-lg);
  font-weight: 600;
  letter-spacing: -0.015em;
}
.card__title a { color: inherit; text-decoration: none; }
.card__title a::after {
  content: "";
  position: absolute;
  inset: 0;
}
.card--link .card__title a::after { z-index: 1; }
.card__title a:hover { color: var(--brand-ink); }

.card__text {
  font-size: var(--t-base);
  line-height: var(--lh-base);
  color: var(--text-muted);
}
.card__text--clamp {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  margin-top: auto;
  padding-top: var(--s-4);
}

.card__media {
  position: relative;
  aspect-ratio: 16 / 9;          /* store banners are ~16:9; less cropping */
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 30% 0%, rgba(91, 110, 248, .16), transparent 60%),
    var(--surface-inset);
  border-bottom: 1px solid var(--line);
}
/* If the remote file fails, hide the broken-image chrome and let the branded
   placeholder behind it show through. */
.card__media img[data-failed="true"] { display: none; }
.card__media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none' stroke='%237B8EFA' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' opacity='.5'%3E%3Cpath d='M24 22 14 32l10 10M40 22l10 10-10 10M37 18 27 46'/%3E%3C/svg%3E") center / 46px no-repeat;
  opacity: 0;
  pointer-events: none;
}
.card__media:has(img[data-failed="true"])::after { opacity: 1; }
.card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-4) var(--ease-out);
}
.card:hover .card__media img { transform: scale(1.05); }

/* Overlay with the live / App Store / Play links, as the original had. */
.card__links {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-3);
  background: linear-gradient(135deg, rgba(68, 85, 232, .90), rgba(124, 58, 237, .90));
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-2) var(--ease);
}
.card:hover .card__links,
.card:focus-within .card__links { opacity: 1; }
.card__links a {
  display: grid;
  place-items: center;
  width: 2.75rem; height: 2.75rem;
  color: #1a1636;
  background: #fff;
  border-radius: var(--r-md);
  box-shadow: var(--shadow-2);
  transform: translateY(6px);
  opacity: 0;
  pointer-events: auto;
  transition: transform var(--dur-3) var(--ease-out), opacity var(--dur-3) var(--ease-out), background var(--dur-2);
}
.card:hover .card__links a,
.card:focus-within .card__links a { transform: translateY(0); opacity: 1; }
.card__links a:nth-child(2) { transition-delay: 60ms; }
.card__links a:nth-child(3) { transition-delay: 120ms; }
.card__links a:hover { background: var(--indigo-300); color: #10143a; }
/* Touch devices get no hover, so reveal the row permanently there. */
@media (hover: none) {
  .card__links { position: relative; opacity: 1; background: none; backdrop-filter: none;
                 justify-content: flex-start; padding: var(--s-4) var(--s-5) 0; }
  .card__links a { transform: none; opacity: 1; width: 2.25rem; height: 2.25rem;
                   color: var(--brand-ink); background: var(--brand-wash);
                   border: 1px solid var(--brand-edge); box-shadow: none; }
}

/* Feature card icon — square, hairline, filled on hover. */
.card__icon {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  margin-bottom: var(--s-2);
  color: var(--indigo-400);
  background: linear-gradient(135deg, rgba(91, 110, 248, .18), rgba(139, 92, 246, .18));
  border: 1px solid rgba(139, 92, 246, .32);
  border-radius: var(--r-md);
  transition: background var(--dur-2) var(--ease), color var(--dur-2) var(--ease);
}
.card:hover .card__icon {
  color: #fff;
  background: var(--grad-brand);
  border-color: transparent;
  box-shadow: 0 8px 22px rgba(139, 92, 246, .42);
}

/* Emphasis card — a tinted surface rather than an engineering corner tick. */
.card--ticked {
  background: var(--surface-inset);
  border-color: var(--line);
}

/* Link overlay for cards whose whole surface is clickable. */
.card--link { cursor: pointer; }

/* Post card author row */
.byline {
  display: flex;
  align-items: center;
  gap: var(--s-3);
}
.byline__avatar {
  width: 2rem; height: 2rem;
  object-fit: cover;
  border-radius: 50%;
  border: 1px solid var(--line);
  flex: none;
}
.byline__name { font-size: var(--t-sm); font-weight: 600; color: var(--text-soft); }
.byline__date { font-size: var(--t-xs); color: var(--text-faint); }


/* 10  STATS & PROOF
   --------------------------------------------------------------------------
   The original layout: a circular brand-washed icon, a large gradient numeral
   and a quiet label underneath.
   ========================================================================== */
.stats {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s-6) var(--s-4);
}
.stat {
  flex: 1 1 10rem;
  max-width: 15rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-4) var(--s-2);
  text-align: center;
}
.stat__icon {
  display: grid;
  place-items: center;
  width: 68px; height: 68px;
  margin-bottom: var(--s-2);
  color: var(--indigo-400);
  background: rgba(91, 110, 248, .14);
  border: 1px solid rgba(139, 92, 246, .34);
  border-radius: 50%;
  transition: transform var(--dur-2) var(--ease),
              background var(--dur-2) var(--ease),
              color var(--dur-2) var(--ease),
              box-shadow var(--dur-2) var(--ease);
}
.stat:hover .stat__icon {
  color: #fff;
  background: var(--grad-brand);
  border-color: transparent;
  transform: translateY(-3px) scale(1.06);
  box-shadow: 0 10px 26px rgba(139, 92, 246, .45);
}
.stat__num {
  background: var(--grad-rail);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--indigo-400);
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 1.7rem + 2.2vw, 3.25rem);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.04em;
  line-height: 1.05;
}
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .stat__num { -webkit-text-fill-color: currentColor; }
}
.stat__label { font-size: var(--t-base); color: var(--text-muted); }
.stat__note  { font-size: var(--t-xs);   color: var(--text-faint); }

/* Proof strip — verifiable technical signals. */
.proof {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3) var(--s-6);
}
.proof__item {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--t-sm);
  color: var(--text-muted);
  text-decoration: none;
}
.proof__item:hover { color: var(--text); }
.proof__item .ico { color: var(--text-faint); }


/* 11  FORMS
   ========================================================================== */
.field { display: flex; flex-direction: column; gap: var(--s-2); }

.label {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--text-soft);
}
.label__req { color: var(--danger); }

.input,
.textarea,
.select {
  width: 100%;
  padding: 0.6875rem 0.875rem;
  font-size: var(--t-base);
  line-height: 1.5;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  transition: border-color var(--dur-2) var(--ease),
              box-shadow var(--dur-2) var(--ease),
              background var(--dur-2) var(--ease);
}
.input::placeholder, .textarea::placeholder { color: var(--text-faint); }
.input:hover, .textarea:hover, .select:hover { border-color: var(--text-faint); }
.input:focus, .textarea:focus, .select:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-wash);
}
.input[aria-invalid="true"],
.textarea[aria-invalid="true"] { border-color: var(--danger); }
.input[aria-invalid="true"]:focus,
.textarea[aria-invalid="true"]:focus {
  box-shadow: 0 0 0 3px var(--danger-wash);
}

.textarea { min-height: 9rem; resize: vertical; }

.select {
  appearance: none;
  padding-right: 2.25rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2369738C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 1.125rem;
}

.field__error {
  font-size: var(--t-sm);
  color: var(--danger);
}
.field__error:empty { display: none; }

.field__hint {
  font-size: var(--t-sm);
  color: var(--text-faint);
}

.honeypot {
  position: absolute !important;
  left: -9999px;
  width: 1px; height: 1px;
  opacity: 0;
}

.form-panel {
  padding: var(--s-5);
  background: var(--surface-inset);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}
.form-panel__q {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  margin-bottom: var(--s-3);
  font-size: var(--t-base);
  font-weight: 600;
  color: var(--text-soft);
}

/* Busy state on submit */
.btn[data-busy="true"] .ico--send { display: none; }
.btn[data-busy="true"]::before {
  content: "";
  width: 1em; height: 1em;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }


/* 12  ALERTS
   ========================================================================== */
.alert {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  padding: var(--s-4) var(--s-5);
  font-size: var(--t-base);
  border: 1px solid;
  border-radius: var(--r-md);
}
.alert .ico { margin-top: .15em; flex: none; }
.alert__body { flex: 1; }
.alert--ok     { color: var(--ok);     background: var(--ok-wash);     border-color: color-mix(in srgb, var(--ok) 30%, transparent); }
.alert--warn   { color: var(--warn);   background: var(--warn-wash);   border-color: color-mix(in srgb, var(--warn) 30%, transparent); }
.alert--danger { color: var(--danger); background: var(--danger-wash); border-color: color-mix(in srgb, var(--danger) 30%, transparent); }
.alert--info   { color: var(--brand-ink); background: var(--brand-wash); border-color: var(--brand-edge); }
.alert__close {
  margin: -.25rem -.25rem 0 0;
  padding: .25rem;
  color: inherit;
  opacity: .7;
  border-radius: var(--r-sm);
}
.alert__close:hover { opacity: 1; }


/* 13  BREADCRUMB & PAGE HEADER
   --------------------------------------------------------------------------
   Restores the original centred hero band: big title, centred trail, brand
   glow behind it.
   ========================================================================== */
.page-head {
  position: relative;
  overflow: hidden;
  padding-block: clamp(3rem, 2rem + 4vw, 5rem) clamp(2.25rem, 1.6rem + 2.6vw, 3.25rem);
  text-align: center;
  background: linear-gradient(135deg, var(--bg-alt) 0%, var(--surface) 55%, var(--bg-alt) 100%);
  border-bottom: 1px solid var(--line);
}
.page-head::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(36rem 18rem at 78% -30%, rgba(139, 92, 246, .20), transparent 62%),
    radial-gradient(30rem 16rem at 12% 130%, rgba(91, 110, 248, .16), transparent 60%);
  pointer-events: none;
}
.page-head::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--indigo-500), var(--violet-500), var(--cyan-500), transparent);
  opacity: .6;
}
.page-head > * { position: relative; }

.page-head__title {
  max-width: 24ch;
  margin: 0 auto;
  font-size: var(--t-3xl);
  font-weight: 800;
}
.page-head__lede {
  max-width: 62ch;
  margin: var(--s-4) auto 0;
  font-size: var(--t-lg);
  color: var(--text-muted);
}

/* Project details start with visual content immediately below the heading, so
   this variant keeps the title band informative without spending a full
   viewport on whitespace. */
.page-head--project {
  padding-block: clamp(2rem, 1.55rem + 2vw, 3.25rem) clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem);
}
.page-head--project .crumbs { margin-bottom: var(--s-3); }
.page-head--project .page-head__title {
  max-width: 30ch;
  font-size: clamp(2.15rem, 1.75rem + 1.6vw, 3.35rem);
}
.page-head--project .page-head__lede {
  margin-top: var(--s-2);
  font-size: clamp(1rem, .94rem + .28vw, 1.2rem);
}

/* On project details the product heading lives beside its store actions. The
   top band is therefore only a compact way back to the project index. */
.page-head--breadcrumb-only {
  padding-block: clamp(.75rem, .62rem + .5vw, 1.1rem);
}
.page-head--breadcrumb-only .crumbs { margin-bottom: 0; }

/* Blog landing keeps the calm hero treatment, but spends less vertical space
   before the reader reaches the articles. */
.page-head--blogs {
  padding-block: clamp(2.5rem, 2rem + 2vw, 3.75rem) clamp(2.25rem, 1.8rem + 1.5vw, 3rem);
}
.page-head--blogs .page-head__title {
  font-size: clamp(2.35rem, 1.95rem + 1.45vw, 3.25rem);
  letter-spacing: -.045em;
}
.page-head--blogs .page-head__lede {
  margin-top: var(--s-3);
  font-size: clamp(1rem, .95rem + .2vw, 1.125rem);
}

/* Article pages use this band only as navigation; the title and summary now
   live with the article so the page reads as one continuous composition. */
.page-head--article-breadcrumb {
  padding-block: clamp(.75rem, .62rem + .5vw, 1.1rem);
  text-align: left;
}
.page-head--article-breadcrumb .wrap { max-width: 1100px; }
.page-head--article-breadcrumb .crumbs {
  justify-content: flex-start;
  margin-bottom: 0;
}

.crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  margin-bottom: var(--s-4);
  font-size: var(--t-sm);
  color: var(--text-faint);
}
.crumbs li { display: inline-flex; align-items: center; gap: var(--s-2); }
.crumbs li + li::before { content: "\203A"; color: var(--text-faint); }
.crumbs a { color: var(--brand-ink); text-decoration: none; }
.crumbs a:hover { color: var(--accent-ink); text-decoration: underline; }
.crumbs [aria-current="page"] { color: var(--text-muted); }


/* 14  PROSE — CMS and markdown output
   ========================================================================== */
.prose {
  max-width: var(--measure);
  font-size: var(--t-lg);
  line-height: var(--lh-loose);
  color: var(--text-soft);
}
.prose > * + * { margin-top: 1.15em; }
.prose h2, .prose h3, .prose h4 { margin-top: 2em; margin-bottom: .6em; color: var(--text); }
.prose h2 { font-size: var(--t-2xl); }
.prose h3 { font-size: var(--t-xl); }
.prose h4 { font-size: var(--t-lg); }
.prose a  { color: var(--brand-ink); text-decoration: underline; }
.prose strong { color: var(--text); font-weight: 650; }
.prose ul, .prose ol { padding-left: 1.35em; }
.prose li + li { margin-top: .45em; }
.prose li::marker { color: var(--text-faint); }
.prose img { border-radius: var(--r-lg); border: 1px solid var(--line); }
.prose figure figcaption {
  margin-top: var(--s-3);
  font-size: var(--t-sm);
  color: var(--text-faint);
  text-align: center;
}
.prose blockquote {
  padding-left: var(--s-5);
  border-left: 2px solid var(--brand);
  color: var(--text-muted);
  font-style: normal;
}
.prose :not(pre) > code {
  padding: .15em .4em;
  font-family: var(--font-mono);
  font-size: .85em;
  color: var(--accent-ink);
  background: var(--surface-inset);
  border: 1px solid var(--line);
  border-radius: var(--r-xs);
}
.prose pre {
  padding: var(--s-5);
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: var(--t-sm);
  line-height: 1.7;
  color: var(--text-soft);
  background: var(--surface-inset);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}
.prose table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--t-base);
}
.prose thead th {
  padding: var(--s-3) var(--s-4);
  font-weight: 600;
  text-align: left;
  color: var(--text);
  background: var(--surface-inset);
  border-bottom: 1px solid var(--line-strong);
}
.prose tbody td {
  padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--line-soft);
}
.prose .table-scroll { overflow-x: auto; }

/* Table wrapper for wide CMS tables */
.prose table { display: block; overflow-x: auto; white-space: nowrap; }
@media (min-width: 48rem) {
  .prose table { display: table; white-space: normal; }
}


/* 14a BLOG INDEX
   ========================================================================== */
.blog-index-section {
  padding-top: clamp(2.25rem, 1.7rem + 2vw, 3.75rem);
  background:
    radial-gradient(36rem 22rem at 8% 8%, rgba(139, 92, 246, .07), transparent 68%),
    radial-gradient(34rem 20rem at 92% 22%, rgba(34, 211, 238, .06), transparent 70%);
}
.blog-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(var(--s-4), 2vw, var(--s-5));
}
.blog-card {
  min-width: 0;
  min-height: 20rem;
  overflow: hidden;
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-1);
}
.blog-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  z-index: 2;
  height: 2px;
  background: var(--grad-rail);
  opacity: .6;
  transition: opacity var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease);
}
.blog-card:hover,
.blog-card:focus-within {
  border-color: rgba(139, 92, 246, .38);
  box-shadow: 0 18px 42px rgba(40, 51, 112, .14), var(--shadow-1);
  transform: translateY(-3px);
}
.blog-card:hover::before,
.blog-card:focus-within::before {
  opacity: 1;
  box-shadow: 0 0 14px rgba(139, 92, 246, .48);
}
.blog-card__media {
  display: block;
  aspect-ratio: 16 / 8.5;
  overflow: hidden;
  background: var(--surface-inset);
  border-bottom: 1px solid var(--line);
}
.blog-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-4) var(--ease-out);
}
.blog-card:hover .blog-card__media img { transform: scale(1.035); }
.blog-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  min-height: 20rem;
  padding: clamp(var(--s-5), 2.4vw, var(--s-6));
}
.blog-card:has(.blog-card__media) .blog-card__body { min-height: 17rem; }
.blog-card__meta {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: .035em;
  color: var(--text-faint);
  text-transform: uppercase;
}
.blog-card__marker {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  color: var(--brand-ink);
  background: var(--brand-wash);
  border: 1px solid var(--brand-edge);
  border-radius: .75rem;
}
.blog-card__marker .ico { width: 1rem; height: 1rem; }
.blog-card__title {
  font-size: clamp(1.2rem, 1.1rem + .32vw, 1.45rem);
  line-height: 1.22;
  letter-spacing: -.025em;
  text-wrap: balance;
}
.blog-card__title a {
  color: var(--text);
  text-decoration: none;
}
.blog-card__title a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}
.blog-card__summary {
  display: -webkit-box;
  overflow: hidden;
  color: var(--text-muted);
  line-height: 1.65;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
}
.blog-card__tags,
.tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  padding: 0;
  list-style: none;
}
.blog-card__tags li,
.tag-list li { min-width: 0; }
.blog-card__tags span,
.tag-chip {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  padding: .38rem .68rem;
  overflow: hidden;
  font-size: var(--t-xs);
  font-weight: 600;
  line-height: 1.2;
  color: var(--text-muted);
  text-overflow: ellipsis;
  white-space: nowrap;
  background: var(--surface-inset);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-full);
}
.blog-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  margin-top: auto;
  padding-top: var(--s-4);
  border-top: 1px solid var(--line-soft);
}
.blog-card__author {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  gap: var(--s-2);
  overflow: hidden;
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--text-soft);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.blog-card__author-icon {
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  flex: none;
  color: var(--text-muted);
  background: var(--surface-inset);
  border: 1px solid var(--line);
  border-radius: 50%;
}
.blog-card__foot .link-more {
  flex: none;
  gap: var(--s-2);
  font-size: var(--t-sm);
  font-weight: 650;
  color: var(--brand-ink);
}
@media (min-width: 42rem) {
  .blog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 68rem) {
  .blog-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}


/* 14b ARTICLE LAYOUT & CODE HIGHLIGHTING
   ========================================================================== */
.article-hero {
  position: relative;
  isolation: isolate;
  width: 100%;
  height: clamp(25rem, 54svh, 36rem);
  min-height: 25rem;
  overflow: hidden;
  background: #080d18;
  border-bottom: 1px solid var(--line);
}
.article-hero::before,
.article-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.article-hero::before {
  z-index: 1;
  background: linear-gradient(
    180deg,
    rgba(5, 9, 18, .08) 8%,
    rgba(5, 9, 18, .18) 42%,
    rgba(5, 9, 18, .88) 100%
  );
}
.article-hero::after {
  z-index: 1;
  background: linear-gradient(90deg, rgba(5, 9, 18, .22), transparent 25%, transparent 75%, rgba(5, 9, 18, .22));
}
.article-hero__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.article-hero__content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  height: 100%;
  padding-top: clamp(var(--s-7), 6vw, var(--s-9));
  padding-bottom: clamp(var(--s-6), 4vw, var(--s-8));
}
.article-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  align-self: center;
  gap: .55rem;
  margin-bottom: var(--s-4);
  padding: .55rem .85rem;
  font-size: var(--t-xs);
  font-weight: 750;
  letter-spacing: .055em;
  color: rgba(255, 255, 255, .92);
  text-transform: uppercase;
  background: rgba(8, 13, 24, .56);
  border: 1px solid rgba(255, 255, 255, .24);
  border-radius: var(--r-full);
  box-shadow: 0 8px 26px rgba(0, 0, 0, .2);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.article-hero__dot {
  width: .25rem;
  height: .25rem;
  flex: none;
  background: rgba(255, 255, 255, .68);
  border-radius: 50%;
}
.article-hero h1 {
  max-width: 24ch;
  margin-inline: auto;
  font-size: clamp(2.25rem, 1.8rem + 2.1vw, 3.8rem);
  line-height: 1.06;
  letter-spacing: -.047em;
  color: #fff;
  text-align: center;
  text-wrap: balance;
  text-shadow: 0 3px 24px rgba(0, 0, 0, .72);
}
.blog-detail-section {
  padding-top: clamp(2rem, 1.5rem + 2vw, 3.5rem);
  background:
    radial-gradient(38rem 24rem at 4% 2%, rgba(139, 92, 246, .055), transparent 72%),
    var(--bg);
}
.blog-detail-section--with-hero {
  padding-top: clamp(.75rem, .58rem + .73vw, 1.333rem);
}
.article-intro {
  width: 100%;
  max-width: 48rem;
  margin-inline: auto;
  min-width: 0;
  padding-bottom: clamp(var(--s-6), 3vw, var(--s-7));
  border-bottom: 1px solid var(--line);
}
.article-intro h1 {
  max-width: 23ch;
  font-size: clamp(2.25rem, 1.65rem + 2.1vw, 3.65rem);
  line-height: 1.06;
  letter-spacing: -.05em;
  text-wrap: balance;
}
.article-intro p {
  max-width: 66ch;
  margin-top: var(--s-4);
  font-size: clamp(1rem, .94rem + .28vw, 1.2rem);
  line-height: 1.72;
  color: var(--text-muted);
  text-wrap: pretty;
}
.article-intro--after-hero p {
  margin-top: 0;
  font-size: clamp(1.08rem, 1rem + .35vw, 1.3rem);
}
.article {
  display: grid;
  min-width: 0;
  gap: clamp(var(--s-6), 4vw, var(--s-9));
}
.article:not(.article--with-toc) {
  max-width: 48rem;
  margin-inline: auto;
}
.article__body {
  width: 100%;
  min-width: 0;
  max-width: 48rem;
  margin-inline: auto;
}
.article-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  margin-bottom: var(--s-6);
  padding: var(--s-4) var(--s-5);
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}
.article-meta__items {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3) var(--s-5);
}
.article-meta__language {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  flex: none;
  padding: .45rem .7rem;
  font-size: var(--t-xs);
  font-weight: 650;
  color: var(--brand-ink);
  text-decoration: none;
  background: var(--brand-wash);
  border: 1px solid var(--brand-edge);
  border-radius: var(--r-full);
}
.article-meta__language:hover {
  color: var(--text);
  background: var(--surface-hover);
}
.article-tags {
  min-width: 0;
  padding: var(--s-4);
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-1);
}
.article-tags__head {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  margin-bottom: var(--s-3);
  padding-bottom: var(--s-3);
  color: var(--brand-ink);
  border-bottom: 1px solid var(--line);
}
.article-tags__head .ico { width: 1.15rem; height: 1.15rem; }
.article-tags__head h2 {
  font-size: var(--t-xs);
  font-weight: 750;
  letter-spacing: .06em;
  color: var(--text);
  text-transform: uppercase;
}
.article-tags .tag-list { gap: .45rem; }
.article-sidebar .article-tags .tag-list {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: max-content;
  grid-template-rows: repeat(3, auto);
  justify-content: start;
  max-width: 100%;
  padding-bottom: .3rem;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-inline: contain;
  scrollbar-color: var(--brand-edge) transparent;
  scrollbar-width: thin;
  scroll-snap-type: inline proximity;
}
.article-sidebar .article-tags .tag-list li { scroll-snap-align: start; }
.article-sidebar .article-tags .tag-list::-webkit-scrollbar { height: .35rem; }
.article-sidebar .article-tags .tag-list::-webkit-scrollbar-thumb {
  background: var(--brand-edge);
  border-radius: var(--r-full);
}
.article-sidebar .article-tags .tag-list::-webkit-scrollbar-track { background: transparent; }
.article-tags .tag-chip {
  padding: .34rem .58rem;
  color: var(--text-soft);
  background: color-mix(in srgb, var(--brand-wash) 62%, var(--surface));
  border-color: var(--brand-edge);
}
.article-tags--inline {
  width: 100%;
  margin-bottom: var(--s-6);
}
.article__prose {
  width: 100%;
  max-width: 46rem;
  margin-inline: auto;
}
.article__prose :is(h2, h3, h4)[id] {
  scroll-margin-top: calc(var(--nav-h) + var(--s-5));
}
.article-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  margin-top: var(--s-8);
  padding-top: var(--s-5);
  border-top: 1px solid var(--line);
}
.article-actions__share {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
}

.toc {
  align-self: start;
  min-width: 0;
  padding: var(--s-5);
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-1);
}
.article-sidebar {
  display: grid;
  min-width: 0;
  gap: var(--s-4);
  align-self: start;
}
.toc__head {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin-bottom: var(--s-4);
  padding-bottom: var(--s-4);
  border-bottom: 1px solid var(--line);
}
.toc__head p {
  font-size: var(--t-xs);
  font-weight: 750;
  letter-spacing: .08em;
  color: var(--text);
  text-transform: uppercase;
}
.toc__icon {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  flex: none;
  color: var(--brand-ink);
  background: var(--brand-wash);
  border: 1px solid var(--brand-edge);
  border-radius: .75rem;
}
.toc__icon .ico { width: 1rem; height: 1rem; }
.toc__list {
  display: flex;
  flex-direction: column;
  gap: .2rem;
  padding-left: 0;
  list-style: none;
  counter-reset: toc;
}
.toc__list li { min-width: 0; counter-increment: toc; }
.toc__list a {
  display: grid;
  grid-template-columns: 1.75rem minmax(0, 1fr);
  gap: var(--s-2);
  align-items: start;
  padding: .55rem .6rem;
  font-size: var(--t-xs);
  line-height: 1.45;
  color: var(--text-muted);
  text-decoration: none;
  border-radius: var(--r-sm);
  transition: color var(--dur-2) var(--ease), background var(--dur-2) var(--ease), transform var(--dur-2) var(--ease);
}
.toc__list a::before {
  content: counter(toc, decimal-leading-zero);
  display: grid;
  place-items: center;
  min-height: 1.35rem;
  font-size: .65rem;
  font-weight: 700;
  color: var(--brand-ink);
  background: var(--brand-wash);
  border-radius: .4rem;
}
.toc__list a:hover {
  color: var(--text);
  background: var(--surface-hover);
  transform: translateX(2px);
}
.toc__list a.is-active,
.toc__list a[aria-current="location"] {
  color: var(--brand-ink);
  font-weight: 700;
  background: var(--brand-wash);
  box-shadow: inset 3px 0 0 var(--brand);
}
.toc__list a.is-active::before,
.toc__list a[aria-current="location"]::before {
  color: #fff;
  background: var(--brand);
}

@media (min-width: 68rem) {
  .article--with-toc {
    grid-template-columns: 16.5rem minmax(0, 48rem);
    justify-content: center;
    align-items: start;
  }
  .article--with-toc .article-intro {
    grid-column: 2;
    grid-row: 1;
  }
  .article--with-toc .article-sidebar {
    position: sticky;
    /* The rail starts inside the article section and may only stick below the
       navigation. Viewport-centering with a negative transform pulled it back
       over tall heroes on large screens. */
    top: calc(var(--nav-h) + var(--s-4));
    grid-column: 1;
    grid-row: 1 / span 2;
    grid-template-rows: minmax(0, 1fr) auto auto;
    transform: none;
  }
  .article--with-toc .article-sidebar .toc {
    overflow: visible;
  }
  .article--with-toc .article__body {
    grid-column: 2;
    grid-row: 2;
  }
}

@media (min-width: 42rem) and (max-width: 67.99rem) {
  .toc__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 41.99rem) {
  .article-hero {
    height: clamp(23rem, 60svh, 30rem);
    min-height: 23rem;
  }
  .article-hero__content { padding-block: var(--s-6); }
  .article-hero__eyebrow {
    gap: .4rem;
    margin-bottom: var(--s-3);
    padding: .45rem .65rem;
    font-size: .67rem;
  }
  .article-hero h1 {
    max-width: 18ch;
    font-size: clamp(1.95rem, 1.35rem + 4.8vw, 2.8rem);
  }
  .article-meta { align-items: flex-start; flex-direction: column; padding: var(--s-4); }
  .article-meta__language { align-self: flex-start; }
  .article-actions { align-items: flex-start; flex-direction: column; }
  .article-actions__share { align-self: stretch; }
}

.related-articles {
  margin-top: clamp(3.5rem, 2.75rem + 3vw, 5.5rem);
  padding-top: clamp(var(--s-7), 3vw, var(--s-8));
  border-top: 1px solid var(--line);
}
.related-articles__head { margin-bottom: var(--s-6); }
.related-articles__head .eyebrow { margin-bottom: var(--s-2); }
.related-articles__head h2 {
  font-size: clamp(1.75rem, 1.5rem + .8vw, 2.35rem);
  letter-spacing: -.035em;
}
.related-articles__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-5);
}

/* Article support prompt — placed directly below the table of contents. The
   sidebar itself is sticky, so both navigation and support stay in view. */
.blog-support {
  width: 100%;
  padding: var(--s-4);
  color: var(--text);
  text-align: center;
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-1);
}
.blog-support__title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .3rem;
  margin-bottom: var(--s-3);
  font-size: var(--t-xs);
  font-weight: 800;
  color: var(--text);
}
.blog-support__button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  width: 100%;
  max-width: 13.5625rem;
  min-height: 3.75rem;
  margin-inline: auto;
  padding: .45rem .8rem .45rem .55rem;
  overflow: hidden;
  font-family: 'Poppins', var(--font-display);
  font-size: .92rem;
  font-weight: 600;
  line-height: 1.15;
  color: #0d0c22;
  text-decoration: none;
  background: #ffdd00;
  border-radius: .75rem;
  transition: color var(--dur-2) var(--ease), background var(--dur-2) var(--ease), transform var(--dur-2) var(--ease);
}
.blog-support__button:hover {
  color: #0d0c22;
  background: #ffdf1f;
  transform: translateY(-1px);
}
.bmc-official-cup {
  display: block;
  flex: none;
  width: 2.1rem;
  height: 2.75rem;
  background-image: url('https://cdn.buymeacoffee.com/buttons/v2/default-yellow.png');
  background-repeat: no-repeat;
  background-position: -1rem -.5rem;
  background-size: 13.625rem 3.825rem;
}
.blog-support__button-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.article-support-inline {
  width: min(100%, 19rem);
  margin-bottom: var(--s-6);
}
.article-support-floating { display: none; }

/* Constrained viewports use an extended floating action button. This covers
   phones as well as laptop/browser windows whose width or height cannot fit a
   long TOC and the support card together. Large canvases keep the full card
   directly below the TOC. */
@media (max-width: 90rem), (max-height: 64rem) {
  .article-support-rail,
  .article-support-inline { display: none; }
  .article-support-floating { display: block; }
  .article-support-floating .blog-support {
    position: fixed;
    left: max(var(--gutter), env(safe-area-inset-left));
    bottom: max(var(--gutter), env(safe-area-inset-bottom));
    z-index: var(--z-float);
    width: auto;
    max-width: calc(100vw - 6.5rem);
    padding: .25rem;
    background: color-mix(in srgb, var(--surface) 92%, transparent);
    border-radius: var(--r-full);
    box-shadow: var(--shadow-3);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }
  .article-support-floating .blog-support__title { display: none; }
  .article-support-floating .blog-support__button {
    width: auto;
    max-width: 100%;
    min-height: 3.25rem;
    margin: 0;
    padding: .25rem .9rem .25rem .45rem;
    border-radius: var(--r-full);
  }
}

/* Compact desktop layouts pin the sidebar below the navigation. It remains
   sticky inside the article grid, so it is visible from the article heading
   onward but stops before related articles instead of covering their cards. */
@media (min-width: 68rem) and (max-width: 90rem),
       (min-width: 68rem) and (max-height: 64rem) {
  .blog-detail-section {
    --article-grid-gap: clamp(var(--s-6), 4vw, var(--s-9));
    --article-rail-left: max(
      var(--gutter),
      calc((100vw - 64.5rem - var(--article-grid-gap)) / 2)
    );
  }
  .article--with-toc .article-sidebar {
    position: sticky;
    top: calc(var(--nav-h) + var(--s-4));
    grid-template-rows: minmax(0, 1fr);
    transform: none;
  }
  .article--with-toc .article-sidebar .toc {
    position: static;
    width: 100%;
    max-height: none;
    overflow: visible;
  }
  .article-support-floating .blog-support {
    left: var(--article-rail-left);
    width: 16.5rem;
    max-width: 16.5rem;
  }
  .article-support-floating .blog-support__button { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .blog-support__button { transition: none; }
}
.related-card {
  min-width: 0;
  min-height: 17rem;
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-1);
}
.related-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  height: 100%;
  padding: var(--s-5);
}
.related-card time {
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--text-faint);
  text-transform: uppercase;
}
.related-card__title {
  font-size: var(--t-lg);
  line-height: 1.3;
  letter-spacing: -.02em;
}
.related-card__title a { color: var(--text); text-decoration: none; }
.related-card__title a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}
.related-card__summary {
  display: -webkit-box;
  overflow: hidden;
  font-size: var(--t-sm);
  line-height: 1.65;
  color: var(--text-muted);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
}
.related-card__foot {
  margin-top: auto;
  padding-top: var(--s-3);
  font-size: var(--t-sm);
  font-weight: 650;
  color: var(--brand-ink);
}
@media (max-width: 63.99rem) {
  .related-articles__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 41.99rem) {
  .related-articles__grid { grid-template-columns: minmax(0, 1fr); }
  .related-card { min-height: 0; }
}

/* highlight.js — the vivid palette the old build had, but defined per theme so
   code stays readable if the visitor switches to light. */
.prose pre { background: #0A1220; border-color: rgba(139, 92, 246, .22); }
.hljs { color: #D7DEEC; background: transparent; }
.hljs-comment, .hljs-quote            { color: #6B7A99; font-style: italic; }
.hljs-keyword, .hljs-selector-tag,
.hljs-literal, .hljs-doctag           { color: #C792EA; }
.hljs-string, .hljs-regexp,
.hljs-addition                        { color: #6BE3B8; }
.hljs-number, .hljs-symbol,
.hljs-bullet                          { color: #F5B851; }
.hljs-title, .hljs-section,
.hljs-selector-id                     { color: #82AAFF; font-weight: 600; }
.hljs-name, .hljs-selector-class      { color: #7FDBFF; }
.hljs-attr, .hljs-attribute           { color: #FFCB8B; }
.hljs-variable, .hljs-template-variable { color: #F78C9C; }
.hljs-type, .hljs-built_in,
.hljs-class .hljs-title               { color: #4BDDF4; }
.hljs-meta                            { color: #8B93A8; }
.hljs-deletion                        { color: #FF8492; }
.hljs-emphasis { font-style: italic; }
.hljs-strong   { font-weight: 700; }

:root[data-theme="light"] .prose pre { background: #F6F7FC; border-color: var(--line); }
:root[data-theme="light"] .hljs { color: #2B3245; }
:root[data-theme="light"] .hljs-comment, :root[data-theme="light"] .hljs-quote { color: #7A849B; }
:root[data-theme="light"] .hljs-keyword, :root[data-theme="light"] .hljs-selector-tag,
:root[data-theme="light"] .hljs-literal, :root[data-theme="light"] .hljs-doctag { color: #8A2FBE; }
:root[data-theme="light"] .hljs-string, :root[data-theme="light"] .hljs-regexp,
:root[data-theme="light"] .hljs-addition { color: #0A7A52; }
:root[data-theme="light"] .hljs-number, :root[data-theme="light"] .hljs-symbol,
:root[data-theme="light"] .hljs-bullet { color: #96610A; }
:root[data-theme="light"] .hljs-title, :root[data-theme="light"] .hljs-section,
:root[data-theme="light"] .hljs-selector-id { color: #2551C4; }
:root[data-theme="light"] .hljs-name, :root[data-theme="light"] .hljs-selector-class { color: #0B7E93; }
:root[data-theme="light"] .hljs-attr, :root[data-theme="light"] .hljs-attribute { color: #A05A00; }
:root[data-theme="light"] .hljs-variable, :root[data-theme="light"] .hljs-template-variable { color: #B32B45; }
:root[data-theme="light"] .hljs-type, :root[data-theme="light"] .hljs-built_in,
:root[data-theme="light"] .hljs-class .hljs-title { color: #0E7490; }
:root[data-theme="light"] .hljs-meta { color: #6B7280; }

/* Inline code keeps the violet accent. Scoped with :not(pre) > so it can never
   leak onto the <code> inside a <pre>. */
.prose :not(pre) > code {
  color: var(--violet-300);
  background: rgba(139, 92, 246, .12);
  border-color: rgba(139, 92, 246, .26);
}
:root[data-theme="light"] .prose :not(pre) > code {
  color: #6D28D9;
  background: rgba(139, 92, 246, .09);
  border-color: rgba(139, 92, 246, .24);
}

/* Code inside a block is plain text on the block's own surface. */
.prose pre > code,
:root[data-theme="light"] .prose pre > code {
  display: block;
  padding: 0;
  font-size: inherit;
  color: inherit;
  background: none;
  border: 0;
  border-radius: 0;
}

/* A quiet scrollbar for long lines — the shared one read as a purple bar
   sitting inside the snippet. */
.prose pre::-webkit-scrollbar { height: 8px; }
.prose pre::-webkit-scrollbar-track { background: transparent; }
.prose pre::-webkit-scrollbar-thumb {
  background: rgba(139, 92, 246, .28);
  border: 2px solid transparent;
  background-clip: padding-box;
  border-radius: var(--r-full);
}
.prose pre::-webkit-scrollbar-thumb:hover { background: rgba(139, 92, 246, .5); background-clip: padding-box; }
.prose pre { scrollbar-width: thin; scrollbar-color: rgba(139, 92, 246, .35) transparent; }


/* 15  GALLERY
   ========================================================================== */
.project-detail {
  width: 100%;
  max-width: 100%;
  padding-top: clamp(2rem, 1.45rem + 2.2vw, 3.5rem);
}

.project-overview {
  display: grid;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  align-items: center;
  gap: clamp(var(--s-6), 5vw, var(--s-9));
  padding: clamp(var(--s-5), 4vw, var(--s-8));
  overflow: hidden;
  background:
    radial-gradient(32rem 18rem at 92% 0%, rgba(34, 211, 238, .12), transparent 62%),
    radial-gradient(30rem 18rem at 8% 110%, rgba(139, 92, 246, .14), transparent 64%),
    var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-2xl);
  box-shadow: var(--shadow-2);
}
.project-overview__content {
  width: 100%;
  min-width: 0;
  max-width: 100%;
}
.project-overview__app-icon {
  width: 4rem;
  height: 4rem;
  padding: .2rem;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 1.2rem;
  box-shadow: 0 10px 24px rgba(2, 6, 23, .16);
}
.project-overview__app-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: .95rem;
}
.project-overview__intro {
  max-width: 38rem;
}
.project-overview__title {
  max-width: 18ch;
  font-size: clamp(2.2rem, 1.75rem + 1.8vw, 3.75rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -.045em;
  text-wrap: balance;
}
.project-overview__lede {
  max-width: 48ch;
  margin-top: var(--s-4);
  font-size: clamp(1rem, .94rem + .3vw, 1.2rem);
  line-height: var(--lh-loose);
  color: var(--text-muted);
  text-wrap: pretty;
}
.project-technologies {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-3);
}
.project-technologies .foot__title { margin: 0; }
.project-overview__visual {
  display: grid;
  place-items: center;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  min-height: 14rem;
  padding: clamp(var(--s-4), 3vw, var(--s-6));
  overflow: hidden;
  background: var(--bg-sunken);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-3);
}
.project-overview__visual img {
  width: 100%;
  max-height: 23rem;
  object-fit: contain;
  border-radius: var(--r-lg);
}
.project-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-3);
}
.store-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
  width: min(100%, 23.25rem);
  gap: var(--s-3);
}
.store-actions .store-badge {
  min-width: 0;
  width: 100%;
}

/* Store-shaped badges read faster than generic outline buttons and match the
   interaction people already know from product landing pages. */
.store-badge {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  min-width: 11.25rem;
  min-height: 3.75rem;
  padding: .55rem .9rem;
  color: #111318;
  text-decoration: none;
  background: #fff;
  border: 1px solid rgba(17, 19, 24, .16);
  border-radius: .85rem;
  box-shadow: 0 8px 22px rgba(15, 23, 42, .12);
  transition: transform var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease);
}
.store-badge:hover {
  color: #111318;
  border-color: rgba(91, 110, 248, .55);
  box-shadow: 0 12px 28px rgba(91, 110, 248, .22);
  transform: translateY(-2px);
}
.store-badge:focus-visible {
  outline: 3px solid var(--brand-wash);
  outline-offset: 3px;
}
.store-badge__icon {
  width: 1.8rem;
  height: 1.8rem;
  flex: none;
  fill: currentColor;
  stroke: none;
}
.store-badge__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1;
}
.store-badge__copy small {
  margin-bottom: .24rem;
  font-size: .58rem;
  font-weight: 600;
  letter-spacing: .055em;
  text-transform: uppercase;
}
.store-badge__copy strong {
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -.02em;
}

@media (min-width: 64rem) {
  .project-overview:has(.project-overview__visual) {
    grid-template-columns: minmax(0, 1fr) minmax(23rem, .9fr);
  }
  .project-overview:has(.coverflow) {
    grid-template-columns: minmax(19rem, .75fr) minmax(31rem, 1.25fr);
  }
}

/* Coverflow carousel: one device owns the centre while its neighbours sit
   behind it as spatial navigation hints. */
.project-overview__visual--coverflow {
  position: relative;
  isolation: isolate;
  min-height: 34rem;
  padding: var(--s-5);
  background:
    radial-gradient(24rem 18rem at 50% 42%, rgba(91, 110, 248, .18), transparent 68%),
    var(--bg-sunken);
}
.project-overview__visual-watermark {
  position: absolute;
  top: 52%;
  left: 50%;
  z-index: 0;
  width: clamp(17rem, 72%, 22rem) !important;
  height: auto !important;
  max-height: none !important;
  aspect-ratio: 1;
  object-fit: cover !important;
  opacity: .12;
  filter: blur(16px) saturate(1.05);
  mix-blend-mode: screen;
  border-radius: 30% !important;
  transform: translate(-50%, -50%) scale(1.08);
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-mask-image: radial-gradient(circle, #000 34%, rgba(0, 0, 0, .85) 58%, transparent 86%);
  mask-image: radial-gradient(circle, #000 34%, rgba(0, 0, 0, .85) 58%, transparent 86%);
}
:root[data-theme="light"] .project-overview__visual-watermark {
  opacity: .11;
  mix-blend-mode: multiply;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .project-overview__visual-watermark {
    opacity: .11;
    mix-blend-mode: multiply;
  }
}
.coverflow {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  width: 100%;
  min-width: 0;
}
.coverflow__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-width: 0;
  gap: var(--s-3);
  min-height: 2.5rem;
}
.coverflow__head .eyebrow { margin: 0; }
.coverflow__stage {
  position: relative;
  height: 29rem;
  outline: none;
  perspective: 1200px;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
}
.coverflow__stage:focus-visible {
  border-radius: var(--r-xl);
  box-shadow: 0 0 0 3px var(--brand-wash);
}
.coverflow__panel {
  position: absolute;
  inset: 0;
}
.coverflow__panel[hidden] { display: none; }
.coverflow__slide {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 0;
  width: min(56%, 13rem);
  margin: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(.58);
  filter: saturate(.65) brightness(.82);
  transition:
    transform 480ms var(--ease-out),
    opacity 360ms var(--ease),
    filter 360ms var(--ease),
    visibility 360ms;
}
.coverflow__slide.is-active {
  z-index: 3;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  filter: none;
  transform: translate(-50%, -50%) scale(1);
}
.coverflow__slide.is-prev {
  z-index: 1;
  opacity: .52;
  visibility: visible;
  pointer-events: auto;
  transform: translate(-112%, -50%) scale(.76) rotateY(9deg);
}
.coverflow__slide.is-next {
  z-index: 2;
  opacity: .62;
  visibility: visible;
  pointer-events: auto;
  transform: translate(12%, -50%) scale(.8) rotateY(-9deg);
}
.coverflow__slide > a { display: block; color: inherit; }

.device-frame {
  position: relative;
  display: block;
  width: 100%;
  padding: .58rem;
  overflow: visible;
  background: linear-gradient(145deg, #3d3f45, #08090b 32%, #17191d 78%, #44464c);
  border: 2px solid #4a4c51;
  box-shadow:
    0 26px 50px rgba(2, 6, 23, .28),
    inset 0 0 0 1px rgba(255, 255, 255, .08);
}
.device-frame__screen {
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #080a0f;
}
.device-frame__screen img {
  display: block;
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: contain;
  background: #080a0f;
  border-radius: 0;
  pointer-events: none;
}
.device-frame--phone {
  border-radius: 2.5rem;
}
.device-frame--phone::before {
  content: "";
  position: absolute;
  top: .88rem;
  left: 50%;
  z-index: 2;
  width: 38%;
  height: 1.12rem;
  background: #050506;
  border-radius: var(--r-full);
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .07);
  transform: translateX(-50%);
}
.device-frame--phone .device-frame__screen {
  height: auto;
  aspect-ratio: 236 / 512;
  border-radius: 1.88rem;
}

.coverflow__panel[data-coverflow-panel="tablet"] .coverflow__slide {
  width: min(60%, 17rem);
}
.device-frame--tablet {
  padding: .72rem;
  border-radius: 1.7rem;
}
.device-frame--tablet::before {
  content: "";
  position: absolute;
  top: .25rem;
  left: 50%;
  z-index: 2;
  width: .3rem;
  height: .3rem;
  background: #252a32;
  border: 1px solid #596170;
  border-radius: 50%;
  transform: translateX(-50%);
}
.device-frame--tablet .device-frame__screen {
  height: auto;
  aspect-ratio: 3 / 4;
  border-radius: 1rem;
}

.coverflow__controls {
  position: relative;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-3);
  min-height: 2.75rem;
  min-width: 0;
  max-width: 100%;
}
.coverflow__dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  min-width: 5rem;
}
.coverflow__dot {
  width: .42rem;
  height: .42rem;
  padding: 0;
  background: var(--line-strong);
  border-radius: var(--r-full);
  transition: width var(--dur-2) var(--ease), background var(--dur-2) var(--ease);
}
.coverflow__dot[aria-current="true"] {
  width: 1.45rem;
  background: var(--grad-rail);
}
.coverflow__count {
  min-width: 2.5rem;
  font-size: var(--t-xs);
  color: var(--text-faint);
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.coverflow .gallery__source {
  justify-content: center;
  margin: var(--s-3) 0 0;
}

.gallery { display: flex; flex-direction: column; gap: var(--s-4); }

.project-gallery {
  margin-top: clamp(2.75rem, 2rem + 3vw, 4.75rem);
  padding-top: clamp(var(--s-6), 3vw, var(--s-8));
  border-top: 1px solid var(--line);
}
.project-gallery .gallery__head h2 {
  margin-top: var(--s-2);
  font-size: clamp(1.8rem, 1.55rem + 1vw, 2.5rem);
}

.gallery__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  flex-wrap: wrap;
}
.gallery__controls { display: flex; align-items: center; gap: var(--s-2); }
.gallery__count {
  font-size: var(--t-sm);
  color: var(--text-faint);
  font-variant-numeric: tabular-nums;
}

.gallery__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(min(80%, 15rem), 19rem);
  gap: var(--s-4);
  padding-bottom: var(--s-3);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
}
.gallery__track::-webkit-scrollbar { display: none; }

.gallery__slide {
  scroll-snap-align: start;
  margin: 0;
}
.gallery__slide a {
  display: block;
  height: 100%;
  overflow: hidden;
  background: var(--surface-inset);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
}
/* contain, not cover: these are app screenshots and cropping them hides the
   very thing the visitor came to look at. */
.gallery__slide img {
  width: 100%;
  height: 100%;
  max-height: 34rem;
  object-fit: contain;
  background: var(--bg-sunken);
  transition: transform var(--dur-4) var(--ease-out);
}
.gallery__slide a:hover img { transform: scale(1.02); }

/* Mobile screenshots sit inside a restrained device shell. Every frame is a
   scroll-snap slide, so touch swipes and the arrow controls share one model. */
.gallery__track:has(.gallery__slide--phone) {
  grid-auto-columns: minmax(min(76vw, 15rem), 18rem);
  gap: clamp(var(--s-4), 3vw, var(--s-6));
  padding: var(--s-3) .2rem var(--s-6);
}
.gallery__slide--phone { padding-inline: .15rem; }
.gallery__slide--phone > .phone-frame {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 9 / 19.4;
  padding: .62rem;
  overflow: visible;
  background: linear-gradient(145deg, #36383d, #090a0c 32%, #17191d 78%, #3d3f44);
  border: 2px solid #4a4c51;
  border-radius: 2.65rem;
  box-shadow:
    0 26px 50px rgba(2, 6, 23, .24),
    inset 0 0 0 1px rgba(255, 255, 255, .08);
}
.gallery__slide--phone > .phone-frame::before {
  content: "";
  position: absolute;
  top: .92rem;
  left: 50%;
  z-index: 2;
  width: 38%;
  height: 1.25rem;
  background: #050506;
  border-radius: var(--r-full);
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .07);
  transform: translateX(-50%);
}
.phone-frame__screen {
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #080a0f;
  border-radius: 2rem;
}
.gallery__slide--phone .phone-frame__screen img {
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: contain;
  background: #080a0f;
  border-radius: 0;
}
.gallery__slide--phone > .phone-frame:hover img { transform: none; }

.gallery__dots {
  display: flex;
  justify-content: center;
  gap: var(--s-2);
}
.gallery__dot {
  width: 6px; height: 6px;
  padding: 0;
  background: var(--line-strong);
  border-radius: var(--r-full);
  transition: width var(--dur-2) var(--ease), background var(--dur-2) var(--ease);
}
.gallery__dot[aria-current="true"] { width: 22px; background: var(--grad-rail); }


/* Phone / tablet switch above the store screenshots. */
.shot-seg {
  display: inline-flex;
  padding: 2px;
  background: var(--surface-inset);
  border: 1px solid var(--line);
  border-radius: var(--r-full);
}
.shot-seg__opt {
  padding: .35rem .75rem;
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--text-muted);
  border: 0;
  border-radius: var(--r-full);
  background: none;
}
.shot-seg__opt:hover { color: var(--text); }
.shot-seg__opt.is-on { color: #fff; background: var(--grad-brand); }

.gallery__source {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  margin-top: var(--s-2);
  font-size: var(--t-xs);
  color: var(--text-faint);
}
.gallery__source .ico { fill: currentColor; stroke: none; }

/* Tablet art is landscape, so it needs wider slides than the phone track. */
.gallery__track--tablet { grid-auto-columns: minmax(min(88%, 22rem), 30rem); }

@media (max-width: 47.99rem) {
  .project-overview { padding: var(--s-4); border-radius: var(--r-xl); }
  .project-overview__app-icon {
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 1rem;
  }
  .project-overview__app-icon img { border-radius: .78rem; }
  .project-overview__visual { min-height: 11rem; order: -1; }
  .project-overview__visual--coverflow { min-height: 31rem; padding: var(--s-3); }
  .coverflow__head { flex-wrap: wrap; }
  .coverflow__stage { height: 24rem; }
  .coverflow__slide { width: min(58%, 11rem); }
  .coverflow__slide.is-prev { transform: translate(-108%, -50%) scale(.72) rotateY(8deg); }
  .coverflow__slide.is-next { transform: translate(8%, -50%) scale(.76) rotateY(-8deg); }
  .coverflow__panel[data-coverflow-panel="tablet"] .coverflow__slide { width: min(64%, 13.75rem); }
  .coverflow__panel[data-coverflow-panel="tablet"] ~ * { max-width: 100%; }
  .coverflow__controls { gap: var(--s-2); }
  .coverflow__dots {
    flex: 0 1 auto;
    min-width: 0;
    gap: .28rem;
  }
  .coverflow__dot {
    width: .34rem;
    height: .34rem;
  }
  .coverflow__dot[aria-current="true"] { width: 1.15rem; }
  .coverflow__count { min-width: 2rem; }
  .coverflow .gallery__source {
    width: 100%;
    min-width: 0;
    overflow-wrap: anywhere;
  }
  .project-actions { align-items: stretch; }
  .project-actions > .btn { width: 100%; }
  .store-badge { min-width: 0; flex: 1 1 9.5rem; }
  .project-gallery .gallery__controls { width: 100%; }
  .project-gallery .gallery__count { margin-left: auto; }
}

@media (max-width: 30rem) {
  .store-actions { gap: .5rem; }
  .store-actions .store-badge {
    gap: .4rem;
    padding-inline: .55rem;
  }
  .store-actions .store-badge__icon {
    width: 1.35rem;
    height: 1.35rem;
  }
  .store-actions .store-badge__copy small { font-size: .45rem; }
  .store-actions .store-badge__copy strong { font-size: .82rem; }
}


/* 16  CTA BAND
   --------------------------------------------------------------------------
   One branded panel that reads the same in both themes, so it no longer needs
   per-theme colour overrides (those referenced tokens that no longer exist and
   left white text on a white button).
   ========================================================================== */
.cta {
  position: relative;
  display: grid;
  gap: var(--s-6);
  align-items: center;
  padding: clamp(var(--s-6), 4vw, var(--s-9));
  overflow: hidden;
  background:
    radial-gradient(38rem 22rem at 88% -20%, rgba(139, 92, 246, .38), transparent 62%),
    linear-gradient(135deg, #101B38 0%, #16173A 55%, #101E34 100%);
  border: 1px solid rgba(255, 255, 255, .10);
  border-radius: var(--r-2xl);
  box-shadow: var(--shadow-3);
  grid-template-columns: 1fr;
}
@media (min-width: 60rem) {
  .cta { grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-8); }
}
.cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(30rem 18rem at 6% 120%, rgba(34, 211, 238, .16), transparent 60%);
  pointer-events: none;
}
.cta > * { position: relative; }

.cta__title { max-width: 24ch; font-size: var(--t-2xl); color: #FFFFFF; }
.cta__text  { max-width: 56ch; margin-top: var(--s-4); color: rgba(233, 238, 248, .78); }
.cta .eyebrow { color: var(--cyan-400); }
.cta .eyebrow::before { background: var(--grad-rail); }

.cta__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.cta .btn--solid  { --btn-bg: #FFFFFF; --btn-fg: #0B1428; --btn-bd: #FFFFFF; }
.cta .btn--solid:hover  { --btn-bg: #E4E9F5; --btn-bd: #E4E9F5; --btn-fg: #0B1428; }
.cta .btn--outline {
  --btn-bg: transparent;
  --btn-fg: #FFFFFF;
  --btn-bd: rgba(255, 255, 255, .34);
}
.cta .btn--outline:hover {
  --btn-bg: rgba(255, 255, 255, .12);
  --btn-bd: rgba(255, 255, 255, .55);
  --btn-fg: #FFFFFF;
}


/* 17  FOOTER
   ========================================================================== */
.foot {
  position: relative;
  padding-block: var(--s-9) var(--s-5);
  background: var(--bg-sunken);
  border-top: 1px solid var(--line-strong);
  box-shadow: inset 0 18px 34px -26px rgba(0, 0, 0, .85);
}
/* Lit divider so the footer reads as a distinct band, not more page. */
.foot::before {
  content: "";
  position: absolute;
  top: -1px; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--indigo-500), var(--violet-500), var(--cyan-500), transparent);
  opacity: .75;
}
.foot__grid {
  display: grid;
  gap: var(--s-8) var(--s-6);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
}
@media (min-width: 64rem) {
  .foot__grid { grid-template-columns: 1.6fr 1fr 1fr 1.4fr; }
}
.foot__about { max-width: 34ch; margin-top: var(--s-4); font-size: var(--t-base); color: var(--text-muted); }
.foot__title {
  margin-bottom: var(--s-4);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.foot__links { display: flex; flex-direction: column; gap: var(--s-3); }
.foot__link {
  font-size: var(--t-base);
  color: var(--text-muted);
  text-decoration: none;
  width: fit-content;
}
.foot__link:hover { color: var(--brand-ink); }

.foot__contact { display: flex; flex-direction: column; gap: var(--s-3); }
.foot__contact a, .foot__contact span {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  font-size: var(--t-base);
  color: var(--text-muted);
  text-decoration: none;
}
.foot__contact a:hover { color: var(--brand-ink); }
.foot__contact .ico { color: var(--text-faint); }

.socials { display: flex; gap: var(--s-2); }
.social {
  display: grid;
  place-items: center;
  width: 2.25rem; height: 2.25rem;
  color: var(--text-muted);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  transition: color var(--dur-2) var(--ease),
              border-color var(--dur-2) var(--ease),
              background var(--dur-2) var(--ease);
}
/* Each network keeps its own brand colour on hover. */
.social:hover { color: #fff; border-color: transparent; }
.social[data-brand="github"]:hover   { background: #24292F; border-color: #4B5563; }
.social[data-brand="linkedin"]:hover { background: #0A66C2; }
.social[data-brand="x"]:hover        { background: #000000; border-color: #3A3A3A; }
.social[data-brand="nuget"]:hover    { background: #004880; }
.social[data-brand="mastodon"]:hover { background: #6364FF; }
.social:hover .ico { color: #fff; }

.foot__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3) var(--s-5);
  margin-top: var(--s-8);
  padding-top: var(--s-5);
  border-top: 1px solid var(--line);
  font-size: var(--t-sm);
  color: var(--text-faint);
}
.foot__legal { display: flex; flex-wrap: wrap; gap: var(--s-5); }
.foot__legal a { color: var(--text-faint); text-decoration: none; }
.foot__legal a:hover { color: var(--text-muted); text-decoration: underline; }


/* 17b DOCS AREA
   ========================================================================== */
.docs-shell {
  display: grid;
  min-height: calc(100svh - var(--nav-h));
  grid-template-columns: 1fr;
}
@media (min-width: 64rem) {
  .docs-shell { grid-template-columns: 16.5rem minmax(0, 1fr); }
}

.docs-side {
  padding: var(--s-6) var(--gutter);
  background: var(--bg-alt);
  border-right: 1px solid var(--line);
}
@media (min-width: 64rem) {
  .docs-side {
    position: sticky;
    top: var(--nav-h);
    align-self: start;
    max-height: calc(100svh - var(--nav-h));
    overflow-y: auto;
  }
}
@media (max-width: 63.99rem) {
  .docs-side {
    display: none;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
  .docs-side[data-open="true"] { display: block; }
}

.docs-side__title {
  margin-bottom: var(--s-4);
  font-family: var(--font-display);
  font-size: var(--t-md);
  font-weight: 700;
}
.docs-side__nav { display: flex; flex-direction: column; gap: 1px; }
.docs-side__nav a {
  padding: var(--s-2) var(--s-3);
  font-size: var(--t-sm);
  line-height: 1.5;
  color: var(--text-muted);
  text-decoration: none;
  border-left: 2px solid var(--line);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
}
.docs-side__nav a:hover,
.docs-side__nav a[aria-current="true"] {
  color: var(--text);
  background: var(--surface);
  border-left-color: var(--brand);
}

.docs-main { min-width: 0; padding: var(--s-8) var(--gutter) var(--s-10); }
.docs-main__inner { max-width: 52rem; margin-inline: auto; }

.docs-rail { display: none; }
@media (min-width: 84rem) {
  .docs-shell--with-rail { grid-template-columns: 16.5rem minmax(0, 1fr) 15rem; }
  .docs-rail {
    display: block;
    position: sticky;
    top: var(--nav-h);
    align-self: start;
    max-height: calc(100svh - var(--nav-h));
    overflow-y: auto;
    padding: var(--s-8) var(--gutter) var(--s-8) 0;
  }
}

.doc-section { scroll-margin-top: calc(var(--nav-h) + var(--s-5)); }
.doc-section + .doc-section {
  margin-top: var(--s-8);
  padding-top: var(--s-8);
  border-top: 1px solid var(--line-soft);
}
.doc-section > h2 {
  margin-bottom: var(--s-5);
  font-size: var(--t-2xl);
}

/* Reading progress bar */
.docs-progress {
  position: fixed;
  top: var(--nav-h);
  left: 0;
  z-index: calc(var(--z-nav) - 1);
  width: 0;
  height: 2px;
  background: var(--grad-rail);
  transition: width 80ms linear;
}


/* 18  UTILITIES
   ========================================================================== */
.empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-10) var(--s-5);
  text-align: center;
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-lg);
}
.empty .ico { color: var(--text-faint); }
.empty h2, .empty h3 { font-size: var(--t-xl); }
.empty p { max-width: 44ch; color: var(--text-muted); }

.filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
}
.filter {
  padding: 0.4375rem 0.8125rem;
  font-size: var(--t-sm);
  font-weight: 500;
  color: var(--text-muted);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-full);
  transition: all var(--dur-2) var(--ease);
}
.filter:hover { color: var(--text); border-color: var(--line-strong); }
.filter[aria-pressed="true"] {
  color: #fff;
  background: var(--grad-brand);
  border-color: transparent;
  box-shadow: 0 6px 18px rgba(139, 92, 246, .38);
}

.to-top {
  position: fixed;
  right: var(--gutter);
  bottom: var(--gutter);
  z-index: var(--z-float);
  display: grid;
  place-items: center;
  width: 2.75rem; height: 2.75rem;
  color: var(--text-muted);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-2);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity var(--dur-2) var(--ease),
              transform var(--dur-2) var(--ease),
              visibility var(--dur-2),
              color var(--dur-2) var(--ease);
}
.to-top[data-show="true"] { opacity: 1; visibility: visible; transform: translateY(0); }
.to-top:hover { color: var(--brand-ink); border-color: var(--brand-edge); }

.text-center { text-align: center; }
.text-muted  { color: var(--text-muted); }
.text-faint  { color: var(--text-faint); }
.mt-0 { margin-top: 0; }
.mt-4 { margin-top: var(--s-4); }
.mt-5 { margin-top: var(--s-5); }
.mt-6 { margin-top: var(--s-6); }
.mt-7 { margin-top: var(--s-7); }
.mt-8 { margin-top: var(--s-8); }
.mb-0 { margin-bottom: 0; }
.mb-4 { margin-bottom: var(--s-4); }
.mb-5 { margin-bottom: var(--s-5); }
.mb-6 { margin-bottom: var(--s-6); }
.full { width: 100%; }
.flow > * + * { margin-top: var(--s-4); }
.hide { display: none !important; }
@media (max-width: 47.99rem) { .hide\@sm { display: none !important; } }
@media (min-width: 64rem)    { .hide\@lg { display: none !important; } }


/* 19  MOTION & PREFERENCES
   ========================================================================== */
/* Scroll reveal — the element is visible by default and only hidden once JS
   confirms it can animate. Content is never trapped behind a failed script. */
[data-reveal] {
  opacity: 1;
  transform: none;
}
html.js [data-reveal] {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity var(--dur-4) var(--ease-out),
              transform var(--dur-4) var(--ease-out);
}
html.js [data-reveal][data-revealed="true"] {
  opacity: 1;
  transform: none;
}

html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
  html.js [data-reveal] { opacity: 1; transform: none; }
  .gallery__track { scroll-behavior: auto; }
}

@media (prefers-contrast: more) {
  :root {
    --line:        var(--line-strong);
    --text-muted:  var(--text-soft);
    --text-faint:  var(--text-soft);
  }
}


/* 20  PRINT
   ========================================================================== */
@media print {
  .nav, .foot, .to-top, .cta, .skip-link, .gallery__controls { display: none !important; }
  body { color: #000; background: #fff; }
  .prose { max-width: none; font-size: 11pt; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; }
}