body { font-family: var(--font-sans); color: var(--ink); background: var(--surface-page); margin: 0; }
.nd-row { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; padding: var(--space-4); }
/* Фирменная оранжевая заливка. Ровный цвет, без градиента: иллюстрации с вырезанным
   фоном ложатся на него без перепада, и совпадает с theme-color в <meta>. */
.nd-grad { background: var(--brand-500); }

/* Button */
.nd-btn { display: inline-flex; align-items: center; gap: var(--space-2); height: 52px; padding: 0 28px; border: 0; border-radius: var(--radius-pill);
  font: 700 12px/1.2 var(--font-sans); letter-spacing: .03em; text-transform: uppercase; cursor: pointer; text-decoration: none; }
.nd-btn:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.nd-btn--primary { background: var(--brand-500); color: var(--on-inverse); box-shadow: var(--shadow-button); }
.nd-btn--primary:hover { background: var(--brand-600); }
.nd-btn--dark { background: var(--surface-inverse); color: var(--on-inverse); }
.nd-btn--navy { background: var(--navy-600); color: var(--on-inverse); }
.nd-btn--light { background: var(--surface-card); color: var(--ink); }
.nd-btn--sm { height: 40px; padding: 0 20px; }

/* Tag / pill */
.nd-tag { display: inline-flex; align-items: center; height: 30px; padding: 0 var(--space-4); border-radius: var(--radius-pill);
  font: 700 10px/1 var(--font-sans); letter-spacing: .03em; text-transform: uppercase; white-space: nowrap; }
.nd-tag--outline { border: 1px solid var(--line); color: var(--ink); background: var(--surface-card); }
.nd-tag--invert { background: var(--on-inverse); color: #111112; }
.nd-tag--brand { background: var(--brand-700); color: var(--on-inverse); }
.nd-tags { display: flex; flex-wrap: wrap; gap: var(--space-2); }

/* Service card */
.nd-service { display: flex; flex-direction: column; gap: var(--space-4); width: 260px; padding: var(--space-6); border-radius: var(--radius-lg);
  background: var(--surface-card); color: var(--ink); box-shadow: var(--shadow-card); }
.nd-service--dark { background: var(--surface-inverse); color: var(--on-inverse); box-shadow: none; }
.nd-service h3 { margin: 0; font: 600 26px/1.1 var(--font-sans); letter-spacing: -.02em; }
.nd-service p { margin: 0; font: 400 12px/1.4 var(--font-sans); text-transform: uppercase; color: var(--ink-muted); }
.nd-service--dark p { color: var(--on-inverse-muted); }
.nd-service .nd-tags { flex-direction: column; align-items: flex-start; }
.nd-service .nd-btn { margin-top: auto; justify-content: center; }

/* Step card */
.nd-step { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); padding: var(--space-8); border-radius: var(--radius-lg);
  background: var(--surface-card); color: var(--ink); }
.nd-step--slate { background: var(--slate-700); color: var(--on-inverse); }
.nd-step--brand { background: var(--brand-600); color: var(--on-inverse); }
.nd-step__num { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: var(--radius-pill); background: var(--on-inverse); color: #111112; font: 700 11px/1 var(--font-sans); }
.nd-step--light .nd-step__num { background: var(--brand-500); color: var(--on-inverse); }
.nd-step h3 { margin: var(--space-3) 0 0; font: 600 26px/1.1 var(--font-sans); letter-spacing: -.02em; }
.nd-step__text { font: 700 12px/1.4 var(--font-sans); text-transform: uppercase; margin: 0 0 var(--space-3); }
.nd-step:has(.nd-step__photo) { grid-template-columns: 1fr 1fr 240px; }
/* Фон иллюстрации сведён к заливке карточки — рамка и скругление не нужны */
.nd-step__photo { width: 100%; height: auto; }

/* Feature (hero mini) card */
.nd-feature { width: 200px; min-height: 130px; padding: var(--space-4); border-radius: var(--radius-md); background: var(--surface-inverse); color: var(--on-inverse); }
.nd-feature--light { background: var(--surface-card); color: var(--ink); }
.nd-feature h4 { margin: 0 0 var(--space-3); font: 700 15px/1.2 var(--font-sans); }
.nd-feature p { margin: 0; font: 400 12px/1.35 var(--font-sans); opacity: .85; }

/* Lead form */
.nd-input { height: 52px; padding: 0 var(--space-6); border: 0; border-radius: var(--radius-pill); background: var(--surface-card); color: var(--ink); font: 500 16px/1 var(--font-sans); }
.nd-input:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }