/* ============================================================
   Sergey — WordPress polnogo cikla
   Single-file stylesheet for static prototypes
   Sections:
     1. Tokens (raw + semantic, dark default + light)
     2. Reset & base
     3. Typography utility classes
     4. Layout utilities
     5. UI components (button, card, input, callout, table, etc.)
     6. Header & footer
     7. Blocks
     8. Page-specific
     9. Print
   ============================================================ */


/* ============================================================
   1. TOKENS
   ============================================================ */
:root {
  /* === RAW TOKENS — only consumed by semantic tokens === */
  --slate-50:  #f8fafc;
  --slate-100: #f1f5f9;
  --slate-200: #e2e8f0;
  --slate-300: #cbd5e1;
  --slate-400: #94a3b8;
  --slate-500: #64748b;
  --slate-600: #475569;
  --slate-700: #334155;
  --slate-800: #1e293b;
  --slate-900: #0f172a;
  --slate-950: #020617;

  --brand-50:  #eff6ff;
  --brand-100: #dbeafe;
  --brand-200: #bfdbfe;
  --brand-300: #93c5fd;
  --brand-400: #60a5fa;
  --brand-500: #3b82f6;
  --brand-600: #2563eb;
  --brand-700: #1d4ed8;
  --brand-800: #1e40af;
  --brand-900: #1e3a8a;

  --accent-400: #fbbf24;
  --accent-500: #f59e0b;
  --accent-600: #d97706;

  --success-500: #10b981;
  --warning-500: #f59e0b;
  --danger-500:  #ef4444;
  --info-500:    #3b82f6;

  /* === SEMANTIC TOKENS — DARK (default) === */
  --surface-base:    var(--slate-950);
  --surface-raised:  var(--slate-900);
  --surface-overlay: var(--slate-800);
  --surface-sunken:  #000;

  --text-primary:   var(--slate-50);
  --text-secondary: var(--slate-300);
  --text-tertiary:  var(--slate-400);
  --text-disabled:  var(--slate-600);
  --text-inverse:   var(--slate-950);

  --border-subtle:  rgba(255,255,255,.06);
  --border-default: rgba(255,255,255,.10);
  --border-strong:  rgba(255,255,255,.16);
  --border-focus:   var(--brand-500);

  --brand-bg:         var(--brand-500);
  --brand-bg-hover:   var(--brand-400);
  --brand-bg-active:  var(--brand-600);
  --brand-text:       var(--brand-400);
  --brand-text-hover: var(--brand-300);
  --brand-subtle:     rgba(59,130,246,.10);
  --brand-border:     rgba(59,130,246,.30);

  --accent-bg:   var(--accent-500);
  --accent-text: var(--accent-400);

  --state-success-bg:    rgba(16,185,129,.10);
  --state-success-text:  #34d399;
  --state-success-border: rgba(16,185,129,.30);
  --state-warning-bg:    rgba(245,158,11,.10);
  --state-warning-text:  #fbbf24;
  --state-warning-border: rgba(245,158,11,.30);
  --state-danger-bg:     rgba(239,68,68,.10);
  --state-danger-text:   #f87171;
  --state-danger-border: rgba(239,68,68,.30);

  --shadow-sm: 0 1px 2px rgba(0,0,0,.30);
  --shadow-md: 0 4px 12px rgba(0,0,0,.40);
  --shadow-lg: 0 12px 32px rgba(0,0,0,.50);

  --code-bg:       var(--slate-900);
  --code-text:     var(--slate-200);
  --code-keyword:  #c084fc;
  --code-string:   #86efac;
  --code-comment:  var(--slate-500);
  --code-function: #60a5fa;
  --code-number:   #fb923c;

  /* === FONTS === */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Inter", system-ui, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", "Fira Code", Menlo, Consolas, monospace;

  /* === FLUID TYPE SCALE === */
  --text-xs:   clamp(.75rem, .72rem + .15vw, .8125rem);
  --text-sm:   clamp(.875rem, .85rem + .15vw, .9375rem);
  --text-base: clamp(1rem, .97rem + .15vw, 1.0625rem);
  --text-lg:   clamp(1.125rem, 1.07rem + .3vw, 1.25rem);
  --text-xl:   clamp(1.25rem, 1.15rem + .5vw, 1.5rem);
  --text-2xl:  clamp(1.5rem, 1.3rem + 1vw, 1.875rem);
  --text-3xl:  clamp(1.875rem, 1.5rem + 1.8vw, 2.5rem);
  --text-4xl:  clamp(2.25rem, 1.75rem + 2.5vw, 3.25rem);
  --text-5xl:  clamp(2.75rem, 2rem + 3.75vw, 4.5rem);

  --leading-tight:   1.2;
  --leading-snug:    1.3;
  --leading-normal:  1.5;
  --leading-relaxed: 1.7;

  --tracking-tight:  -.02em;
  --tracking-normal: 0;
  --tracking-wide:   .04em;

  --weight-regular: 400;
  --weight-medium:  500;
  --weight-bold:    700;

  /* === SPACING === */
  --space-0: 0;
  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: .75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;

  --section-padding-y: clamp(3rem, 5vw + 2rem, 6rem);
  --section-padding-x: clamp(1rem, 4vw, 2rem);

  /* === LAYOUT === */
  --bp-sm: 640px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1280px;
  --bp-2xl: 1536px;

  --container-narrow: 680px;
  --container-prose:  760px;
  --container-wide:   1080px;
  --container-full:   1280px;

  --header-height: 64px;

  /* === MOTION === */
  --duration-fast: 100ms;
  --duration-base: 150ms;
  --duration-slow: 300ms;
  --ease:     cubic-bezier(.4,0,.2,1);
  --ease-out: cubic-bezier(0,0,.2,1);

  /* === RADII === */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
}

/* === SEMANTIC TOKENS — LIGHT === */
[data-theme="light"] {
  --surface-base:    #fff;
  --surface-raised:  var(--slate-50);
  --surface-overlay: #fff;
  --surface-sunken:  var(--slate-100);

  --text-primary:   var(--slate-900);
  --text-secondary: var(--slate-700);
  --text-tertiary:  var(--slate-500);
  --text-disabled:  var(--slate-400);
  --text-inverse:   #fff;

  --border-subtle:  rgba(15,23,42,.06);
  --border-default: rgba(15,23,42,.10);
  --border-strong:  rgba(15,23,42,.16);

  --brand-bg:         var(--brand-600);
  --brand-bg-hover:   var(--brand-700);
  --brand-bg-active:  var(--brand-800);
  --brand-text:       var(--brand-700);
  --brand-text-hover: var(--brand-800);
  --brand-subtle:     var(--brand-50);
  --brand-border:     var(--brand-200);

  --shadow-sm: 0 1px 3px rgba(15,23,42,.08);
  --shadow-md: 0 4px 12px rgba(15,23,42,.10);
  --shadow-lg: 0 12px 32px rgba(15,23,42,.12);

  --code-bg:       var(--slate-50);
  --code-text:     var(--slate-900);
  --code-keyword:  #7c3aed;
  --code-string:   #15803d;
  --code-comment:  var(--slate-500);
  --code-function: var(--brand-700);
  --code-number:   #c2410c;
}


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

html {
  -webkit-text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-height) + var(--space-4));
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--surface-base);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
  /* Тонкая фоновая текстура для тёмной темы — субтильное свечение */
  background-image:
    radial-gradient(ellipse 80% 50% at 50% -10%, rgba(59,130,246,.10), transparent 70%),
    radial-gradient(ellipse 60% 40% at 90% 110%, rgba(245,158,11,.04), transparent 70%);
  background-attachment: fixed;
}
[data-theme="light"] body {
  background-image:
    radial-gradient(ellipse 80% 50% at 50% -10%, rgba(59,130,246,.06), transparent 70%);
}

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

a { color: var(--brand-text); text-decoration: none; transition: color var(--duration-base); }
a:hover { color: var(--brand-text-hover); }
a:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 2px;
  border-radius: 2px;
}

button { font: inherit; color: inherit; cursor: pointer; }
button:not(.btn):focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

ul, ol { padding: 0; margin: 0; list-style: none; }

p { margin: 0 0 var(--space-4); text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

h1, h2, h3, h4, h5, h6 {
  margin: 0 0 var(--space-4);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  text-wrap: balance;
}

hr { border: 0; border-top: 1px solid var(--border-subtle); margin: var(--space-8) 0; }

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

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}


/* ============================================================
   3. TYPOGRAPHY UTILITY CLASSES
   ============================================================ */
.text-display {
  font-size: var(--text-5xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  font-weight: var(--weight-bold);
}
.text-h1 { font-size: var(--text-4xl); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); font-weight: var(--weight-bold); }
.text-h2 { font-size: var(--text-3xl); line-height: var(--leading-snug); font-weight: var(--weight-bold); }
.text-h3 { font-size: var(--text-2xl); line-height: var(--leading-snug); font-weight: var(--weight-bold); }
.text-h4 { font-size: var(--text-xl);  line-height: var(--leading-snug); font-weight: var(--weight-medium); margin: 0; }

.text-body    { font-size: var(--text-base); line-height: var(--leading-relaxed); }
.text-body-sm { font-size: var(--text-sm);   line-height: var(--leading-normal); }
.text-meta    { font-size: var(--text-sm);   line-height: var(--leading-normal); color: var(--text-tertiary); }
.text-caption {
  font-size: var(--text-xs);
  line-height: var(--leading-normal);
  color: var(--text-tertiary);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  font-weight: var(--weight-medium);
}

.text-accent {
  background: linear-gradient(135deg, var(--brand-text) 0%, var(--accent-400) 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}


/* ============================================================
   4. LAYOUT UTILITIES
   ============================================================ */
.container {
  width: 100%;
  margin-inline: auto;
  padding-inline: var(--section-padding-x);
}
.container--narrow { max-width: var(--container-narrow); }
.container--prose  { max-width: var(--container-prose); }
.container--wide   { max-width: var(--container-wide); }
.container--full   { max-width: var(--container-full); }

main > section { padding-block: var(--section-padding-y); position: relative; isolation: isolate; }
main > section + section { border-top: none; }
main > section + section::after {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 5%, var(--border-default) 50%, transparent 95%);
  pointer-events: none;
  z-index: 1;
}

.skip-link {
  position: absolute;
  left: var(--space-4);
  top: var(--space-4);
  padding: var(--space-2) var(--space-4);
  background: var(--brand-bg);
  color: var(--text-inverse);
  border-radius: var(--radius-sm);
  transform: translateY(-200%);
  transition: transform var(--duration-base);
  z-index: 1000;
}
.skip-link:focus { transform: translateY(0); }

.scroll-progress {
  position: fixed;
  inset: 0 0 auto 0;
  height: 2px;
  z-index: 60;
  pointer-events: none;
}
.scroll-progress__bar {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--brand-bg), var(--accent-500));
  transition: width var(--duration-fast) linear;
}


/* ============================================================
   5. UI COMPONENTS
   ============================================================ */

/* --- Section heading helper --- */
.section-head {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  max-width: var(--container-prose);
  margin-bottom: var(--space-12);
}
.section-head__title { margin: 0; }
.section-head__lead  { color: var(--text-secondary); margin: 0; }
.section-head--center { margin-inline: auto; text-align: center; align-items: center; }

.section-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4) var(--space-8);
  margin-top: var(--space-10);
}
.section-foot__hint { color: var(--text-tertiary); font-size: var(--text-sm); }

/* --- Button --- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-6);
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  line-height: 1;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background var(--duration-base), border-color var(--duration-base), transform var(--duration-fast), color var(--duration-base);
  text-decoration: none;
  white-space: nowrap;
  user-select: none;
}
.btn--primary { background: var(--brand-bg); color: var(--text-inverse); }
.btn--primary:hover { background: var(--brand-bg-hover); color: var(--text-inverse); }
.btn--primary:active { transform: translateY(1px); }

.btn--secondary {
  background: transparent;
  color: var(--text-primary);
  border-color: var(--border-strong);
}
.btn--secondary:hover { border-color: var(--text-primary); color: var(--text-primary); background: var(--surface-overlay); }

.btn--ghost { background: transparent; color: var(--text-secondary); border-color: transparent; }
.btn--ghost:hover { background: var(--surface-raised); color: var(--text-primary); }

.btn--sm { padding: var(--space-2) var(--space-4); font-size: var(--text-sm); }
.btn--lg { padding: var(--space-4) var(--space-8); font-size: var(--text-lg); }

.btn:focus-visible { outline: 2px solid var(--border-focus); outline-offset: 2px; }

/* --- Card --- */
.card {
  background: var(--surface-raised);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  transition: border-color var(--duration-slow), transform var(--duration-slow), background var(--duration-slow);
}
.card--interactive { cursor: pointer; height: 100%; }
.card--interactive:hover {
  border-color: var(--border-strong);
  transform: translateY(-2px);
}

.card-link { display: block; text-decoration: none; color: inherit; height: 100%; }
.card-link:hover { color: inherit; }

/* --- Form --- */
.field { display: flex; flex-direction: column; gap: var(--space-2); }
.field--full { grid-column: 1 / -1; }

.label {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--text-secondary);
}

.input, .textarea, .select {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  background: var(--surface-base);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  font: inherit;
  font-size: var(--text-base);
  transition: border-color var(--duration-base), box-shadow var(--duration-base);
}
.textarea { resize: vertical; min-height: 96px; }
.select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--text-tertiary) 50%), linear-gradient(135deg, var(--text-tertiary) 50%, transparent 50%); background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-right: var(--space-10); }

.input::placeholder, .textarea::placeholder { color: var(--text-tertiary); }
.input:focus, .textarea:focus, .select:focus {
  outline: none;
  border-color: var(--border-focus);
  box-shadow: 0 0 0 3px var(--brand-subtle);
}

/* --- Tag / chip --- */
.tag {
  display: inline-flex;
  align-items: center;
  padding: 2px var(--space-2);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-secondary);
  background: var(--surface-overlay);
  border: 1px solid var(--border-subtle);
  border-radius: 999px;
  white-space: nowrap;
}

/* --- Inline code --- */
code:not(pre code) {
  font-family: var(--font-mono);
  font-size: .9em;
  padding: .15em .35em;
  background: var(--brand-subtle);
  border: 1px solid var(--brand-border);
  border-radius: 4px;
  color: var(--brand-text);
}


/* ============================================================
   6. HEADER & FOOTER
   ============================================================ */

/* --- Brand --- */
.brand-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, var(--brand-500) 0%, var(--brand-700) 100%);
  color: #fff;
  font-weight: var(--weight-bold);
  font-size: var(--text-base);
  letter-spacing: -.02em;
  box-shadow: 0 0 0 1px var(--border-subtle), inset 0 1px 0 rgba(255,255,255,.12);
}
.brand-name {
  display: inline-flex;
  align-items: baseline;
  gap: 1px;
  font-weight: var(--weight-bold);
  letter-spacing: -.02em;
  color: var(--text-primary);
}
.brand-name__dot { color: var(--accent-500); }

/* --- Site header --- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--surface-base) 80%, transparent);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--duration-base), background var(--duration-base);
}
.site-header[data-stuck="true"] {
  border-bottom-color: var(--border-subtle);
  background: color-mix(in srgb, var(--surface-base) 92%, transparent);
}
.site-header__row {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  height: var(--header-height);
}
.site-header__brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  text-decoration: none;
  color: inherit;
}
.site-header__brand:hover { color: inherit; }

.site-nav { flex: 1; display: none; }
@media (min-width: 1024px) {
  .site-nav { display: block; }
}
.site-nav__list {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}
.site-nav__link, .site-nav__link--button {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  background: transparent;
  border: 0;
  color: var(--text-secondary);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  text-decoration: none;
  transition: color var(--duration-base), background var(--duration-base);
}
.site-nav__link:hover, .site-nav__link--button:hover {
  color: var(--text-primary);
  background: var(--surface-raised);
}
.site-nav__item--has-mega { position: relative; }

/* Mega menu */
.mega {
  position: absolute;
  top: calc(100% + var(--space-2));
  left: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(180px, 1fr));
  gap: var(--space-6);
  padding: var(--space-6);
  background: var(--surface-raised);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  min-width: 640px;
  visibility: hidden;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity var(--duration-base) var(--ease),
              transform var(--duration-base) var(--ease),
              visibility 0s linear var(--duration-base);
  pointer-events: none;
}
.mega[data-open="true"] {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  transition: opacity var(--duration-base) var(--ease),
              transform var(--duration-base) var(--ease),
              visibility 0s linear 0s;
}
.mega__col {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.mega__title {
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin-bottom: var(--space-3);
}
.mega__list { display: flex; flex-direction: column; gap: var(--space-1); }
.mega__list a {
  display: block;
  padding: var(--space-2) var(--space-3);
  margin-inline: calc(var(--space-3) * -1);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  color: var(--text-primary);
  text-decoration: none;
  transition: background var(--duration-base), color var(--duration-base);
}
.mega__list a:hover { background: var(--surface-overlay); color: var(--brand-text); }

.site-header__actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-left: auto;
}
.site-header__cta { display: none; }
@media (min-width: 768px) { .site-header__cta { display: inline-flex; } }

/* Theme toggle */
.theme-toggle {
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: var(--text-secondary);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  transition: color var(--duration-base), border-color var(--duration-base), background var(--duration-base);
}
.theme-toggle:hover { color: var(--text-primary); border-color: var(--border-strong); background: var(--surface-raised); }
.theme-toggle .icon-sun { display: none; }
.theme-toggle .icon-moon { display: block; }
[data-theme="light"] .theme-toggle .icon-sun { display: block; }
[data-theme="light"] .theme-toggle .icon-moon { display: none; }

/* Language switcher */
.lang-switcher {
  display: inline-flex;
  align-items: center;
  gap: 1px;
  padding: 2px;
  background: var(--surface-raised);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
}
.lang-switcher__item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 28px;
  padding: 0 var(--space-2);
  color: var(--text-tertiary);
  text-decoration: none;
  border-radius: calc(var(--radius-md) - 3px);
  transition: color var(--duration-base), background var(--duration-base);
}
.lang-switcher__item:hover {
  color: var(--text-primary);
  background: var(--surface-overlay);
}
.lang-switcher__item--active {
  color: var(--text-primary);
  background: var(--brand-subtle);
  font-weight: var(--weight-medium);
}

/* Hamburger */
.hamburger {
  width: 38px;
  height: 38px;
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 4px;
  background: transparent;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  padding: 0;
}
.hamburger span {
  display: block;
  width: 16px;
  height: 1.5px;
  background: var(--text-primary);
  border-radius: 2px;
  transition: transform var(--duration-base), opacity var(--duration-base);
}
.hamburger[aria-expanded="true"] span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.hamburger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.hamburger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }
@media (min-width: 1024px) { .hamburger { display: none; } }

/* Mobile menu */
.mobile-menu {
  position: fixed;
  inset: var(--header-height) 0 0 0;
  background: var(--surface-base);
  z-index: 49;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: var(--space-6) 0 var(--space-16);
  visibility: hidden;
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity var(--duration-base) var(--ease),
              transform var(--duration-base) var(--ease),
              visibility 0s linear var(--duration-base);
}
.mobile-menu[data-open="true"] {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
  transition: opacity var(--duration-base) var(--ease),
              transform var(--duration-base) var(--ease),
              visibility 0s linear 0s;
}
@media (min-width: 1024px) {
  .mobile-menu, .mobile-menu[data-open="true"] {
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none;
  }
}

.mobile-menu__group {
  border-bottom: 1px solid var(--border-subtle);
}
.mobile-menu__group summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) 0;
  font-size: var(--text-lg);
  font-weight: var(--weight-medium);
  cursor: pointer;
  color: var(--text-primary);
  user-select: none;
}
.mobile-menu__group summary:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 4px;
  border-radius: var(--radius-sm);
}
.mobile-menu__group summary::-webkit-details-marker { display: none; }
.mobile-menu__group summary::after {
  content: "";
  width: 9px; height: 9px;
  border-right: 2px solid var(--text-tertiary);
  border-bottom: 2px solid var(--text-tertiary);
  transform: rotate(45deg);
  transition: transform var(--duration-base);
  margin-right: 4px;
}
.mobile-menu__group[open] summary::after { transform: rotate(-135deg); margin-top: 4px; }

.mobile-menu__sub { padding-bottom: var(--space-4); }
.mobile-menu__sub strong {
  display: block;
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin: var(--space-4) 0 var(--space-2);
}
.mobile-menu__sub ul { display: flex; flex-direction: column; gap: 0; margin: 0; }
.mobile-menu__sub a {
  display: block;
  padding: var(--space-3) 0;
  color: var(--text-secondary);
  font-size: var(--text-base);
  text-decoration: none;
  transition: color var(--duration-base);
}
.mobile-menu__sub a:hover { color: var(--brand-text); }

.mobile-menu__link {
  display: block;
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--border-subtle);
  color: var(--text-primary);
  font-size: var(--text-lg);
  font-weight: var(--weight-medium);
  text-decoration: none;
}
.mobile-menu__link:hover { color: var(--brand-text); }

.mobile-menu__cta { width: 100%; margin-top: var(--space-6); }

/* --- Site footer --- */
.site-footer {
  margin-top: var(--space-16);
  padding: var(--space-16) 0 var(--space-8);
  background: var(--surface-sunken);
  border-top: 1px solid var(--border-subtle);
}
[data-theme="light"] .site-footer { background: var(--surface-raised); }
.site-footer__grid {
  display: grid;
  gap: var(--space-10);
  grid-template-columns: 1fr;
}
@media (min-width: 600px) {
  .site-footer__grid { grid-template-columns: 1fr 1fr; }
  .site-footer__col--brand { grid-column: 1 / -1; max-width: 480px; }
}
@media (min-width: 1024px) {
  .site-footer__grid { grid-template-columns: 2fr 1fr 1fr 1fr; }
  .site-footer__col--brand { grid-column: auto; max-width: 360px; }
}
.site-footer__col h3.site-footer__title {
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin: 0 0 var(--space-4);
  font-weight: var(--weight-medium);
}
.site-footer__col ul { display: flex; flex-direction: column; gap: var(--space-2); }
.site-footer__col a {
  color: var(--text-secondary);
  font-size: var(--text-sm);
  text-decoration: none;
  transition: color var(--duration-base);
}
.site-footer__col a:hover { color: var(--text-primary); }
.site-footer__col--brand { display: flex; flex-direction: column; gap: var(--space-3); max-width: 360px; }
.site-footer__col--brand .text-body-sm { color: var(--text-tertiary); }
.site-footer__brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  text-decoration: none;
  color: var(--text-primary);
  margin-bottom: var(--space-2);
}
.site-footer__social { flex-direction: row !important; gap: var(--space-3); margin-top: var(--space-2); }
.site-footer__social a {
  width: 36px; height: 36px;
  display: inline-flex;
  align-items: center; justify-content: center;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  transition: color var(--duration-base), border-color var(--duration-base);
}
.site-footer__social a:hover { color: var(--brand-text); border-color: var(--brand-border); }

.site-footer__bottom {
  margin-top: var(--space-12);
  padding-top: var(--space-6);
  border-top: 1px solid var(--border-subtle);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-8);
  align-items: center;
  justify-content: space-between;
}
.site-footer__bottom a { color: var(--text-tertiary); }
.site-footer__bottom a:hover { color: var(--text-primary); }


/* ============================================================
   7. BLOCKS
   ============================================================ */

/* === BLOCK: hero-home === */
.block-hero-home {
  padding-block: clamp(3rem, 6vw + 1.5rem, 7rem) clamp(2rem, 4vw + 1rem, 5rem);
  position: relative;
  overflow: hidden;
}
.block-hero-home::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(60% 40% at 30% 30%, rgba(59,130,246,.15), transparent 60%),
    radial-gradient(50% 50% at 100% 0%, rgba(245,158,11,.08), transparent 60%);
  z-index: -1;
}
.block-hero-home__grid {
  display: grid;
  gap: var(--space-12);
  grid-template-columns: 1fr;
  align-items: center;
}
@media (min-width: 1024px) {
  .block-hero-home__grid { grid-template-columns: 1.15fr 1fr; gap: var(--space-16); }
}
.block-hero-home__content { display: flex; flex-direction: column; gap: var(--space-6); max-width: 640px; }
.block-hero-home__pretitle { color: var(--text-tertiary); }
.block-hero-home__title { margin: 0; }
.block-hero-home__subtitle { color: var(--text-secondary); margin: 0; max-width: 56ch; }
.block-hero-home__cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-2);
}
@media (max-width: 539px) {
  .block-hero-home__cta { flex-direction: column; align-items: stretch; }
  .block-hero-home__cta .btn { width: 100%; }
}

.metrics {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
  padding-top: var(--space-6);
  border-top: 1px solid var(--border-subtle);
  margin-top: var(--space-2);
}
@media (min-width: 640px) { .metrics { grid-template-columns: repeat(4, 1fr); } }
.metrics__item { display: flex; flex-direction: column; gap: 2px; }
.metrics__value {
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-tight);
  color: var(--text-primary);
  line-height: 1;
}
.metrics__suffix { color: var(--accent-text); margin-left: 1px; }
.metrics__label { font-size: var(--text-xs); color: var(--text-tertiary); }

/* hero visual code-card */
.block-hero-home__visual { display: flex; justify-content: center; }
.hero-card {
  width: 100%;
  max-width: 520px;
  background: var(--surface-raised);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  transform: rotate(-1deg);
  transition: transform var(--duration-slow);
}
.hero-card:hover { transform: rotate(0); }
.hero-card__head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--surface-overlay);
  border-bottom: 1px solid var(--border-subtle);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-tertiary);
}
.hero-card__dots { display: inline-flex; gap: 6px; }
.hero-card__dots i {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--slate-700);
}
.hero-card__dots i:nth-child(1) { background: #ef4444; }
.hero-card__dots i:nth-child(2) { background: #f59e0b; }
.hero-card__dots i:nth-child(3) { background: #22c55e; }
.hero-card__file { margin-left: var(--space-2); }
.hero-card__code {
  margin: 0;
  padding: var(--space-5);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  line-height: 1.7;
  color: var(--code-text);
  overflow-x: auto;
}
.hero-card__code .tk-c  { color: var(--code-comment);  font-style: italic; }
.hero-card__code .tk-k  { color: var(--code-keyword); }
.hero-card__code .tk-s  { color: var(--code-string); }
.hero-card__code .tk-fn { color: var(--code-function); }
.hero-card__code .tk-v  { color: var(--code-number); }
.hero-card__foot {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  background: var(--state-success-bg);
  border-top: 1px solid var(--state-success-border);
  color: var(--state-success-text);
  font-size: var(--text-sm);
  font-family: var(--font-mono);
}
.hero-card__pulse {
  position: relative;
  width: 8px; height: 8px;
  display: inline-flex;
  align-items: center; justify-content: center;
}
.hero-card__pulse i {
  position: absolute;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--state-success-text);
}
.hero-card__pulse i::before {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  background: currentColor;
  opacity: .35;
  animation: pulse 1.6s ease-out infinite;
}
@keyframes pulse {
  0%   { transform: scale(.6); opacity: .5; }
  100% { transform: scale(2);  opacity: 0; }
}


/* === BLOCK: hero-page (universal hub & about hero) === */
.block-hero-page {
  padding-block: clamp(2rem, 4vw + 1rem, 4rem) clamp(2rem, 3vw + 1rem, 3rem);
}
.block-hero-page__head {
  display: grid;
  gap: var(--space-10);
  grid-template-columns: 1fr;
  align-items: start;
}
@media (min-width: 1024px) {
  .block-hero-page__head { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: var(--space-12); }
}
.block-hero-page__intro { display: flex; flex-direction: column; gap: var(--space-4); max-width: 720px; }
.block-hero-page__category { color: var(--brand-text); }
.block-hero-page__title { margin: 0; }
.block-hero-page__lead { margin: 0; color: var(--text-secondary); font-size: var(--text-lg); max-width: 60ch; }

/* Aside contact card on /about/ */
.hero-page-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  padding: var(--space-6);
  background: var(--surface-raised);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
}
.hero-page-card__avatar { width: 96px; height: 96px; align-self: center; }
.hero-page-card__avatar .avatar__initial { font-size: 2.5rem; }
.hero-page-card__avatar .avatar__ring { inset: -16px; }
.hero-page-card__contacts { display: flex; flex-direction: column; gap: var(--space-3); }
.hero-page-card__contacts li {
  display: grid;
  grid-template-columns: 88px 1fr;
  gap: var(--space-3);
  align-items: baseline;
  padding-block: var(--space-2);
  border-bottom: 1px dashed var(--border-subtle);
}
.hero-page-card__contacts li:last-child { border-bottom: 0; }
.hero-page-card__key {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}
.hero-page-card__contacts a { color: var(--text-primary); text-decoration: none; transition: color var(--duration-base); }
.hero-page-card__contacts a:hover { color: var(--brand-text); }


/* === BLOCK: metrics-strip (about page) — full-bleed metrics row === */
.block-metrics-strip {
  padding-block: clamp(2rem, 3vw + 1rem, 2.5rem) !important;
  background: var(--surface-raised);
  border-block: 1px solid var(--border-subtle);
}
.metrics--strip {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-6);
  padding: 0;
  border: 0;
  margin: 0;
}
@media (min-width: 768px) { .metrics--strip { grid-template-columns: repeat(4, 1fr); } }
.metrics--strip .metrics__value { font-size: clamp(2.5rem, 2vw + 1.5rem, 3.25rem); }
.metrics--strip .metrics__label {
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-family: var(--font-mono);
  color: var(--text-tertiary);
  margin-top: var(--space-1);
}


/* === BLOCK: about-story === */
.block-about-story { padding-block: clamp(3rem, 5vw + 1rem, 5rem); }
.about-story { display: flex; flex-direction: column; gap: var(--space-12); }
.about-story__section { display: flex; flex-direction: column; gap: var(--space-3); }
.about-story__section h3 {
  margin: 0;
  font-size: var(--text-xl);
  letter-spacing: var(--tracking-tight);
  color: var(--text-primary);
  position: relative;
  padding-left: var(--space-5);
}
.about-story__section h3::before {
  content: "";
  position: absolute;
  left: 0; top: .55em;
  width: 12px; height: 1px;
  background: var(--brand-text);
}
.about-story__section p {
  margin: 0;
  color: var(--text-secondary);
  line-height: var(--leading-relaxed);
}
.about-story__section ul {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  list-style: none;
  padding: 0;
}
.about-story__section ul li {
  position: relative;
  padding-left: var(--space-5);
  color: var(--text-secondary);
  line-height: var(--leading-relaxed);
}
.about-story__section ul li::before {
  content: "";
  position: absolute;
  left: 0; top: .65em;
  width: 8px; height: 1px;
  background: var(--text-disabled);
}
.about-story__section strong { color: var(--text-primary); }
.about-story__section a {
  color: var(--brand-text);
  text-decoration: none;
  background-image: linear-gradient(0deg, currentColor, currentColor);
  background-size: 100% 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size var(--duration-base);
}
.about-story__section a:hover { background-size: 100% 2px; }


/* === BLOCK: social-links (cards grid) === */
.social-links {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}
@media (min-width: 640px)  { .social-links { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .social-links { grid-template-columns: repeat(3, 1fr); } }

.social-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-6);
  background: var(--surface-raised);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  text-decoration: none;
  color: var(--text-primary);
  transition: border-color var(--duration-slow), transform var(--duration-slow), background var(--duration-slow);
  height: 100%;
}
.social-card:hover {
  border-color: var(--brand-border);
  transform: translateY(-2px);
  color: var(--text-primary);
}
.social-card__head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--brand-text);
}
.social-card__name {
  font-size: var(--text-h4-size, var(--text-lg));
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  color: var(--text-primary);
  letter-spacing: -.01em;
}
.social-card__desc {
  margin: 0;
  flex: 1;
  color: var(--text-secondary);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
}
.social-card__handle {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--brand-text);
  margin-top: auto;
  letter-spacing: -.01em;
}
.social-card:hover .social-card__handle { color: var(--brand-text-hover); }


/* === BLOCK: services-preview === */
.services-groups {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: 1fr;
}
@media (min-width: 768px)  { .services-groups { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .services-groups { grid-template-columns: repeat(3, 1fr); } }

.services-group {
  background: var(--surface-raised);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  position: relative;
  overflow: hidden;
}
.services-group::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--brand-subtle) 0%, transparent 60%);
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--duration-slow);
}
.services-group:hover::before { opacity: 1; }
.services-group:nth-child(2)::before { background: linear-gradient(135deg, rgba(245,158,11,.08) 0%, transparent 60%); }
.services-group:nth-child(3)::before { background: linear-gradient(135deg, rgba(16,185,129,.08) 0%, transparent 60%); }

.services-group__head { display: flex; flex-direction: column; gap: var(--space-1); position: relative; }
.services-group__num {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  color: var(--text-tertiary);
  margin-bottom: var(--space-2);
}
.services-group__title { margin: 0; }

.services-group__list { display: flex; flex-direction: column; gap: var(--space-2); position: relative; }

.service-link {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: var(--space-2) var(--space-4);
  padding: var(--space-3);
  margin-inline: calc(var(--space-3) * -1);
  border-radius: var(--radius-md);
  text-decoration: none;
  color: var(--text-primary);
  border: 1px solid transparent;
  transition: background var(--duration-base), border-color var(--duration-base);
}
.service-link__title {
  font-weight: var(--weight-medium);
  font-size: var(--text-base);
  grid-column: 1;
}
.service-link__desc {
  grid-column: 1 / -1;
  font-size: var(--text-sm);
  color: var(--text-tertiary);
}
.service-link__arrow {
  grid-row: 1;
  grid-column: 2;
  color: var(--text-tertiary);
  transition: transform var(--duration-base), color var(--duration-base);
}
.service-link:hover {
  background: var(--surface-overlay);
  color: var(--text-primary);
}
.service-link:hover .service-link__arrow { transform: translateX(3px); color: var(--brand-text); }

.service-link--featured {
  background: var(--brand-subtle);
  border-color: var(--brand-border);
}
.service-link__badge {
  display: inline-block;
  align-self: start;
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--accent-text);
  font-weight: var(--weight-bold);
  grid-column: 1 / -1;
  margin-bottom: var(--space-1);
}


/* === BLOCK: cases-featured === */
.cases-grid {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: 1fr;
}
@media (min-width: 768px)  { .cases-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .cases-grid { grid-template-columns: repeat(3, 1fr); } }

.case-card { display: block; height: 100%; }
.case-card__inner {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 0;
  position: relative;
  overflow: hidden;
}

/* Cover photo at top (4:3) */
.case-card__cover {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--surface-overlay);
  border-bottom: 1px solid var(--border-subtle);
}
.case-card__cover img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--duration-slow) var(--ease-out);
}
.case-card__cover::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, transparent 50%, rgba(2,6,23,.45) 100%);
  opacity: .6;
  transition: opacity var(--duration-slow);
}
.case-card:hover .case-card__cover img { transform: scale(1.04); }
.case-card:hover .case-card__cover::after { opacity: .35; }

/* Body — все текстовые элементы внутри */
.case-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-6);
  flex: 1;
  position: relative;
  overflow: hidden;
}
.case-card__body::after {
  content: "";
  position: absolute;
  inset: auto -40% -40% auto;
  width: 240px; height: 240px;
  background: radial-gradient(circle, var(--brand-subtle) 0%, transparent 60%);
  pointer-events: none;
  transition: opacity var(--duration-slow);
  opacity: .5;
  z-index: -1;
}
.case-card:hover .case-card__body::after { opacity: .85; }

.case-card__metric { display: flex; flex-direction: column; gap: var(--space-1); }
.case-card__big {
  font-size: clamp(2rem, 1.5rem + 2vw, 3rem);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-tight);
  line-height: 1;
  background: linear-gradient(135deg, var(--brand-text) 0%, var(--accent-400) 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.case-card__unit {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-tertiary);
}
.case-card__tags { display: flex; flex-wrap: wrap; gap: var(--space-1); }
.case-card__title { margin: 0; }
.case-card__desc { color: var(--text-secondary); margin: 0; }
.case-card__more {
  margin-top: auto;
  padding-top: var(--space-4);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--brand-text);
  transition: color var(--duration-base), transform var(--duration-base);
}
.case-card__inner:hover .case-card__more { color: var(--brand-text-hover); }


/* === BLOCK: plugins-showcase === */
.plugins-grid {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: 1fr;
}
@media (min-width: 768px)  { .plugins-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .plugins-grid { grid-template-columns: repeat(3, 1fr); } }

.plugin-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  height: 100%;
}
.plugin-card__head { display: flex; align-items: center; gap: var(--space-4); }
.plugin-card__icon {
  width: 56px; height: 56px;
  display: inline-flex;
  align-items: center; justify-content: center;
  background: var(--brand-subtle);
  border: 1px solid var(--brand-border);
  border-radius: var(--radius-md);
  color: var(--brand-text);
  flex-shrink: 0;
}
.plugin-card__title { margin: 0 0 var(--space-1); }
.plugin-card__tag {
  display: inline-block;
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--accent-text);
  font-weight: var(--weight-bold);
}
.plugin-card__desc { color: var(--text-secondary); margin: 0; }

.plugin-card__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
  margin: 0;
  padding: var(--space-4) 0;
  border-top: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
}
.plugin-card__stats > div { display: flex; flex-direction: column; gap: 2px; }
.plugin-card__stats dt { font-size: var(--text-xs); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--text-tertiary); margin: 0; }
.plugin-card__stats dd {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--text-base);
  font-weight: var(--weight-bold);
  color: var(--text-primary);
}

.plugin-card--cta {
  background: linear-gradient(135deg, var(--brand-bg) 0%, var(--brand-700) 100%);
  border: 1px solid var(--brand-bg);
  color: #fff;
  box-shadow: 0 12px 32px rgba(59,130,246,.25);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-6);
  border-radius: var(--radius-lg);
}
.plugin-card--cta .plugin-card__title { color: #fff; }
.plugin-card--cta .plugin-card__desc  { color: rgba(255,255,255,.85); }
.plugin-card--cta .btn--primary {
  background: #fff;
  color: var(--brand-700);
  margin-top: auto;
  align-self: flex-start;
}
.plugin-card--cta .btn--primary:hover { background: var(--slate-100); color: var(--brand-700); }


/* === HARD TEMPLATE: single-guide === */

.guide-hero { padding-block: clamp(2rem, 4vw + 1rem, 4rem) clamp(2rem, 3vw + 1rem, 3rem); }
.guide-hero__category {
  display: inline-block;
  margin-bottom: var(--space-4);
  color: var(--brand-text);
}
.guide-hero__title {
  margin: 0 0 var(--space-4);
  font-size: clamp(2.25rem, 4vw + 1rem, 3.75rem);
  letter-spacing: -.035em;
  line-height: 1;
}
.guide-hero__lead {
  margin: 0 0 var(--space-8);
  color: var(--text-secondary);
  font-size: var(--text-lg);
  max-width: 60ch;
}

/* — Post meta block (D1) — */
.post-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-6) var(--space-8);
  padding: var(--space-5) 0;
  margin: 0 0 var(--space-8);
  border-top: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
}
.post-meta__author {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  text-decoration: none;
  color: inherit;
}
.post-meta__author:hover { color: inherit; }
.post-meta__avatar {
  width: 40px; height: 40px;
  display: inline-flex;
  align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--brand-700), var(--brand-500));
  color: #fff;
  font-weight: var(--weight-bold);
  font-size: var(--text-base);
  border-radius: 50%;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.15);
}
.post-meta__author-info {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}
.post-meta__author-info strong { font-size: var(--text-sm); color: var(--text-primary); }
.post-meta__facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-6);
  font-size: var(--text-sm);
  color: var(--text-secondary);
}
.post-meta__facts li { display: flex; align-items: baseline; gap: var(--space-2); }
.post-meta__key {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}
.post-meta__facts time { font-variant-numeric: tabular-nums; }


/* — Guide body: content + sticky TOC — */
.guide-body { padding-block: var(--space-4) clamp(2rem, 4vw + 1rem, 4rem); }
.grid-article {
  display: grid;
  gap: var(--space-12);
  grid-template-columns: 1fr;
}
@media (min-width: 1024px) {
  .grid-article {
    grid-template-columns: 240px minmax(0, 1fr);
    gap: var(--space-16);
    align-items: flex-start;
  }
}

.guide-content { max-width: 70ch; }
.guide-content h2 { margin-top: var(--space-16); margin-bottom: var(--space-4); scroll-margin-top: calc(var(--header-height) + var(--space-6)); }
.guide-content h3 { scroll-margin-top: calc(var(--header-height) + var(--space-6)); }
.guide-content > h2:first-child { margin-top: 0; }


/* — TOC (D2) — sticky sidebar on lg+ — */
.toc {
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  order: -1;
}
@media (min-width: 1024px) {
  .toc {
    position: sticky;
    top: calc(var(--header-height) + var(--space-6));
    max-height: calc(100vh - var(--header-height) - var(--space-12));
    overflow-y: auto;
    order: initial;
    padding-right: var(--space-2);
  }
}
.toc__title {
  display: block;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin-bottom: var(--space-3);
  padding-left: var(--space-3);
}
.toc__list {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  border-left: 1px solid var(--border-subtle);
}
.toc__item--h3 { padding-left: var(--space-4); }

.toc__link {
  display: block;
  padding: 6px var(--space-3);
  margin-left: -1px;
  border-left: 1px solid transparent;
  color: var(--text-secondary);
  text-decoration: none;
  font-size: var(--text-sm);
  line-height: 1.4;
  transition: color var(--duration-base), border-color var(--duration-base), background var(--duration-base);
}
.toc__item--h3 .toc__link {
  font-size: 13px;
  color: var(--text-tertiary);
  padding-left: var(--space-4);
}
.toc__link:hover {
  color: var(--text-primary);
  border-left-color: var(--border-strong);
}
.toc__link--active {
  color: var(--brand-text);
  border-left-color: var(--brand-text);
  font-weight: var(--weight-medium);
}


/* === Group C — Inline content blocks === */

/* — C2. Callout — */
.callout {
  display: flex;
  gap: var(--space-4);
  padding: var(--space-5) var(--space-6);
  margin-block: var(--space-6) !important;
  border-radius: var(--radius-md);
  border-left: 3px solid;
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  flex-direction: column;
}
.callout__title {
  font-weight: var(--weight-bold);
  font-size: var(--text-sm);
  letter-spacing: .04em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}
.callout__title::before {
  content: "";
  width: 14px; height: 1px;
  background: currentColor;
}
.callout p { margin: 0; }
.callout p + p { margin-top: var(--space-2); }

.callout--info {
  background: var(--brand-subtle);
  border-color: var(--brand-text);
  color: var(--text-primary);
}
.callout--info .callout__title { color: var(--brand-text); }

.callout--success {
  background: var(--state-success-bg);
  border-color: var(--state-success-text);
  color: var(--text-primary);
}
.callout--success .callout__title { color: var(--state-success-text); }

.callout--warning {
  background: var(--state-warning-bg);
  border-color: var(--state-warning-text);
  color: var(--text-primary);
}
.callout--warning .callout__title { color: var(--state-warning-text); }

.callout--danger {
  background: var(--state-danger-bg);
  border-color: var(--state-danger-text);
  color: var(--text-primary);
}
.callout--danger .callout__title { color: var(--state-danger-text); }

.callout--practice {
  background: var(--surface-raised);
  border-color: var(--accent-500);
  color: var(--text-primary);
}
.callout--practice .callout__title { color: var(--accent-text); }


/* — C3. Comparison-table — */
.comparison-table { margin-block: var(--space-8) !important; }
.comparison-table__wrap {
  overflow-x: auto;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--surface-raised);
  -webkit-overflow-scrolling: touch;
}
.comparison-table .table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}
.comparison-table .table__caption {
  padding: var(--space-3) var(--space-5);
  text-align: left;
  caption-side: top;
  font-size: var(--text-xs);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  font-family: var(--font-mono);
  border-bottom: 1px solid var(--border-subtle);
  background: var(--surface-overlay);
}
.comparison-table thead th {
  text-align: left;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border-default);
  font-weight: var(--weight-medium);
  color: var(--text-secondary);
  font-size: var(--text-xs);
  letter-spacing: .06em;
  text-transform: uppercase;
  background: var(--surface-overlay);
  white-space: nowrap;
}
.comparison-table tbody th {
  text-align: left;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border-subtle);
  color: var(--text-primary);
  font-weight: var(--weight-bold);
  white-space: nowrap;
}
.comparison-table tbody td {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  vertical-align: top;
}
.comparison-table tbody tr:last-child th,
.comparison-table tbody tr:last-child td { border-bottom: none; }
.comparison-table tbody tr:hover { background: var(--surface-overlay); }

/* badges in tables */
.badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-family: var(--font-mono);
  letter-spacing: .04em;
  white-space: nowrap;
}
.badge--ok {
  background: var(--state-success-bg);
  color: var(--state-success-text);
  border: 1px solid var(--state-success-border);
}
.badge--off {
  background: var(--surface-overlay);
  color: var(--text-disabled);
  border: 1px solid var(--border-default);
}


/* — C5. Code-block — */
.code-block {
  margin: var(--space-6) 0 !important;
  background: var(--code-bg);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.code-block__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-4);
  background: var(--surface-overlay);
  border-bottom: 1px solid var(--border-subtle);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-tertiary);
}
.code-block__file {
  position: relative;
  padding-left: 14px;
}
.code-block__file::before {
  content: "";
  position: absolute;
  left: 0; top: 50%;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent-500);
  transform: translateY(-50%);
}
.code-block__lang {
  letter-spacing: .12em;
  text-transform: uppercase;
  font-size: 10px;
  color: var(--brand-text);
}
.code-block__pre {
  margin: 0;
  padding: var(--space-5);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  line-height: 1.6;
  color: var(--code-text);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  tab-size: 2;
}
.code-block__pre code {
  background: transparent;
  padding: 0;
  border: 0;
  color: inherit;
  font-size: inherit;
  border-radius: 0;
}
.code-block__pre .tk-c  { color: var(--code-comment);  font-style: italic; }
.code-block__pre .tk-k  { color: var(--code-keyword); }
.code-block__pre .tk-s  { color: var(--code-string); }
.code-block__pre .tk-fn { color: var(--code-function); }
.code-block__pre .tk-v  { color: var(--code-number); }
.code-block__pre .tk-n  { color: var(--accent-400); }


/* — Author bio extended (D3) — */
.guide-author { padding-block: clamp(3rem, 5vw + 1rem, 5rem); }
.author-bio {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: 1fr;
  padding: var(--space-8);
  background: var(--surface-raised);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
}
@media (min-width: 640px) { .author-bio { grid-template-columns: 120px 1fr; gap: var(--space-8); } }

.author-bio__avatar {
  width: 100px; height: 100px;
  display: flex;
  align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--brand-700), var(--brand-500));
  color: #fff;
  border-radius: 50%;
  font-weight: 800;
  font-size: 3rem;
  letter-spacing: -.04em;
  flex-shrink: 0;
  box-shadow: inset 0 2px 0 rgba(255,255,255,.16);
}
.author-bio__content { display: flex; flex-direction: column; gap: var(--space-3); }
.author-bio__content h2 { margin: 0; }
.author-bio__content p { margin: 0; color: var(--text-secondary); }
.author-bio__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-3);
}


/* — Guide related — uses block-cases-featured pattern — */
.guide-related { padding-block: clamp(2rem, 4vw + 1rem, 4rem); }


/* === HARD TEMPLATE: single-case === */

/* — Case hero — */
.case-hero { padding-block: clamp(2rem, 4vw + 1rem, 4rem) clamp(1.5rem, 3vw + 1rem, 3rem); }
.case-hero__head { max-width: 880px; display: flex; flex-direction: column; gap: var(--space-5); margin-bottom: var(--space-10); }
.case-hero__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.case-hero__title {
  margin: 0;
  font-size: clamp(2.25rem, 4vw + 1.25rem, 4.25rem);
  line-height: 1;
  letter-spacing: -.04em;
  font-weight: 800;
}
.case-hero__metric {
  display: inline-block;
  background: linear-gradient(135deg, var(--brand-text) 0%, var(--brand-300) 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  font-variant-numeric: tabular-nums;
}
.case-hero__metric--alt {
  display: inline-block;
  color: var(--accent-400);
  font-variant-numeric: tabular-nums;
}
.case-hero__subtitle {
  color: var(--text-secondary);
  margin: 0;
  font-size: var(--text-lg);
  max-width: 64ch;
}

/* Case meta strip — flat dl, columnar — */
.case-meta-strip {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: 1fr 1fr;
  padding: var(--space-6) 0;
  margin: 0;
  border-top: 1px solid var(--border-default);
  border-bottom: 1px solid var(--border-default);
}
@media (min-width: 768px)  { .case-meta-strip { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .case-meta-strip { grid-template-columns: repeat(5, 1fr); } }

.case-meta-strip__item { display: flex; flex-direction: column; gap: var(--space-1); margin: 0; }
.case-meta-strip__item dt {
  font-size: var(--text-xs);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  font-family: var(--font-mono);
  font-weight: var(--weight-medium);
}
.case-meta-strip__item dd {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--text-primary);
  line-height: var(--leading-snug);
}
.case-meta-strip__item dd .text-meta { font-size: var(--text-xs); display: block; margin-top: 2px; }


/* — Case TLDR section (compact) — */
.case-tldr-section { padding-block: clamp(2rem, 3vw + 1rem, 3rem); }


/* — Case result (big metrics) — */
.case-result__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--border-subtle);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
@media (min-width: 640px)  { .case-result__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .case-result__grid { grid-template-columns: repeat(4, 1fr); } }

.case-result__cell {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-8) var(--space-6);
  background: var(--surface-raised);
  position: relative;
}
.case-result__cell--primary {
  background:
    radial-gradient(80% 100% at 0% 0%, var(--brand-subtle) 0%, transparent 60%),
    var(--surface-raised);
}
.case-result__cell--primary .case-result__big {
  background: linear-gradient(135deg, var(--brand-text) 0%, var(--accent-400) 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.case-result__big {
  font-size: clamp(2.25rem, 3vw + 1.5rem, 3.5rem);
  font-weight: 800;
  letter-spacing: -.04em;
  line-height: 1;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}
.case-result__suffix { color: var(--accent-text); margin-left: 1px; font-size: .65em; }
.case-result__unit {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}
.case-result__delta {
  margin-top: var(--space-2);
  padding-top: var(--space-3);
  border-top: 1px dashed var(--border-subtle);
  font-size: var(--text-sm);
  color: var(--text-secondary);
}
.case-result__note {
  display: block;
  margin-top: var(--space-6);
  text-align: center;
}


/* — Case narrative — uses .rich-text inside hard template — */
.case-narrative { padding-block: clamp(3rem, 5vw + 1rem, 5rem); }


/* — Case screenshot full-bleed — */
.case-screenshot { padding-block: clamp(2rem, 4vw + 1rem, 4rem); }
.case-shot { margin: 0; display: flex; flex-direction: column; gap: var(--space-4); }
.case-shot__frame {
  display: block;
  background: var(--surface-raised);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 30px 60px -30px rgba(0,0,0,.5);
  transition: border-color var(--duration-base);
}
[data-theme="light"] .case-shot__frame { box-shadow: var(--shadow-md); }
.case-shot__frame:hover { border-color: var(--brand-border); }
.case-shot__frame img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.case-shot__caption {
  color: var(--text-tertiary);
  font-size: var(--text-sm);
  text-align: center;
  max-width: 60ch;
  margin-inline: auto;
}


/* — Case pull-quote (hard) — */
.case-quote { padding-block: clamp(3rem, 5vw + 1rem, 6rem); }
.pull-quote {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  margin: 0;
  padding: var(--space-8) var(--space-2);
  position: relative;
}
.pull-quote__mark {
  color: var(--brand-text);
  opacity: .3;
  flex-shrink: 0;
}
.pull-quote__text {
  margin: 0;
  font-size: clamp(1.25rem, 1vw + 1rem, 1.625rem);
  line-height: 1.4;
  color: var(--text-primary);
  font-weight: var(--weight-medium);
  letter-spacing: -.01em;
  text-wrap: balance;
}
.pull-quote__text p { margin: 0; }
.pull-quote__author {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border-subtle);
}
.pull-quote__avatar {
  width: 44px; height: 44px;
  display: inline-flex;
  align-items: center; justify-content: center;
  background: var(--brand-subtle);
  color: var(--brand-text);
  border: 1px solid var(--brand-border);
  border-radius: 50%;
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  flex-shrink: 0;
}
.pull-quote__meta { display: flex; flex-direction: column; gap: 2px; }
.pull-quote__meta strong { font-size: var(--text-base); color: var(--text-primary); }


/* === SERVICES HUB: cluster + service-card === */
.block-services-grid > .container > .services-cluster + .services-cluster {
  margin-top: clamp(3rem, 5vw + 1rem, 5rem);
}

.services-cluster {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.services-cluster__head {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-6);
  align-items: start;
  padding-bottom: var(--space-6);
  border-bottom: 1px solid var(--border-subtle);
}
.services-cluster__num {
  font-family: var(--font-mono);
  font-size: clamp(3rem, 4vw + 1rem, 4.5rem);
  font-weight: 800;
  letter-spacing: -.04em;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px var(--brand-border);
  font-variant-numeric: tabular-nums;
  margin-top: -0.1em;
}
.services-cluster__head-text { display: flex; flex-direction: column; gap: var(--space-2); max-width: 60ch; }
.services-cluster__title { margin: 0; }
.services-cluster__lead { margin: 0; color: var(--text-secondary); }

.services-grid-pro {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}
@media (min-width: 768px)  { .services-grid-pro { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1280px) { .services-grid-pro { grid-template-columns: repeat(3, 1fr); } }

.services-grid-pro--two { /* override: 2 cols max for clusters with 2 services */ }
@media (min-width: 768px) { .services-grid-pro--two { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1280px) { .services-grid-pro--two { grid-template-columns: repeat(2, 1fr); max-width: calc(66% + var(--space-6)); } }

.service-card { display: block; height: 100%; position: relative; }
.service-card::before, .service-card::after {
  content: "";
  position: absolute;
  width: 14px; height: 14px;
  pointer-events: none;
  z-index: 2;
  transition: border-color var(--duration-base);
}
.service-card::before {
  top: 8px; left: 8px;
  border-top: 1px solid var(--border-strong);
  border-left: 1px solid var(--border-strong);
}
.service-card::after {
  bottom: 8px; right: 8px;
  border-bottom: 1px solid var(--border-strong);
  border-right: 1px solid var(--border-strong);
}
.service-card:hover::before, .service-card:hover::after { border-color: var(--brand-text); }

.service-card__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-6) var(--space-6) var(--space-5);
  height: 100%;
  overflow: hidden;
}
.service-card__inner::after {
  content: "";
  position: absolute;
  inset: auto -30% -30% auto;
  width: 220px; height: 220px;
  background: radial-gradient(circle, var(--brand-subtle) 0%, transparent 60%);
  pointer-events: none;
  z-index: -1;
  opacity: .55;
  transition: opacity var(--duration-slow);
}
.service-card:hover .service-card__inner::after { opacity: 1; }

.service-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}
.service-card__icon {
  width: 44px; height: 44px;
  display: inline-flex;
  align-items: center; justify-content: center;
  background: var(--brand-subtle);
  border: 1px solid var(--brand-border);
  border-radius: var(--radius-md);
  color: var(--brand-text);
}
.service-card__price {
  font-family: var(--font-mono);
  font-size: var(--text-base);
  font-weight: 800;
  color: var(--brand-text);
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.service-card__price-range {
  color: var(--text-tertiary);
  font-weight: var(--weight-medium);
  margin-left: 1px;
}

.service-card__badge {
  display: inline-flex;
  align-self: flex-start;
  padding: 3px 10px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 800;
  color: var(--accent-text);
  background: rgba(245,158,11,.10);
  border: 1px solid rgba(245,158,11,.30);
  border-radius: 999px;
}
.service-card__badge--starter {
  color: var(--state-success-text);
  background: var(--state-success-bg);
  border-color: var(--state-success-border);
}

.service-card__title { margin: 0; }
.service-card__desc { margin: 0; color: var(--text-secondary); flex: 1; }

.service-card__features {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3) 0;
  border-top: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
}
.service-card__features li {
  position: relative;
  padding-left: var(--space-5);
  color: var(--text-secondary);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
}
.service-card__features li::before {
  content: "";
  position: absolute;
  left: 0; top: .55em;
  width: 10px; height: 1px;
  background: var(--brand-text);
}

.service-card__foot { display: flex; align-items: center; justify-content: flex-end; }
.service-card__more {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--brand-text);
  transition: transform var(--duration-base);
}
.service-card:hover .service-card__more { transform: translateX(2px); }

/* Featured / starter variants — extra tinted backgrounds */
.service-card__inner--featured {
  background:
    radial-gradient(60% 50% at 100% 0%, rgba(59,130,246,.10) 0%, transparent 70%),
    var(--surface-raised);
}
.service-card__inner--featured::after { opacity: .85; }

.service-card__inner--starter {
  background:
    radial-gradient(60% 50% at 0% 100%, rgba(16,185,129,.06) 0%, transparent 70%),
    var(--surface-raised);
}

/* Customer journey aside */
.services-journey {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-5);
  align-items: center;
  margin-top: clamp(3rem, 5vw + 1rem, 4rem);
  padding: var(--space-5) var(--space-6);
  background:
    radial-gradient(60% 100% at 100% 50%, var(--brand-subtle) 0%, transparent 60%),
    var(--surface-raised);
  border: 1px solid var(--brand-border);
  border-radius: var(--radius-lg);
}
@media (max-width: 639px) {
  .services-journey { grid-template-columns: 1fr; text-align: left; }
}
.services-journey__icon {
  width: 52px; height: 52px;
  display: inline-flex;
  align-items: center; justify-content: center;
  background: var(--brand-bg);
  color: var(--text-inverse);
  border-radius: var(--radius-md);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16);
}
.services-journey__body h3 { margin: 0 0 var(--space-1); }
.services-journey__body p { margin: 0; color: var(--text-secondary); }
.services-journey__body a {
  color: var(--brand-text);
  text-decoration: none;
  background-image: linear-gradient(0deg, currentColor, currentColor);
  background-size: 100% 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size var(--duration-base);
}
.services-journey__body a:hover { background-size: 100% 2px; }


/* === 404 / ERROR PAGE === */
.error-page {
  padding-block: clamp(3rem, 5vw + 1rem, 6rem);
  position: relative;
  isolation: isolate;
}
.error-page::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background:
    radial-gradient(60% 80% at 50% 0%, rgba(59,130,246,.10) 0%, transparent 60%),
    radial-gradient(40% 40% at 0% 100%, rgba(245,158,11,.05) 0%, transparent 60%);
}
.error-page::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background-image:
    linear-gradient(var(--border-subtle) 1px, transparent 1px),
    linear-gradient(90deg, var(--border-subtle) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, #000 0%, transparent 75%);
          mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, #000 0%, transparent 75%);
  opacity: .6;
}

.error-page__head {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  margin-bottom: var(--space-10);
}

.error-page__status {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  align-self: flex-start;
}
.error-page__status-code {
  font-family: var(--font-mono);
  font-size: clamp(2.5rem, 3vw + 1.5rem, 4rem);
  font-weight: 800;
  letter-spacing: -.04em;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--accent-500);
  font-variant-numeric: tabular-nums;
}
.error-page__status-line {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--state-danger-text);
  padding: 4px 10px;
  background: var(--state-danger-bg);
  border: 1px solid var(--state-danger-border);
  border-radius: 4px;
}

.error-page__title {
  margin: 0;
  font-size: clamp(2.25rem, 4vw + 1rem, 3.75rem);
  letter-spacing: -.035em;
  line-height: 1;
}
.error-page__lead {
  margin: 0;
  color: var(--text-secondary);
  font-size: var(--text-lg);
  max-width: 60ch;
}

/* Search bar — terminal style */
.error-page__search {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--surface-raised);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-10);
  transition: border-color var(--duration-base);
}
.error-page__search:focus-within {
  border-color: var(--brand-text);
  box-shadow: 0 0 0 3px var(--brand-subtle);
}
.error-page__search-label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--text-tertiary);
}
.error-page__search-key {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: lowercase;
  color: var(--brand-text);
}
.error-page__search-input {
  background: transparent;
  border: 0;
  outline: none;
  color: var(--text-primary);
  font: inherit;
  font-size: var(--text-base);
}
.error-page__search-input::placeholder { color: var(--text-tertiary); }

/* Two columns of links */
.error-page__cols {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  margin-bottom: var(--space-8);
}
@media (min-width: 768px) { .error-page__cols { grid-template-columns: 1fr 1fr; } }

.error-page__col {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.error-page__list {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.error-page__list li { border-top: 1px dashed var(--border-subtle); }
.error-page__list li:first-child { border-top: 0; }
.error-page__list a {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-3);
  margin-inline: calc(var(--space-3) * -1);
  border-radius: var(--radius-sm);
  text-decoration: none;
  color: var(--text-primary);
  transition: background var(--duration-base), color var(--duration-base);
}
.error-page__list a:hover { background: var(--surface-raised); color: var(--brand-text); }

.error-page__list-num {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: .08em;
  color: var(--text-tertiary);
  min-width: 24px;
  font-variant-numeric: tabular-nums;
}
.error-page__list-tag {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-tertiary);
}
.error-page__list a:hover .error-page__list-num,
.error-page__list a:hover .error-page__list-tag { color: var(--brand-text); }

/* Help callout */
.error-page__help {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-5) var(--space-6);
  background: var(--surface-raised);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-6);
}
@media (max-width: 639px) {
  .error-page__help { grid-template-columns: 1fr; text-align: left; }
  .error-page__help-cta { width: 100%; justify-content: center; }
}
.error-page__help-icon {
  width: 44px; height: 44px;
  display: inline-flex;
  align-items: center; justify-content: center;
  background: var(--brand-subtle);
  color: var(--brand-text);
  border: 1px solid var(--brand-border);
  border-radius: 50%;
}
.error-page__help-body h2 { margin: 0 0 var(--space-1); }
.error-page__help-body p { margin: 0; color: var(--text-secondary); }

/* Diagnostic tail */
.error-page__diag {
  margin: var(--space-6) 0 0;
  padding: var(--space-3) var(--space-4);
  background: var(--surface-overlay);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-tertiary);
  letter-spacing: .04em;
}
.error-page__diag-key { color: var(--brand-text); font-weight: var(--weight-bold); }
.error-page__diag-path { color: var(--text-secondary); }


/* === GUIDE & PLUGIN cards for archive hubs === */

/* Plugin card archive — denser than plugins-showcase */
.plugins-grid--archive {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}
@media (min-width: 640px)  { .plugins-grid--archive { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .plugins-grid--archive { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1280px) { .plugins-grid--archive { grid-template-columns: repeat(4, 1fr); } }

.plugin-card-archive { display: block; height: 100%; position: relative; }
.plugin-card-archive::before, .plugin-card-archive::after {
  content: "";
  position: absolute;
  width: 14px; height: 14px;
  pointer-events: none;
  z-index: 2;
  transition: border-color var(--duration-base);
}
.plugin-card-archive::before {
  top: 8px; left: 8px;
  border-top: 1px solid var(--border-strong);
  border-left: 1px solid var(--border-strong);
}
.plugin-card-archive::after {
  bottom: 8px; right: 8px;
  border-bottom: 1px solid var(--border-strong);
  border-right: 1px solid var(--border-strong);
}
.plugin-card-archive:hover::before, .plugin-card-archive:hover::after {
  border-color: var(--brand-text);
}

.plugin-card-archive__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  height: 100%;
  padding: var(--space-6);
}

.plugin-card-archive__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}
.plugin-card-archive__monogram {
  display: inline-flex;
  align-items: center; justify-content: center;
  width: 56px; height: 56px;
  background: linear-gradient(135deg, var(--brand-700) 0%, var(--brand-500) 100%);
  color: #fff;
  border-radius: var(--radius-md);
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: -.02em;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16);
}
.plugin-card-archive__monogram--alt {
  background: linear-gradient(135deg, #b91c1c 0%, #ef4444 100%);
}
.plugin-card-archive__monogram--green {
  background: linear-gradient(135deg, #047857 0%, #10b981 100%);
}
.plugin-card-archive__monogram--accent {
  background: linear-gradient(135deg, var(--accent-600) 0%, var(--accent-400) 100%);
}

.plugin-card-archive__badge {
  padding: 3px 10px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 700;
  border-radius: 999px;
  white-space: nowrap;
}
.plugin-card-archive__badge--free {
  background: var(--state-success-bg);
  color: var(--state-success-text);
  border: 1px solid var(--state-success-border);
}
.plugin-card-archive__badge--pro {
  background: var(--brand-subtle);
  color: var(--brand-text);
  border: 1px solid var(--brand-border);
}
.plugin-card-archive__badge--both {
  background: rgba(245,158,11,.10);
  color: var(--accent-text);
  border: 1px solid rgba(245,158,11,.30);
}

.plugin-card-archive__title { margin: 0; }
.plugin-card-archive__desc { margin: 0; color: var(--text-secondary); flex: 1; }
.plugin-card-archive__desc code {
  background: var(--surface-overlay);
  padding: 1px 6px;
  border: 1px solid var(--border-subtle);
  font-size: .9em;
  color: var(--text-primary);
}

.plugin-card-archive__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-2);
  padding-top: var(--space-3);
  border-top: 1px solid var(--border-subtle);
  margin: 0;
}
.plugin-card-archive__stats > div { display: flex; flex-direction: column; gap: 2px; }
.plugin-card-archive__stats dt {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin: 0;
}
.plugin-card-archive__stats dd {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}

.plugin-card-archive__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--border-subtle);
}
.plugin-card-archive__category {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-tertiary);
  letter-spacing: .04em;
}
.plugin-card-archive__more {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--brand-text);
  transition: transform var(--duration-base);
}
.plugin-card-archive__inner:hover .plugin-card-archive__more { transform: translateX(2px); }


/* Guide card — large editorial cards for pillar listing */
.guides-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}
@media (min-width: 768px)  { .guides-grid { grid-template-columns: repeat(2, 1fr); } }

.guide-card { display: block; height: 100%; position: relative; }
.guide-card::before, .guide-card::after {
  content: "";
  position: absolute;
  width: 14px; height: 14px;
  pointer-events: none;
  z-index: 2;
  transition: border-color var(--duration-base);
}
.guide-card::before {
  top: 8px; left: 8px;
  border-top: 1px solid var(--border-strong);
  border-left: 1px solid var(--border-strong);
}
.guide-card::after {
  bottom: 8px; right: 8px;
  border-bottom: 1px solid var(--border-strong);
  border-right: 1px solid var(--border-strong);
}
.guide-card:hover::before, .guide-card:hover::after { border-color: var(--brand-text); }

.guide-card__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  height: 100%;
  padding: var(--space-8);
  position: relative;
  overflow: hidden;
}
.guide-card__inner::after {
  content: "";
  position: absolute;
  inset: auto -30% -30% auto;
  width: 280px; height: 280px;
  background: radial-gradient(circle, var(--brand-subtle) 0%, transparent 60%);
  pointer-events: none;
  z-index: -1;
  opacity: .55;
  transition: opacity var(--duration-slow);
}
.guide-card:hover .guide-card__inner::after { opacity: .9; }

.guide-card__head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.guide-card__num {
  display: inline-flex;
  align-items: center; justify-content: center;
  width: 40px; height: 40px;
  background: var(--brand-subtle);
  color: var(--brand-text);
  border: 1px solid var(--brand-border);
  border-radius: var(--radius-md);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: 800;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.guide-card__cat {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  font-weight: var(--weight-medium);
}

.guide-card__title { margin: 0; }
.guide-card__desc { margin: 0; color: var(--text-secondary); flex: 1; }

.guide-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border-subtle);
  flex-wrap: wrap;
}
.guide-card__meta {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  letter-spacing: .04em;
}
.guide-card__meta strong {
  color: var(--text-primary);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.guide-card__more {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--brand-text);
  transition: transform var(--duration-base);
}
.guide-card:hover .guide-card__more { transform: translateX(2px); }


/* Archive note card (highlight extra CTA inside hub) */
.archive-note {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--space-5);
  margin-top: var(--space-10);
  padding: var(--space-5) var(--space-6);
  background: var(--brand-subtle);
  border: 1px solid var(--brand-border);
  border-radius: var(--radius-lg);
}
@media (max-width: 767px) {
  .archive-note { grid-template-columns: 1fr; text-align: left; }
  .archive-note__cta { width: 100%; justify-self: stretch; justify-content: center; }
}
.archive-note__icon {
  width: 44px; height: 44px;
  display: inline-flex;
  align-items: center; justify-content: center;
  background: var(--surface-base);
  border: 1px solid var(--brand-border);
  border-radius: var(--radius-md);
  color: var(--brand-text);
}
.archive-note__body h3 { margin: 0 0 var(--space-1); }
.archive-note__body p { margin: 0; color: var(--text-secondary); }


/* Archive hero — star inline indicator */
.archive-hero__star {
  color: var(--accent-500);
  font-size: .65em;
  margin-left: 4px;
  font-variant-numeric: normal;
}


/* === ARCHIVE / HUB pages (cases-archive, plugins-archive, etc.) === */

/* Archive hero — heading + stats */
.archive-hero {
  display: grid;
  gap: var(--space-12);
  grid-template-columns: 1fr;
  align-items: end;
}
@media (min-width: 1024px) {
  .archive-hero { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: var(--space-16); }
}
.archive-hero__intro { display: flex; flex-direction: column; gap: var(--space-4); max-width: 640px; }
.archive-hero__title { margin: 0; font-size: clamp(2.25rem, 4vw + 1.25rem, 4.25rem); }
.archive-hero__lead { margin: 0; color: var(--text-secondary); font-size: var(--text-lg); max-width: 56ch; }

.archive-hero__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--border-subtle);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.archive-hero__stats li {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-5);
  background: var(--surface-raised);
  text-align: center;
}
.archive-hero__big {
  font-size: clamp(2rem, 1.5rem + 1.5vw, 2.75rem);
  font-weight: 800;
  letter-spacing: -.04em;
  line-height: 1;
  color: var(--brand-text);
  font-variant-numeric: tabular-nums;
}
.archive-hero__lbl {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}


/* Archive toolbar — title + count */
.archive-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  padding-bottom: var(--space-6);
  margin-bottom: var(--space-8);
  border-bottom: 1px solid var(--border-subtle);
}
.archive-toolbar__title {
  margin: 0;
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-tight);
}
.archive-toolbar__count {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--text-tertiary);
  font-variant-numeric: tabular-nums;
}
.archive-toolbar__count strong { color: var(--text-primary); font-weight: var(--weight-bold); }


/* === Filters: engineering control bar === */
.archive-filters {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
  background: var(--surface-raised);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-10);
  overflow: hidden;
  position: relative;
  isolation: isolate;
}
.archive-filters::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background:
    radial-gradient(60% 100% at 0% 0%, var(--brand-subtle) 0%, transparent 60%),
    radial-gradient(40% 80% at 100% 100%, rgba(245,158,11,.06) 0%, transparent 60%);
  opacity: .8;
}
/* Tooling header — moved into ::after so it stays above background */
.archive-filters__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-5);
  border-bottom: 1px solid var(--border-subtle);
  background: linear-gradient(180deg, var(--surface-overlay) 0%, transparent 100%);
}
.archive-filters__head-title {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-secondary);
  font-weight: var(--weight-bold);
}
.archive-filters__head-title::before {
  content: "";
  width: 14px; height: 14px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2360a5fa' stroke-width='1.75'><path d='M3 6h18M6 12h12M10 18h4'/></svg>") no-repeat center / contain;
  flex-shrink: 0;
}
.archive-filters__reset {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 4px 10px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: var(--weight-bold);
  color: var(--text-tertiary);
  background: transparent;
  border: 1px solid var(--border-subtle);
  border-radius: 4px;
  cursor: pointer;
  text-decoration: none;
  transition: color var(--duration-base), border-color var(--duration-base), background var(--duration-base);
}
.archive-filters__reset:hover {
  color: var(--text-primary);
  border-color: var(--border-strong);
  background: var(--surface-overlay);
}
.archive-filters__reset svg { transition: transform var(--duration-base); }
.archive-filters__reset:hover svg { transform: rotate(-90deg); }

/* Groups stacked as rows with thin dividers */
.archive-filters__group {
  display: grid;
  grid-template-columns: 116px minmax(0, 1fr);
  align-items: center;
  gap: var(--space-5);
  padding: var(--space-3) var(--space-5);
  border-top: 1px solid var(--border-subtle);
  min-height: 56px;
}
.archive-filters__group:first-of-type { border-top: 0; }
@media (max-width: 639px) {
  .archive-filters__group {
    grid-template-columns: 1fr;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    align-items: flex-start;
  }
}

.archive-filters__label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  font-weight: var(--weight-medium);
  white-space: nowrap;
}
.archive-filters__label::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--brand-text);
  flex-shrink: 0;
  box-shadow: 0 0 0 3px var(--brand-subtle);
}

.filter-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.filter-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 8px 5px 11px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: var(--weight-medium);
  letter-spacing: -.005em;
  cursor: pointer;
  transition: background var(--duration-base), border-color var(--duration-base), color var(--duration-base);
  white-space: nowrap;
  font-family: var(--font-sans);
  line-height: 1.4;
}

.filter-pill__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  padding: 1px 6px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: var(--weight-bold);
  letter-spacing: .04em;
  color: var(--text-tertiary);
  background: var(--surface-overlay);
  border-radius: 4px;
  font-variant-numeric: tabular-nums;
  transition: background var(--duration-base), color var(--duration-base);
  height: 18px;
}

.filter-pill:hover {
  background: var(--surface-overlay);
  color: var(--text-primary);
}
.filter-pill:hover .filter-pill__count {
  background: var(--surface-base);
  color: var(--text-primary);
}

.filter-pill--active {
  background: var(--brand-subtle);
  border-color: var(--brand-border);
  color: var(--brand-text);
  box-shadow: inset 0 0 0 1px var(--brand-border);
}
.filter-pill--active:hover {
  background: var(--brand-subtle);
  color: var(--brand-text);
}
.filter-pill--active .filter-pill__count {
  background: var(--brand-bg);
  color: var(--text-inverse);
}
.filter-pill:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--surface-base), 0 0 0 4px var(--border-focus);
}

/* Footer of filter bar — count summary */
.archive-filters__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-5);
  border-top: 1px solid var(--border-subtle);
  background: linear-gradient(0deg, var(--surface-overlay) 0%, transparent 100%);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}
.archive-filters__foot-key { font-weight: var(--weight-bold); color: var(--text-secondary); }
.archive-filters__foot-value strong {
  color: var(--brand-text);
  font-variant-numeric: tabular-nums;
  font-weight: var(--weight-bold);
}


/* Cases grid for archive (denser than featured) */
.cases-grid--archive {
  grid-template-columns: 1fr;
}
@media (min-width: 640px)  { .cases-grid--archive { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .cases-grid--archive { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1280px) { .cases-grid--archive { grid-template-columns: repeat(4, 1fr); } }
.cases-grid--archive .case-card__body { padding: var(--space-5); gap: var(--space-2); }
.cases-grid--archive .case-card__big { font-size: clamp(1.5rem, 1rem + 1.5vw, 2.25rem); }
.cases-grid--archive .case-card__title { font-size: var(--text-lg); }


/* Pagination — load more pattern */
.archive-pagination {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  margin-top: var(--space-12);
}
.archive-pagination .btn { gap: var(--space-3); }
.archive-pagination__count {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  padding-left: var(--space-3);
  margin-left: var(--space-2);
  border-left: 1px solid var(--border-default);
  font-variant-numeric: tabular-nums;
}
.archive-pagination__progress {
  width: 100%;
  max-width: 320px;
  height: 2px;
  background: var(--border-subtle);
  border-radius: 2px;
  overflow: hidden;
}
.archive-pagination__bar {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--brand-bg), var(--accent-500));
  transition: width var(--duration-slow) var(--ease);
}


/* === BLOCK: contact-hero (variant of hero-page for /contact/) === */
.contact-hero {
  display: grid;
  gap: var(--space-12);
  grid-template-columns: 1fr;
  align-items: start;
}
@media (min-width: 1024px) {
  .contact-hero { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: var(--space-16); }
}
.contact-hero__intro { display: flex; flex-direction: column; gap: var(--space-5); max-width: 660px; }
.contact-hero__title { margin: 0; font-size: clamp(2.25rem, 4vw + 1.5rem, 4.5rem); }
.contact-hero__lead { margin: 0; color: var(--text-secondary); font-size: var(--text-lg); max-width: 60ch; }

.contact-channels {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.contact-channel {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-5) var(--space-6);
  background: var(--surface-raised);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  text-decoration: none;
  color: var(--text-primary);
  transition: border-color var(--duration-base), transform var(--duration-base), background var(--duration-base);
}
.contact-channel:hover {
  border-color: var(--brand-border);
  transform: translateY(-2px);
  color: var(--text-primary);
}
.contact-channel__head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--brand-text);
}
.contact-channel__name {
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  color: var(--text-primary);
  letter-spacing: -.01em;
}
.contact-channel__badge {
  margin-left: auto;
  padding: 2px 8px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--state-success-text);
  background: var(--state-success-bg);
  border: 1px solid var(--state-success-border);
  border-radius: 999px;
}
.contact-channel__handle {
  font-family: var(--font-mono);
  font-size: var(--text-base);
  color: var(--brand-text);
}
.contact-channel__hint {
  font-size: var(--text-sm);
  color: var(--text-tertiary);
  line-height: var(--leading-relaxed);
}


/* === BLOCK: contact-form (extended form with grouped sections) === */
.contact-form-extended {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}
.contact-form-extended__group {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-6);
  background: var(--surface-raised);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  position: relative;
}
.contact-form-extended__group-title {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--brand-text);
  font-weight: var(--weight-bold);
}
.contact-form-extended__row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}
@media (min-width: 560px) {
  .contact-form-extended__row { grid-template-columns: 1fr 1fr; }
}
.field__req {
  color: var(--state-danger-text);
  font-weight: var(--weight-bold);
  margin-left: 2px;
}
.field__hint {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  line-height: var(--leading-normal);
}

/* — Checkbox component — */
.checkbox {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  cursor: pointer;
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--text-secondary);
}
.checkbox input {
  position: absolute;
  opacity: 0;
  width: 1px; height: 1px;
}
.checkbox__box {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  border: 1.5px solid var(--border-strong);
  background: var(--surface-base);
  border-radius: 4px;
  position: relative;
  transition: border-color var(--duration-base), background var(--duration-base);
}
.checkbox input:checked + .checkbox__box {
  background: var(--brand-bg);
  border-color: var(--brand-bg);
}
.checkbox input:checked + .checkbox__box::after {
  content: "";
  position: absolute;
  left: 5px; top: 1px;
  width: 5px; height: 9px;
  border: solid #fff;
  border-width: 0 1.5px 1.5px 0;
  transform: rotate(45deg);
}
.checkbox input:focus-visible + .checkbox__box {
  outline: 2px solid var(--border-focus);
  outline-offset: 2px;
}
.contact-form-extended__consent {
  padding: var(--space-4) var(--space-6);
  background: var(--surface-overlay);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
}

.contact-form-extended__submit {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-4);
}
.contact-form-extended__alt { color: var(--text-tertiary); }

/* AJAX feedback (success / error states) */
.contact-form-extended__feedback,
.form-feedback {
  margin-top: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-radius: 8px;
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
  border: 1px solid transparent;
}
.contact-form-extended__feedback.is-success,
.form-feedback.is-success {
  background: var(--state-success-bg);
  color: var(--state-success-text);
  border-color: var(--state-success-border);
}
.contact-form-extended__feedback.is-error,
.form-feedback.is-error {
  background: var(--state-danger-bg);
  color: var(--state-danger-text);
  border-color: var(--state-danger-border);
}

/* Loading state on submit button (works with .btn) */
.btn.is-loading {
  position: relative;
  color: transparent !important;
  pointer-events: none;
}
.btn.is-loading::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1.1em;
  height: 1.1em;
  margin: -0.55em 0 0 -0.55em;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  color: var(--text-inverse);
  animation: tn-spin .7s linear infinite;
}
.btn--secondary.is-loading::after,
.btn--ghost.is-loading::after { color: var(--text-primary); }

@keyframes tn-spin {
  to { transform: rotate(360deg); }
}


/* === BLOCK: contact-process (timeline with timeframes) === */
.contact-process {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: 0;
  margin: 0;
  position: relative;
}
@media (min-width: 768px) {
  .contact-process {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-4);
  }
}
@media (min-width: 1024px) {
  .contact-process {
    grid-template-columns: repeat(4, 1fr);
  }
}

.contact-process__step {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-6);
  background: var(--surface-raised);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  position: relative;
  transition: border-color var(--duration-slow), transform var(--duration-slow);
}
.contact-process__step:hover {
  border-color: var(--brand-border);
  transform: translateY(-2px);
}

.contact-process__num {
  display: inline-flex;
  align-items: center; justify-content: center;
  width: 44px; height: 44px;
  font-family: var(--font-mono);
  font-size: var(--text-base);
  font-weight: 800;
  letter-spacing: -.02em;
  background: var(--brand-bg);
  color: var(--text-inverse);
  border: 1px solid var(--brand-bg);
  border-radius: var(--radius-md);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16);
  font-variant-numeric: tabular-nums;
}

.contact-process__time {
  display: inline-flex;
  align-self: flex-start;
  padding: 3px 10px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent-text);
  background: rgba(245,158,11,.10);
  border: 1px solid rgba(245,158,11,.25);
  border-radius: 999px;
  font-weight: var(--weight-bold);
}

.contact-process__body { display: flex; flex-direction: column; gap: var(--space-2); }
.contact-process__body h3 { margin: 0; }
.contact-process__body p { margin: 0; color: var(--text-secondary); line-height: var(--leading-relaxed); }


/* === BLOCK: hero-plugin === */
.block-hero-plugin {
  padding-block: clamp(2rem, 4vw + 1rem, 4.5rem) clamp(2rem, 4vw + 1rem, 5rem);
}
.block-hero-plugin__grid {
  display: grid;
  gap: var(--space-12);
  grid-template-columns: 1fr;
  align-items: start;
}
@media (min-width: 1024px) {
  .block-hero-plugin__grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: var(--space-16); }
}
.block-hero-plugin__content { display: flex; flex-direction: column; gap: var(--space-5); max-width: 640px; }
.block-hero-plugin__title { margin: 0; font-size: clamp(2.25rem, 4vw + 1.25rem, 4rem); }
.block-hero-plugin__tagline { color: var(--text-secondary); margin: 0; font-size: var(--text-lg); max-width: 56ch; }

.plugin-meta {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3);
  padding: 6px 14px 6px 6px;
  width: fit-content;
  background: var(--surface-raised);
  border: 1px solid var(--border-default);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-secondary);
}
.plugin-meta__monogram {
  display: inline-flex;
  align-items: center; justify-content: center;
  height: 28px;
  padding: 0 10px;
  background: linear-gradient(135deg, var(--brand-700) 0%, var(--brand-500) 100%);
  color: #fff;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: -.02em;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16);
}
.plugin-meta__badge {
  font-weight: 700;
  letter-spacing: .12em;
}
.plugin-meta__badge--both    { color: var(--accent-text); }
.plugin-meta__badge--free    { color: var(--state-success-text); }
.plugin-meta__badge--pro     { color: var(--brand-text); }
.plugin-meta__version {
  color: var(--text-tertiary);
  padding-left: var(--space-3);
  border-left: 1px solid var(--border-default);
}

.plugin-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
  padding-top: var(--space-5);
  border-top: 1px solid var(--border-subtle);
  margin-top: var(--space-2);
}
@media (min-width: 768px) { .plugin-stats { grid-template-columns: repeat(4, 1fr); } }
.plugin-stat { display: flex; flex-direction: column; gap: 2px; }
.plugin-stat__value {
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-tight);
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.plugin-stat__suffix { color: var(--accent-text); margin-left: 1px; }
.plugin-stat__label { font-size: var(--text-xs); color: var(--text-tertiary); letter-spacing: .04em; text-transform: uppercase; }
.plugin-stat__value--rating { display: inline-flex; align-items: center; gap: 6px; }
.plugin-stat__stars { color: var(--accent-500); font-size: 12px; letter-spacing: 1px; }

.block-hero-plugin__cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-1);
}
@media (max-width: 539px) {
  .block-hero-plugin__cta { flex-direction: column; align-items: stretch; }
  .block-hero-plugin__cta .btn { width: 100%; }
}
.block-hero-plugin__guarantee {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--text-tertiary);
  font-size: var(--text-sm);
}

/* aside admin-mock card */
.block-hero-plugin__visual { display: flex; justify-content: stretch; }
@media (min-width: 1024px) { .block-hero-plugin__visual { position: sticky; top: calc(var(--header-height) + var(--space-6)); } }

.hero-plugin-card {
  width: 100%;
  background: var(--surface-raised);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  transform: rotate(.6deg);
  transition: transform var(--duration-slow);
}
.hero-plugin-card:hover { transform: rotate(0); }

.hero-plugin-card__head {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--surface-overlay);
  border-bottom: 1px solid var(--border-subtle);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-tertiary);
}
.hero-plugin-card__head .hero-card__file { padding-left: 14px; margin-left: 4px; position: relative; }

.hero-plugin-card__body {
  display: flex;
  flex-direction: column;
  padding: var(--space-3) 0;
}
.hero-plugin-card__row {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-5);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  border-bottom: 1px dashed var(--border-subtle);
}
.hero-plugin-card__row:last-child { border-bottom: 0; }
.hero-plugin-card__field {
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: 11px;
  padding-top: 2px;
}
.hero-plugin-card__value { color: var(--text-primary); word-break: break-word; }
.hero-plugin-card__value--ok {
  color: var(--state-success-text);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.hero-plugin-card__foot {
  display: flex;
  gap: var(--space-1);
  padding: 0 var(--space-3);
  background: var(--surface-overlay);
  border-top: 1px solid var(--border-subtle);
}
.hero-plugin-card__tab {
  padding: var(--space-3) var(--space-4);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.hero-plugin-card__tab--active {
  color: var(--brand-text);
  border-bottom-color: var(--brand-text);
}


/* === BLOCK: plugin-screenshots === */
.screenshots-rail {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
}
@media (min-width: 900px) { .screenshots-rail { grid-template-columns: repeat(2, 1fr); } }

.screenshot {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin: 0;
  transition: transform var(--duration-slow);
}
.screenshot:hover { transform: translateY(-3px); }

.screenshot__frame {
  display: block;
  background: var(--surface-raised);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  overflow: hidden;
  position: relative;
  box-shadow: 0 30px 60px -30px rgba(0,0,0,.45);
  transition: border-color var(--duration-base), transform var(--duration-slow);
}
[data-theme="light"] .screenshot__frame { box-shadow: var(--shadow-md); }
.screenshot__frame:hover { border-color: var(--brand-border); }
.screenshot__frame:focus-visible {
  outline: none;
  border-color: var(--brand-text);
  box-shadow: 0 0 0 4px var(--brand-subtle);
}

/* Caption: number + text */
.screenshot__caption {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  color: var(--text-secondary);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
}
.screenshot__caption strong { color: var(--text-primary); font-weight: var(--weight-bold); }
.screenshot__num {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px; height: 28px;
  padding: 0;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--brand-text);
  background: var(--brand-subtle);
  border: 1px solid var(--brand-border);
  border-radius: 6px;
  font-variant-numeric: tabular-nums;
}


/* Screenshot frame holds a plain <img>. Editor in WP-admin uploads the real image. */
.screenshot__frame {
  display: block;
  cursor: zoom-in;
}
.screenshot__frame img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: var(--surface-overlay);
}


/* === BLOCK: rich-text === */
.block-rich-text > .container { padding-block: 0; }

.rich-text {
  color: var(--text-secondary);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  text-wrap: pretty;
}
.rich-text > * + * { margin-top: var(--space-4); }
.rich-text > h2 + *,
.rich-text > h3 + *,
.rich-text > h4 + * { margin-top: var(--space-3); }

.rich-text p { margin: 0; }

.rich-text__lead {
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  color: var(--text-primary);
}

.rich-text h2,
.rich-text h3,
.rich-text h4 {
  margin-top: var(--space-10);
  margin-bottom: var(--space-3);
  color: var(--text-primary);
}
.rich-text > :first-child { margin-top: 0 !important; }
.rich-text h2 { font-size: var(--text-2xl); }
.rich-text h3 {
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-tight);
}
.rich-text h4 {
  font-size: var(--text-lg);
  font-weight: var(--weight-medium);
}

.rich-text strong { color: var(--text-primary); font-weight: var(--weight-bold); }
.rich-text em { color: var(--text-primary); font-style: italic; }

.rich-text a {
  color: var(--brand-text);
  background-image: linear-gradient(0deg, currentColor, currentColor);
  background-size: 100% 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  text-decoration: none;
  transition: color var(--duration-base), background-size var(--duration-base);
}
.rich-text a:hover { color: var(--brand-text-hover); background-size: 100% 2px; }

.rich-text ul,
.rich-text ol {
  padding-left: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.rich-text ul { list-style: none; padding-left: 0; }
.rich-text ul > li {
  position: relative;
  padding-left: var(--space-6);
}
.rich-text ul > li::before {
  content: "";
  position: absolute;
  left: 0; top: .65em;
  width: 14px;
  height: 1px;
  background: var(--brand-text);
}
.rich-text ol { list-style: decimal; }
.rich-text ol::marker { color: var(--brand-text); }

.rich-text blockquote {
  margin: var(--space-8) 0;
  padding: var(--space-5) var(--space-6);
  border-left: 2px solid var(--brand-text);
  background: var(--brand-subtle);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  color: var(--text-primary);
  font-style: italic;
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
}
.rich-text blockquote p { margin: 0; }

.rich-text hr {
  margin: var(--space-10) 0;
  border: 0;
  border-top: 1px solid var(--border-subtle);
}

.rich-text figure { margin: var(--space-8) 0; }
.rich-text figure img {
  border-radius: var(--radius-md);
  border: 1px solid var(--border-subtle);
}
.rich-text figcaption {
  margin-top: var(--space-2);
  font-size: var(--text-sm);
  color: var(--text-tertiary);
  text-align: center;
}


/* === BLOCK: tech-stack === */
.tech-stack {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2);
}
.tech-stack a {
  display: inline-flex;
  align-items: center;
  padding: var(--space-2) var(--space-4);
  background: var(--surface-raised);
  border: 1px solid var(--border-subtle);
  border-radius: 999px;
  color: var(--text-secondary);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  text-decoration: none;
  font-family: var(--font-mono);
  transition: color var(--duration-base), border-color var(--duration-base), background var(--duration-base);
}
.tech-stack a:hover {
  color: var(--brand-text);
  border-color: var(--brand-border);
  background: var(--brand-subtle);
}


/* === BLOCK: about-preview === */
.block-about-preview__grid {
  display: grid;
  gap: var(--space-10);
  grid-template-columns: 1fr;
  align-items: center;
}
@media (min-width: 768px) {
  .block-about-preview__grid { grid-template-columns: 280px 1fr; gap: var(--space-12); }
}
.block-about-preview__media { display: flex; justify-content: center; }
.block-about-preview__body { display: flex; flex-direction: column; gap: var(--space-4); max-width: 60ch; }
.block-about-preview__body h2 { margin: 0; }
.block-about-preview__body p  { color: var(--text-secondary); margin: 0; }

.avatar {
  position: relative;
  width: 220px; height: 220px;
  display: inline-flex;
  align-items: center; justify-content: center;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--brand-700), var(--brand-500));
  box-shadow: 0 0 0 6px var(--surface-raised), 0 24px 48px rgba(59,130,246,.30);
}
.avatar__initial {
  font-size: 5rem;
  font-weight: var(--weight-bold);
  color: #fff;
  letter-spacing: -.04em;
}
.avatar__ring {
  position: absolute;
  inset: -24px;
  border-radius: 50%;
  border: 1px dashed var(--border-strong);
  animation: spin 36s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .avatar__ring { animation: none; } }

.about-marks {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin: var(--space-2) 0;
}
.about-marks a {
  display: inline-flex;
  align-items: center;
  padding: var(--space-1) var(--space-3);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--text-secondary);
  border: 1px solid var(--border-default);
  border-radius: 999px;
  text-decoration: none;
  transition: color var(--duration-base), border-color var(--duration-base);
}
.about-marks a:hover { color: var(--brand-text); border-color: var(--brand-border); }


/* === BLOCK: reviews === */
.reviews-grid {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: 1fr;
}
@media (min-width: 768px)  { .reviews-grid { grid-template-columns: repeat(2, 1fr); } }

.review {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  height: 100%;
  padding: var(--space-8);
}
.review__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}
.review__rating {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  color: var(--accent-500);
  font-size: var(--text-base);
  letter-spacing: 1px;
  line-height: 1;
}
.review__service { color: var(--text-tertiary); }

.review__quote { margin: 0; flex: 1; }
.review__quote p {
  margin: 0;
  color: var(--text-primary);
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  text-wrap: pretty;
}

.review__author {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding-top: var(--space-5);
  border-top: 1px solid var(--border-subtle);
}
.review__avatar {
  width: 44px; height: 44px;
  display: inline-flex;
  align-items: center; justify-content: center;
  background: var(--brand-subtle);
  color: var(--brand-text);
  border: 1px solid var(--brand-border);
  border-radius: 50%;
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  letter-spacing: .02em;
  flex-shrink: 0;
}
.review__meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.review__meta strong { font-size: var(--text-sm); color: var(--text-primary); }


/* === BLOCK: latest-posts === */
.posts-grid {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: 1fr;
}
@media (min-width: 768px)  { .posts-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .posts-grid { grid-template-columns: repeat(3, 1fr); } }

.post-card { display: block; height: 100%; }
.post-card__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  height: 100%;
}
.post-card__category {
  display: inline-block;
  align-self: flex-start;
  padding: 2px var(--space-2);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--accent-text);
  background: rgba(245,158,11,.10);
  border: 1px solid rgba(245,158,11,.25);
  border-radius: 999px;
  font-weight: var(--weight-bold);
}
.post-card__title { margin: 0; }
.post-card__excerpt { color: var(--text-secondary); margin: 0; }
.post-card__meta {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: auto;
  padding-top: var(--space-3);
  font-size: var(--text-sm);
  color: var(--text-tertiary);
  border-top: 1px solid var(--border-subtle);
}


/* === BLOCK: cta-banner === */
.cta-banner {
  position: relative;
  overflow: hidden;
  display: grid;
  gap: var(--space-10);
  grid-template-columns: 1fr;
  padding: clamp(2rem, 5vw + 1rem, 4.5rem);
  border-radius: var(--radius-xl);
  background:
    radial-gradient(70% 60% at 0% 0%, rgba(59,130,246,.22) 0%, transparent 60%),
    radial-gradient(70% 60% at 100% 100%, rgba(245,158,11,.10) 0%, transparent 60%),
    var(--surface-raised);
  border: 1px solid var(--border-default);
  isolation: isolate;
}
[data-theme="light"] .cta-banner {
  background:
    radial-gradient(70% 60% at 0% 0%, rgba(59,130,246,.10) 0%, transparent 60%),
    radial-gradient(70% 60% at 100% 100%, rgba(245,158,11,.05) 0%, transparent 60%),
    var(--surface-raised);
  border-color: var(--border-strong);
}
.cta-banner::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, var(--brand-border) 0%, transparent 50%, rgba(245,158,11,.25) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
  z-index: 0;
}
@media (min-width: 1024px) {
  .cta-banner {
    grid-template-columns: 1.05fr 1fr;
    gap: var(--space-12);
    align-items: center;
  }
}

.cta-banner__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  position: relative;
  z-index: 1;
}
.cta-banner__content h2 {
  margin: 0;
  font-size: var(--text-3xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}
.cta-banner__lead { color: var(--text-secondary); margin: 0; }
.cta-banner__perks {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-top: var(--space-4);
}
.cta-banner__perks li {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--text-secondary);
  font-size: var(--text-sm);
}
.cta-banner__check {
  display: inline-flex;
  width: 22px; height: 22px;
  align-items: center; justify-content: center;
  background: var(--state-success-bg);
  color: var(--state-success-text);
  border: 1px solid var(--state-success-border);
  border-radius: 50%;
  font-size: 12px;
  font-weight: var(--weight-bold);
  flex-shrink: 0;
}

.cta-form {
  position: relative;
  z-index: 1;
  display: grid;
  gap: var(--space-4);
  grid-template-columns: 1fr;
  background: var(--surface-base);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
}
[data-theme="light"] .cta-form { box-shadow: var(--shadow-md); }
@media (min-width: 560px) { .cta-form { grid-template-columns: 1fr 1fr; } }
.cta-form__submit {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-4);
  margin-top: var(--space-2);
}


/* === Breadcrumbs (component, used inside hero-service) === */
.breadcrumbs {
  font-size: var(--text-sm);
  color: var(--text-tertiary);
  margin-bottom: var(--space-6);
}
.breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin: 0; padding: 0;
}
.breadcrumbs a {
  color: var(--text-tertiary);
  text-decoration: none;
  transition: color var(--duration-base);
}
.breadcrumbs a:hover { color: var(--text-primary); }
.breadcrumbs__sep { color: var(--text-disabled); }
.breadcrumbs [aria-current="page"] { color: var(--text-secondary); }


/* === BLOCK: hero-service === */
.block-hero-service {
  padding-block: clamp(2rem, 4vw + 1rem, 4.5rem) clamp(2rem, 4vw + 1rem, 5rem);
}
.block-hero-service__grid {
  display: grid;
  gap: var(--space-12);
  grid-template-columns: 1fr;
  align-items: start;
}
@media (min-width: 1024px) {
  .block-hero-service__grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: var(--space-16); }
}
.block-hero-service__content { display: flex; flex-direction: column; gap: var(--space-5); max-width: 660px; }
.block-hero-service__group { color: var(--brand-text); }
.block-hero-service__title { margin: 0; }
.block-hero-service__subtitle { color: var(--text-secondary); margin: 0; max-width: 56ch; }

.tldr {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-5) var(--space-6);
  background: var(--brand-subtle);
  border: 1px solid var(--brand-border);
  border-radius: var(--radius-md);
}
.tldr__label {
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  font-weight: var(--weight-bold);
  color: var(--brand-text);
}
.tldr p { margin: 0; color: var(--text-primary); }
.tldr strong { color: var(--accent-text); font-weight: var(--weight-bold); }

.block-hero-service__cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-1);
}
@media (max-width: 539px) {
  .block-hero-service__cta { flex-direction: column; align-items: stretch; }
  .block-hero-service__cta .btn { width: 100%; }
}

.hero-service__quick {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4) var(--space-6);
  padding-top: var(--space-5);
  border-top: 1px solid var(--border-subtle);
  margin-top: var(--space-2);
  font-size: var(--text-sm);
  color: var(--text-secondary);
}
.hero-service__quick-key {
  display: inline-block;
  margin-right: var(--space-2);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-tertiary);
}

/* aside card with supported integrations */
.block-hero-service__aside { display: flex; justify-content: stretch; }
@media (min-width: 1024px) { .block-hero-service__aside { position: sticky; top: calc(var(--header-height) + var(--space-6)); } }

.hero-service-card {
  width: 100%;
  background: var(--surface-raised);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.hero-service-card__head { display: flex; align-items: center; justify-content: space-between; }
.hero-service-card__label {
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-tertiary);
  font-weight: var(--weight-medium);
}
.hero-service-card__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.hero-service-card__list li {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: var(--space-3);
  padding-block: var(--space-2);
  border-bottom: 1px solid var(--border-subtle);
}
.hero-service-card__list li:last-child { border-bottom: 0; }
.hero-service-card__list .text-meta { line-height: 1.4; }
.hero-service-card__foot { display: flex; justify-content: flex-end; }

.logo-pill {
  display: inline-flex;
  align-items: center;
  padding: var(--space-1) var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  border-radius: 999px;
  border: 1px solid var(--border-default);
  background: var(--surface-overlay);
  color: var(--text-primary);
  white-space: nowrap;
}
.logo-pill[data-brand="bitrix"]  { color: #2fc6f6; border-color: rgba(47,198,246,.30); background: rgba(47,198,246,.10); }
.logo-pill[data-brand="amo"]     { color: #4caf50; border-color: rgba(76,175,80,.30);  background: rgba(76,175,80,.10); }
.logo-pill[data-brand="roistat"] { color: #ff5a5f; border-color: rgba(255,90,95,.30);  background: rgba(255,90,95,.10); }
.logo-pill[data-brand="custom"]  { color: var(--accent-text); border-color: rgba(245,158,11,.30); background: rgba(245,158,11,.10); }


/* === BLOCK: service-includes === */
.includes-grid {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: 1fr;
}
@media (min-width: 640px)  { .includes-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .includes-grid { grid-template-columns: repeat(3, 1fr); } }

.include-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-6);
  background: var(--surface-raised);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  transition: border-color var(--duration-slow), transform var(--duration-slow);
}
.include-card:hover { border-color: var(--border-strong); transform: translateY(-2px); }
.include-card__icon {
  width: 44px; height: 44px;
  display: inline-flex;
  align-items: center; justify-content: center;
  background: var(--brand-subtle);
  border: 1px solid var(--brand-border);
  border-radius: var(--radius-md);
  color: var(--brand-text);
  margin-bottom: var(--space-1);
}
.include-card__title { margin: 0; }
.include-card__desc  { color: var(--text-secondary); margin: 0; }


/* === BLOCK: service-fit === */
.fit-grid {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: 1fr;
}
@media (min-width: 768px) { .fit-grid { grid-template-columns: repeat(2, 1fr); } }

.fit-card {
  padding: var(--space-8);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-subtle);
  background: var(--surface-raised);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.fit-card__head { display: flex; align-items: center; gap: var(--space-3); }
.fit-card__head h3 { margin: 0; }
.fit-card__icon {
  width: 36px; height: 36px;
  display: inline-flex;
  align-items: center; justify-content: center;
  border-radius: 50%;
  font-size: var(--text-base);
  font-weight: var(--weight-bold);
  flex-shrink: 0;
}
.fit-card--good { border-color: var(--state-success-border); }
.fit-card--good .fit-card__icon {
  background: var(--state-success-bg);
  color: var(--state-success-text);
  border: 1px solid var(--state-success-border);
}
.fit-card--bad { border-color: var(--state-danger-border); }
.fit-card--bad .fit-card__icon {
  background: var(--state-danger-bg);
  color: var(--state-danger-text);
  border: 1px solid var(--state-danger-border);
}
.fit-card ul {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.fit-card li {
  position: relative;
  padding-left: var(--space-5);
  color: var(--text-secondary);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
}
.fit-card li::before {
  content: "";
  position: absolute;
  left: 0; top: .65em;
  width: 8px; height: 1px;
  background: var(--text-disabled);
}


/* === BLOCK: process-steps === */
.process-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: 0;
  margin: 0;
  counter-reset: step;
}
.process-step {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: var(--space-5);
  padding: var(--space-6);
  background: var(--surface-raised);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  transition: border-color var(--duration-slow), transform var(--duration-slow);
}
.process-step:hover { border-color: var(--brand-border); }
.process-step__num {
  display: inline-flex;
  align-items: center; justify-content: center;
  min-width: 56px;
  height: 56px;
  padding: 0 var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-tight);
  background: var(--brand-subtle);
  color: var(--brand-text);
  border: 1px solid var(--brand-border);
  border-radius: var(--radius-md);
}
.process-step__body { display: flex; flex-direction: column; gap: var(--space-1); }
.process-step__body h3 { margin: 0; }
.process-step__body p  { margin: 0; color: var(--text-secondary); }


/* === BLOCK: pricing-table === */
.pricing-grid {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: 1fr;
  align-items: stretch;
}
@media (min-width: 768px)  { .pricing-grid { grid-template-columns: repeat(3, 1fr); } }

.pricing-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  padding: var(--space-8);
  background: var(--surface-raised);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  transition: border-color var(--duration-slow), transform var(--duration-slow);
}
.pricing-card:hover { border-color: var(--border-strong); }

.pricing-card__head { display: flex; flex-direction: column; gap: var(--space-2); }
.pricing-card__name {
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-tertiary);
  font-weight: var(--weight-medium);
}
.pricing-card__price { display: flex; align-items: baseline; gap: var(--space-3); flex-wrap: wrap; }
.pricing-card__amount {
  font-size: var(--text-3xl);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-tight);
  line-height: 1;
  color: var(--text-primary);
}
.pricing-card__period { font-size: var(--text-sm); color: var(--text-tertiary); }
.pricing-card__desc { color: var(--text-secondary); margin: 0; }

.pricing-card__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding-block: var(--space-4);
  border-top: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
  flex: 1;
}
.pricing-card__list li {
  position: relative;
  padding-left: var(--space-6);
  color: var(--text-secondary);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
}
.pricing-card__list li::before {
  content: "";
  position: absolute;
  left: 0; top: .25em;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--state-success-bg);
  border: 1px solid var(--state-success-border);
}
.pricing-card__list li::after {
  content: "";
  position: absolute;
  left: 5px; top: .65em;
  width: 4px; height: 7px;
  border: solid var(--state-success-text);
  border-width: 0 1.5px 1.5px 0;
  transform: rotate(45deg);
}
.pricing-card__list-muted { color: var(--text-disabled) !important; text-decoration: line-through; }
.pricing-card__list-muted::before { background: transparent; border-color: var(--text-disabled); }
.pricing-card__list-muted::after { display: none; }

.pricing-card__cta { width: 100%; }

.pricing-card--featured {
  border-color: var(--brand-border);
  background:
    radial-gradient(70% 50% at 50% 0%, rgba(59,130,246,.10) 0%, transparent 60%),
    var(--surface-raised);
  transform: translateY(-4px);
}
.pricing-card--featured .pricing-card__amount { color: var(--brand-text); }
.pricing-card__badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  padding: var(--space-1) var(--space-3);
  background: var(--brand-bg);
  color: var(--text-inverse);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  font-weight: var(--weight-bold);
  border-radius: 999px;
  white-space: nowrap;
}

.pricing-note {
  display: block;
  text-align: center;
  margin-top: var(--space-8);
}


/* === BLOCK: faq === */
.faq-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.faq-item {
  background: var(--surface-raised);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  transition: border-color var(--duration-base);
}
.faq-item[open] { border-color: var(--brand-border); }

.faq-item__q {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-5) var(--space-6);
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  color: var(--text-primary);
  cursor: pointer;
  user-select: none;
}
.faq-item__q::-webkit-details-marker { display: none; }
.faq-item__q:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: -2px;
  border-radius: inherit;
}
.faq-item__q > span:first-child { flex: 1; }

.faq-item__icon {
  position: relative;
  width: 18px; height: 18px;
  flex-shrink: 0;
}
.faq-item__icon::before,
.faq-item__icon::after {
  content: "";
  position: absolute;
  background: var(--text-tertiary);
  transition: transform var(--duration-base), background var(--duration-base);
}
.faq-item__icon::before { left: 0; right: 0; top: 50%; height: 1.5px; transform: translateY(-50%); }
.faq-item__icon::after  { top: 0; bottom: 0; left: 50%; width: 1.5px; transform: translateX(-50%); }
.faq-item[open] .faq-item__icon::before { background: var(--brand-text); }
.faq-item[open] .faq-item__icon::after  { transform: translateX(-50%) scaleY(0); }

.faq-item__a {
  padding: 0 var(--space-6) var(--space-5);
  color: var(--text-secondary);
}
.faq-item__a p { margin: 0; line-height: var(--leading-relaxed); }


/* === BLOCK: cta-cross-sell === */
.cross-sell-grid {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: 1fr;
}
@media (min-width: 768px)  { .cross-sell-grid { grid-template-columns: repeat(3, 1fr); } }

.cross-sell-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-6) var(--space-6) var(--space-12);
  background: var(--surface-raised);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  text-decoration: none;
  color: var(--text-primary);
  transition: border-color var(--duration-slow), transform var(--duration-slow), background var(--duration-slow);
}
.cross-sell-card:hover {
  border-color: var(--brand-border);
  transform: translateY(-2px);
  color: var(--text-primary);
}
.cross-sell-card__num {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-wide);
  color: var(--text-tertiary);
}
.cross-sell-card h3 { margin: 0; }
.cross-sell-card p  { margin: 0; color: var(--text-secondary); }
.cross-sell-card__arrow {
  position: absolute;
  bottom: var(--space-5);
  right: var(--space-6);
  width: 40px; height: 40px;
  display: inline-flex;
  align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--surface-overlay);
  color: var(--text-secondary);
  font-size: var(--text-lg);
  transition: background var(--duration-base), color var(--duration-base), transform var(--duration-base);
}
.cross-sell-card:hover .cross-sell-card__arrow {
  background: var(--brand-bg);
  color: var(--text-inverse);
  transform: translateX(4px);
}


/* === cta-banner: compact variant (no form) === */
.cta-banner--compact {
  grid-template-columns: 1fr;
}
@media (min-width: 1024px) {
  .cta-banner--compact {
    grid-template-columns: 1.25fr 1fr;
    align-items: center;
  }
}
.cta-banner__actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  align-items: stretch;
  position: relative;
  z-index: 1;
}
.cta-banner__actions .btn { justify-content: center; }
.cta-banner__alt {
  text-align: center;
  margin-top: var(--space-2);
}


/* ============================================================
   8. PAGE-SPECIFIC
   ============================================================ */
.page-service main > section + section { border-top: 1px solid var(--border-subtle); }


/* ============================================================
   9. POLISH — annotated-engineering details
   Aesthetic: refined-technical (Linear × Stripe × Vercel).
   Layered surgically on top of base components — never
   redefines core selectors, only enhances.
   ============================================================ */

/* — Section caption with leading "annotation" line — */
.section-head .text-caption {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
}
.section-head .text-caption::before {
  content: "";
  width: 28px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--brand-text));
  flex-shrink: 0;
}
.section-head--center .text-caption { justify-content: center; }
.section-head--center .text-caption::after {
  content: "";
  width: 28px;
  height: 1px;
  background: linear-gradient(270deg, transparent, var(--brand-text));
  flex-shrink: 0;
}

/* — Tabular numbers everywhere digits dominate — */
.metrics__value,
.case-card__big,
.plugin-card__stats dd,
.pricing-card__amount,
.pricing-card__period,
.process-step__num,
.services-group__num,
.cross-sell-card__num,
.case-card__unit,
.hero-card__file,
.review__rating,
time {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}

/* — Hero blueprint grid (subtle, masked-fade) — */
.block-hero-home::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--border-subtle) 1px, transparent 1px),
    linear-gradient(90deg, var(--border-subtle) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 30% 35%, #000 0%, transparent 75%);
          mask-image: radial-gradient(ellipse 70% 60% at 30% 35%, #000 0%, transparent 75%);
  pointer-events: none;
  z-index: -1;
  opacity: .85;
}

/* — Buttons — inner highlight + crisp focus glow — */
.btn--primary {
  background-image: linear-gradient(180deg, rgba(255,255,255,.08), transparent 55%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16);
}
.btn:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 2px var(--surface-base),
    0 0 0 4px var(--border-focus);
}

/* — Arrow / chevron micro-shift on hover — */
.btn svg,
.case-card__more,
.section-foot .btn svg {
  transition: transform var(--duration-base) var(--ease-out);
}
.btn:hover svg { transform: translateX(2px); }
.case-card__inner:hover .case-card__more { transform: translateX(2px); }

/* — Hero code-card file label with terminal indicator — */
.hero-card__file {
  position: relative;
  padding-left: 14px;
  margin-left: 4px;
}
.hero-card__file::before {
  content: "";
  position: absolute;
  left: 0; top: 50%;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent-500);
  transform: translateY(-50%);
}

/* — Hero metrics: subtle vertical separator on >=640px — */
@media (min-width: 640px) {
  .metrics { gap: var(--space-2); }
  .metrics__item + .metrics__item {
    position: relative;
    padding-left: var(--space-5);
  }
  .metrics__item + .metrics__item::before {
    content: "";
    position: absolute;
    left: 0; top: 50%;
    height: 32px;
    width: 1px;
    background: var(--border-subtle);
    transform: translateY(-50%);
  }
}

/* — Process steps: dotted vertical connector between numbered cells — */
.process-list { position: relative; }
@media (min-width: 640px) {
  .process-list::before {
    content: "";
    position: absolute;
    top: 60px;
    bottom: 60px;
    left: 52px;
    width: 1px;
    background-image: linear-gradient(to bottom, var(--border-strong) 50%, transparent 0);
    background-size: 1px 8px;
    pointer-events: none;
    opacity: .55;
    z-index: 0;
  }
}
.process-step { position: relative; z-index: 1; }
.process-step__num { position: relative; z-index: 1; }

/* — Pricing featured: top accent rail + refined badge — */
.pricing-card--featured { overflow: hidden; }
.pricing-card--featured::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: linear-gradient(90deg, transparent 5%, var(--brand-bg) 30%, var(--accent-500) 70%, transparent 95%);
  z-index: 1;
}
.pricing-card__badge {
  top: 14px;
  font-size: 10px;
  letter-spacing: .14em;
  padding: 4px 10px;
}

/* — Service-fit lists: real check / minus markers (replaces tiny dash) — */
.fit-card li {
  padding-left: 28px;
}
.fit-card li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .25em;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: transparent;
}
.fit-card--good li::before {
  background: var(--state-success-bg);
  border: 1px solid var(--state-success-border);
}
.fit-card--good li::after {
  content: "";
  position: absolute;
  left: 6px;
  top: .65em;
  width: 4px;
  height: 7px;
  border: solid var(--state-success-text);
  border-width: 0 1.5px 1.5px 0;
  transform: rotate(45deg);
}
.fit-card--bad li::before {
  background: var(--state-danger-bg);
  border: 1px solid var(--state-danger-border);
}
.fit-card--bad li::after {
  content: "";
  position: absolute;
  left: 5px;
  top: calc(.25em + 8px);
  width: 8px;
  height: 1.5px;
  background: var(--state-danger-text);
}

/* — Cross-sell: arrow morphs colour on hover (already), add glow — */
.cross-sell-card:hover .cross-sell-card__arrow {
  box-shadow: 0 0 0 4px var(--brand-subtle);
}

/* — Inline links inside long-form text get refined underline — */
.cta-banner__lead a,
.section-head__lead a,
.tldr p a,
.review__quote a {
  background-image: linear-gradient(0deg, currentColor, currentColor);
  background-size: 100% 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  text-decoration: none;
  transition: background-size var(--duration-base);
}
.cta-banner__lead a:hover,
.section-head__lead a:hover,
.tldr p a:hover {
  background-size: 100% 2px;
}

/* — Mega menu list items: subtle leading bracket on hover — */
.mega__list a { position: relative; }
.mega__list a::before {
  content: "→ ";
  color: var(--text-disabled);
  opacity: 0;
  margin-right: 0;
  transition: opacity var(--duration-base), margin-right var(--duration-base);
}
.mega__list a:hover::before { opacity: 1; margin-right: 4px; }

/* — Footer column titles get the same annotation tick — */
.site-footer__col h3.site-footer__title {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}
.site-footer__col h3.site-footer__title::before {
  content: "";
  width: 16px;
  height: 1px;
  background: var(--brand-text);
  opacity: .55;
  flex-shrink: 0;
}

/* — Light-theme tweaks: lift surfaces with shadow (allowed in light) — */
[data-theme="light"] .card,
[data-theme="light"] .services-group,
[data-theme="light"] .include-card,
[data-theme="light"] .pricing-card,
[data-theme="light"] .fit-card,
[data-theme="light"] .review,
[data-theme="light"] .process-step,
[data-theme="light"] .cross-sell-card {
  box-shadow: var(--shadow-sm);
}


/* ============================================================
   9.B ATMOSPHERE — per-section depth, mesh gradients, grain
   ============================================================ */

/* Global film-grain — extremely subtle SVG noise overlay across the whole page.
   Stays under floating UI but above content backgrounds. */
html::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 999;
  opacity: .035;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .55 0'/></filter><rect width='220' height='220' filter='url(%23n)'/></svg>");
}
[data-theme="light"] html::after { mix-blend-mode: multiply; opacity: .025; }

/* — Reusable per-section atmosphere primitives — */
.block-services-preview,
.block-cases-featured,
.block-plugins-showcase,
.block-tech-stack,
.block-about-preview,
.block-reviews,
.block-latest-posts,
.block-service-includes,
.block-service-fit,
.block-process-steps,
.block-pricing-table,
.block-faq,
.block-cta-cross-sell,
.block-rich-text,
.block-plugin-features,
.block-plugin-screenshots,
.block-hero-service,
.block-hero-plugin,
.block-hero-page,
.case-hero,
.case-result,
.case-narrative,
.case-screenshot,
.case-quote,
.guide-hero,
.guide-body,
.guide-author,
.guide-related,
.block-about-story,
.block-social-links,
.block-metrics-strip,
.block-cases-archive,
.block-plugins-archive,
.block-posts-archive,
.block-guides-grid,
.block-services-grid,
.block-contact-form,
.block-contact-process {
  position: relative;
  isolation: isolate;
}

/* Archive hub sections atmosphere */
.block-cases-archive::before,
.block-plugins-archive::before,
.block-posts-archive::before,
.block-guides-grid::before,
.block-services-grid::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background:
    radial-gradient(40% 50% at 0% 0%, rgba(59,130,246,.06) 0%, transparent 60%),
    radial-gradient(40% 50% at 100% 100%, rgba(245,158,11,.04) 0%, transparent 60%);
}

/* Contact form / process slabs */
.block-contact-form { background: var(--surface-raised); }
.block-contact-form::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background: radial-gradient(40% 60% at 50% 0%, rgba(59,130,246,.05) 0%, transparent 60%);
}
[data-theme="light"] .block-contact-form { background: var(--surface-base); border-block: 1px solid var(--border-subtle); }

.block-contact-process::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background: radial-gradient(60% 50% at 50% 100%, rgba(59,130,246,.06) 0%, transparent 70%);
}

/* — services-preview: blue mesh top-left + amber bottom-right — */
.block-services-preview::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background:
    radial-gradient(60% 70% at 0% 0%, rgba(59,130,246,.10) 0%, transparent 60%),
    radial-gradient(50% 60% at 100% 100%, rgba(245,158,11,.06) 0%, transparent 60%);
}

/* — cases-featured: subtle diagonal stripe pattern + bottom glow — */
.block-cases-featured::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background:
    repeating-linear-gradient(135deg, transparent 0, transparent 96px, rgba(255,255,255,.018) 96px, rgba(255,255,255,.018) 97px),
    radial-gradient(80% 50% at 50% 100%, rgba(59,130,246,.08) 0%, transparent 70%);
}
[data-theme="light"] .block-cases-featured::before {
  background:
    repeating-linear-gradient(135deg, transparent 0, transparent 96px, rgba(15,23,42,.025) 96px, rgba(15,23,42,.025) 97px),
    radial-gradient(80% 50% at 50% 100%, rgba(59,130,246,.06) 0%, transparent 70%);
}

/* — plugins-showcase: dot grid masked from center — */
.block-plugins-showcase::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background-image: radial-gradient(circle at 1px 1px, var(--border-default) 1px, transparent 1px);
  background-size: 28px 28px;
  -webkit-mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, #000 30%, transparent 80%);
          mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, #000 30%, transparent 80%);
  opacity: .7;
}

/* — tech-stack: central spotlight glow — */
.block-tech-stack {
  background:
    radial-gradient(60% 80% at 50% 50%, var(--brand-subtle) 0%, transparent 70%);
}

/* — about-preview: diagonal split with brand mesh — */
.block-about-preview::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background:
    linear-gradient(120deg, var(--brand-subtle) 0%, transparent 45%, transparent 100%),
    radial-gradient(50% 60% at 100% 50%, rgba(245,158,11,.05) 0%, transparent 60%);
}

/* — reviews: tonal slab (surface-raised) + amber corner — */
.block-reviews {
  background:
    radial-gradient(40% 60% at 100% 0%, rgba(245,158,11,.06) 0%, transparent 60%),
    radial-gradient(40% 60% at 0% 100%, rgba(59,130,246,.05) 0%, transparent 60%),
    var(--surface-raised);
}

/* — latest-posts: minimal top accent — */
.block-latest-posts::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background: radial-gradient(70% 40% at 50% 0%, rgba(59,130,246,.06) 0%, transparent 70%);
}


/* === Inner pages: hero atmospheres === */

/* hero-service: mesh + faint blueprint grid */
.block-hero-service::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background:
    radial-gradient(70% 60% at 80% 0%, rgba(59,130,246,.10) 0%, transparent 60%),
    radial-gradient(50% 50% at 20% 100%, rgba(245,158,11,.05) 0%, transparent 60%);
}
.block-hero-service::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background-image:
    linear-gradient(var(--border-subtle) 1px, transparent 1px),
    linear-gradient(90deg, var(--border-subtle) 1px, transparent 1px);
  background-size: 80px 80px;
  -webkit-mask-image: radial-gradient(ellipse 60% 70% at 75% 30%, #000 0%, transparent 70%);
          mask-image: radial-gradient(ellipse 60% 70% at 75% 30%, #000 0%, transparent 70%);
  opacity: .55;
}

/* hero-plugin: brand mesh from corners */
.block-hero-plugin::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background:
    radial-gradient(60% 70% at 100% 0%, rgba(59,130,246,.12) 0%, transparent 60%),
    radial-gradient(60% 50% at 0% 100%, rgba(245,158,11,.05) 0%, transparent 60%);
}

/* hero-page (about): warm brand mesh */
.block-hero-page::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background:
    radial-gradient(60% 70% at 70% 0%, rgba(59,130,246,.10) 0%, transparent 60%),
    radial-gradient(40% 50% at 0% 100%, rgba(245,158,11,.05) 0%, transparent 60%);
}

/* case-hero: bold brand mesh */
.case-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background:
    radial-gradient(60% 60% at 0% 0%, rgba(59,130,246,.14) 0%, transparent 55%),
    radial-gradient(50% 50% at 100% 100%, rgba(245,158,11,.08) 0%, transparent 55%);
}

/* guide-hero: editorial paper-tint */
.guide-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background:
    radial-gradient(80% 50% at 50% 0%, rgba(59,130,246,.08) 0%, transparent 60%),
    radial-gradient(40% 40% at 100% 50%, rgba(245,158,11,.04) 0%, transparent 60%);
}


/* === Inner-page section tints === */

/* service-includes: subtle brand corner */
.block-service-includes::before {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none; z-index: -1;
  background: radial-gradient(60% 50% at 100% 0%, rgba(59,130,246,.06) 0%, transparent 60%);
}

/* service-fit: split semantic tints (good vs bad) */
.block-service-fit::before {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none; z-index: -1;
  background:
    radial-gradient(40% 60% at 25% 50%, rgba(16,185,129,.04) 0%, transparent 60%),
    radial-gradient(40% 60% at 75% 50%, rgba(239,68,68,.03) 0%, transparent 60%);
}

/* process-steps: warm progress glow */
.block-process-steps::before {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none; z-index: -1;
  background:
    linear-gradient(180deg, rgba(59,130,246,.04) 0%, transparent 30%, transparent 100%),
    radial-gradient(50% 40% at 50% 100%, rgba(245,158,11,.04) 0%, transparent 70%);
}

/* pricing-table: spotlight on featured card area */
.block-pricing-table::before {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none; z-index: -1;
  background:
    radial-gradient(40% 60% at 50% 50%, rgba(59,130,246,.08) 0%, transparent 60%);
}

/* faq: tonal slab to read-easily */
.block-faq {
  background: var(--surface-raised);
}
.block-faq::before {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none; z-index: -1;
  background: radial-gradient(40% 60% at 0% 50%, rgba(59,130,246,.04) 0%, transparent 60%);
}
[data-theme="light"] .block-faq { background: var(--surface-base); border-block: 1px solid var(--border-subtle); }

/* cta-cross-sell: brand glow under cards */
.block-cta-cross-sell::before {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none; z-index: -1;
  background: radial-gradient(60% 80% at 50% 100%, rgba(59,130,246,.08) 0%, transparent 70%);
}

/* rich-text: keep neutral but with tiny accent */
.block-rich-text::before {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none; z-index: -1;
  background: radial-gradient(30% 40% at 0% 0%, rgba(59,130,246,.04) 0%, transparent 60%);
}

/* plugin-features: brand mesh */
.block-plugin-features::before {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none; z-index: -1;
  background:
    radial-gradient(50% 60% at 0% 50%, rgba(59,130,246,.06) 0%, transparent 60%),
    radial-gradient(50% 60% at 100% 50%, rgba(245,158,11,.04) 0%, transparent 60%);
}

/* plugin-screenshots: tonal slab */
.block-plugin-screenshots {
  background: var(--surface-raised);
}
.block-plugin-screenshots::before {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none; z-index: -1;
  background: radial-gradient(50% 50% at 50% 50%, rgba(59,130,246,.05) 0%, transparent 70%);
}
[data-theme="light"] .block-plugin-screenshots { background: var(--surface-base); border-block: 1px solid var(--border-subtle); }


/* — Case-page sections — */
.case-narrative::before,
.guide-body::before {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none; z-index: -1;
  background: radial-gradient(60% 30% at 50% 0%, rgba(59,130,246,.04) 0%, transparent 60%);
}

.case-screenshot::before {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none; z-index: -1;
  background:
    radial-gradient(60% 50% at 50% 50%, rgba(59,130,246,.06) 0%, transparent 70%);
}

.case-quote {
  background: var(--surface-raised);
}
.case-quote::before {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none; z-index: -1;
  background:
    radial-gradient(40% 60% at 0% 0%, rgba(245,158,11,.06) 0%, transparent 60%),
    radial-gradient(40% 60% at 100% 100%, rgba(59,130,246,.05) 0%, transparent 60%);
}
[data-theme="light"] .case-quote { background: var(--surface-base); border-block: 1px solid var(--border-subtle); }

.case-result::before {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none; z-index: -1;
  background: radial-gradient(70% 80% at 50% 50%, rgba(59,130,246,.06) 0%, transparent 70%);
}

/* guide-author: tonal slab */
.guide-author {
  background: var(--surface-raised);
}
.guide-author::before {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none; z-index: -1;
  background: radial-gradient(60% 60% at 50% 50%, rgba(59,130,246,.06) 0%, transparent 70%);
}
[data-theme="light"] .guide-author { background: var(--surface-base); border-block: 1px solid var(--border-subtle); }

.guide-related::before {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none; z-index: -1;
  background: radial-gradient(60% 50% at 50% 100%, rgba(59,130,246,.06) 0%, transparent 70%);
}


/* — About page sections — */
.block-about-story::before {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none; z-index: -1;
  background: radial-gradient(40% 30% at 0% 0%, rgba(59,130,246,.05) 0%, transparent 60%);
}

.block-social-links {
  background: var(--surface-raised);
}
.block-social-links::before {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none; z-index: -1;
  background:
    radial-gradient(50% 50% at 0% 0%, rgba(59,130,246,.08) 0%, transparent 60%),
    radial-gradient(50% 50% at 100% 100%, rgba(245,158,11,.05) 0%, transparent 60%);
}
[data-theme="light"] .block-social-links { background: var(--surface-base); border-block: 1px solid var(--border-subtle); }


/* === Light-theme tweaks for atmospheres === */
[data-theme="light"] .block-services-preview::before,
[data-theme="light"] .block-about-preview::before,
[data-theme="light"] .block-hero-service::before,
[data-theme="light"] .block-hero-plugin::before,
[data-theme="light"] .block-hero-page::before,
[data-theme="light"] .case-hero::before,
[data-theme="light"] .guide-hero::before,
[data-theme="light"] .block-plugin-features::before,
[data-theme="light"] .case-quote::before,
[data-theme="light"] .block-social-links::before {
  filter: saturate(1.2) brightness(1.05);
  opacity: .8;
}


/* ============================================================
   9.C EDITORIAL — display nums, chips, monograms, brackets
   ============================================================ */

/* — Editorial section counter — outlined number behind every section-head — */
main { counter-reset: section -1; }
main > section { counter-increment: section; }
.section-head { position: relative; }
.section-head > * { position: relative; z-index: 1; }
.section-head::before {
  content: counter(section, decimal-leading-zero);
  position: absolute;
  top: -.55em;
  right: 0;
  font-family: var(--font-mono);
  font-size: clamp(3.5rem, 7vw + 1rem, 6.5rem);
  font-weight: 800;
  letter-spacing: -.05em;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px var(--border-default);
  pointer-events: none;
  user-select: none;
  z-index: 0;
}
.section-head--center::before {
  right: 50%;
  transform: translateX(50%);
  top: -1em;
  opacity: .65;
}
main > section:first-of-type .section-head::before { display: none; }
@media (max-width: 639px) {
  .section-head::before { font-size: clamp(2.75rem, 9vw, 4rem); top: -.3em; }
}


/* — Hero pretitle — monospace chip pill — */
.block-hero-home__pretitle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 5px 12px 5px 8px;
  width: fit-content;
  background: var(--surface-raised);
  border: 1px solid var(--border-default);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-secondary);
  text-rendering: geometricPrecision;
}
.block-hero-home__pretitle::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--state-success-text);
  box-shadow: 0 0 0 3px rgba(16,185,129,.15);
  flex-shrink: 0;
}

/* Hero H1 — heavier, tighter editorial display — */
.block-hero-home__title,
.text-display {
  letter-spacing: -.035em;
  line-height: .98;
  font-weight: 800;
}
.block-hero-home__title { font-size: clamp(2.5rem, 5vw + 1.5rem, 5rem); }


/* — Hero code-card: LIVE chip in head — */
.hero-card__head { display: flex; align-items: center; gap: var(--space-3); }
.hero-card__live {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 10px 2px 8px;
  border: 1px solid var(--state-success-border);
  background: var(--state-success-bg);
  color: var(--state-success-text);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.hero-card__live-dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 3px rgba(16,185,129,.18);
}


/* — Corner brackets on hero cards (top-left + bottom-right) — */
.case-card,
.plugin-card.card,
.cross-sell-card,
.post-card,
.review {
  position: relative;
}
.case-card::before, .case-card::after,
.plugin-card.card::before, .plugin-card.card::after,
.cross-sell-card::before, .cross-sell-card::after,
.post-card::before, .post-card::after,
.review::before, .review::after {
  content: "";
  position: absolute;
  width: 14px;
  height: 14px;
  pointer-events: none;
  z-index: 2;
  transition: border-color var(--duration-base);
}
.case-card::before, .plugin-card.card::before,
.cross-sell-card::before, .post-card::before, .review::before {
  top: 8px;
  left: 8px;
  border-top: 1px solid var(--border-strong);
  border-left: 1px solid var(--border-strong);
}
.case-card::after, .plugin-card.card::after,
.cross-sell-card::after, .post-card::after, .review::after {
  bottom: 8px;
  right: 8px;
  border-bottom: 1px solid var(--border-strong);
  border-right: 1px solid var(--border-strong);
}
.case-card:hover::before, .case-card:hover::after,
.plugin-card.card:hover::before, .plugin-card.card:hover::after,
.cross-sell-card:hover::before, .cross-sell-card:hover::after,
.post-card:hover::before, .post-card:hover::after {
  border-color: var(--brand-text);
}


/* — Plugin monogram knockout (replaces generic SVG icon) — */
.plugin-card__monogram {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--brand-text);
  line-height: 1;
}


/* — Process steps: brutalist brand connector + filled brand num — */
.process-step__num {
  background: var(--brand-bg);
  color: var(--text-inverse);
  border-color: var(--brand-bg);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16);
}
@media (min-width: 640px) {
  .process-list::before {
    /* override polish dotted with crisp solid brand line, fading at edges */
    background-image: linear-gradient(to bottom, transparent, var(--brand-border) 8%, var(--brand-border) 92%, transparent);
    background-size: 1px 100%;
    background-repeat: no-repeat;
    opacity: 1;
  }
}


/* — Refined breadcrumbs separator (› instead of /) — */
.breadcrumbs__sep::after {
  content: "›";
  font-size: 1.1em;
  line-height: 1;
}
.breadcrumbs__sep { font-size: 0; }
.breadcrumbs__sep::after { font-size: var(--text-sm); color: var(--text-disabled); }


/* — Reviews: refined avatar gradient ring — */
.review__avatar {
  background: linear-gradient(135deg, var(--brand-subtle) 0%, var(--surface-overlay) 60%);
  box-shadow: inset 0 0 0 1px var(--brand-border), 0 0 0 1px var(--border-subtle);
  border: 0;
}


/* — Custom thin scrollbar matching theme — */
* { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border-radius: 999px;
  border: 2px solid var(--surface-base);
}
::-webkit-scrollbar-thumb:hover { background: var(--brand-bg); }


/* — Buttons: subtle brightness lift on primary hover — */
.btn { transition: background var(--duration-base), border-color var(--duration-base), transform var(--duration-fast), color var(--duration-base), filter var(--duration-base), box-shadow var(--duration-base); }
.btn--primary:hover { filter: brightness(1.08) saturate(1.05); }
.btn--primary:active { filter: brightness(.95); }


/* — Card link: hint on hover (subtle scale of inner) — */
.card-link:hover .card--interactive,
.card-link:hover .post-card__inner,
.card-link:hover .case-card__inner {
  border-color: var(--brand-border);
}


/* — Hero metrics: nudge primary metric to brand colour — */
.block-hero-home__metrics .metrics__item:last-child .metrics__value { color: var(--brand-text); }


/* — Section-head caption + counter avoid overlap on small viewports — */
@media (max-width: 480px) {
  .section-head::before { opacity: .5; }
}


/* — Tag refinement: subtle fixed-width family — */
.tag {
  font-family: var(--font-mono);
  letter-spacing: .04em;
}


/* — FAQ details summary: cleaner hover — */
.faq-item:hover { border-color: var(--border-default); }
.faq-item[open] { background: var(--surface-overlay); }


/* — Service-fit cards: brand-tinted top edge — */
.fit-card--good { background: linear-gradient(180deg, rgba(16,185,129,.04) 0%, transparent 30%), var(--surface-raised); }
.fit-card--bad  { background: linear-gradient(180deg, rgba(239,68,68,.04) 0%, transparent 30%), var(--surface-raised); }


/* — Hero-service quick stats: monospace chips — */
.hero-service__quick li {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: .06em;
}
.hero-service__quick-key { color: var(--brand-text); }


/* — Pricing card amount: bigger, with currency knockout — */
.pricing-card__amount { font-size: clamp(1.875rem, 1.5rem + 1vw, 2.5rem); }
.pricing-card--featured .pricing-card__amount {
  background: linear-gradient(135deg, var(--brand-text) 0%, var(--accent-400) 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}


/* — Logo pills (hero-service aside): subtle inset highlight — */
.logo-pill { box-shadow: inset 0 1px 0 rgba(255,255,255,.06); }


/* ============================================================
   10. PRINT
   ============================================================ */
@media print {
  .site-header, .site-footer, .scroll-progress, .skip-link,
  .block-cta-banner, .block-hero-home__visual { display: none !important; }
  body { background: #fff; color: #000; }
  a { color: #000; text-decoration: underline; }
  main > section { padding-block: 1rem; border: 0; }
  .block-hero-home::after,
  .pricing-card--featured::before,
  .section-head .text-caption::before,
  .section-head--center .text-caption::after { display: none; }
}

/* ==========================================================================
   Misc — добавки для блоков, использующие классы из шаблонов
   ========================================================================== */

/* about-story — годовая метка над подзаголовком */
.about-story__year {
  display: inline-block;
  margin-bottom: var(--space-2);
  font-family: var(--font-mono);
  color: var(--text-tertiary);
  letter-spacing: var(--tracking-wide);
  font-size: var(--text-xs);
  text-transform: uppercase;
}

/* about-preview — био-обёртка и фото */
.block-about-preview__bio {
  margin: var(--space-4) 0;
}
.block-about-preview__bio p { margin: 0 0 var(--space-3); }
.block-about-preview__photo {
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
  object-fit: cover;
  display: block;
}

/* hero-plugin-card — вариант с реальным изображением вместо мок-карточки */
.hero-plugin-card--image {
  padding: 0;
  overflow: hidden;
}
.hero-plugin-card--image img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: inherit;
}

/* contact-form — обёртка для CF7 shortcode */
.block-contact-form__cf7 {
  margin-top: var(--space-6);
}
.cta-form-wrap {
  width: 100%;
}

/* howto-steps — meta-список под заголовком + изображение шага */
.howto-steps__meta {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4) var(--space-6);
  margin: var(--space-3) 0 0;
  padding: 0;
}
.howto-steps__meta li {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  font-size: var(--text-sm);
}
.howto-step__image {
  margin: var(--space-3) 0 0;
  border-radius: var(--radius-md);
  overflow: hidden;
}
.howto-step__image img {
  display: block;
  width: 100%;
  height: auto;
}

/* case-card__suffix — суффикс «+» в крупных метриках archive-hero */
.case-card__suffix {
  font-family: var(--font-mono);
  color: var(--text-tertiary);
  font-weight: var(--weight-regular);
  margin-left: 0.05em;
}

/* block-preview-placeholder — UI для отсутствующих данных в редакторе */
.block-preview-placeholder {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--text-tertiary);
  background: var(--surface-raised);
  border: 1px dashed var(--border-default);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5);
  margin: var(--space-3) 0;
}