:root {
  --tx-iris: #5b3fd1;
  --tx-teal: #0ea5a6;
  --tx-coral: #fb7185;
  --tx-sun: #f59e0b;
  --tx-ink: #0f172a;
  --tx-sand: #f6f3ee;
  --tx-muted: #6b7280;

  --radius: 1rem;
  --shadow: 0 1rem 2rem rgba(0, 0, 0, 0.08);
  --focus: 0 0 0 0.25rem rgba(14, 165, 166, 0.35);
}

html,
body {
  font-family: "Manrope", "DM Sans", system-ui, -apple-system, "Segoe UI",
    Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
  color: var(--tx-ink);
  background: #fff;
}

.navbar-brand .brand-kite {
  width: 1.15rem;
  height: 1.15rem;
  display: inline-block;
  transform: rotate(45deg);
  border-radius: 0.2rem;
  background: conic-gradient(
    from 90deg,
    var(--tx-iris),
    var(--tx-teal),
    var(--tx-coral),
    var(--tx-sun)
  );
  box-shadow: 0 0 0.75rem rgba(91, 63, 209, 0.5);
}
.nav-link.active {
  font-weight: 700;
  color: var(--tx-iris) !important;
}

.hero {
  color: #fff;
  background: radial-gradient(
      900px 500px at 10% 15%,
      rgba(14, 165, 166, 0.3),
      transparent 60%
    ),
    radial-gradient(
      700px 400px at 90% 10%,
      rgba(251, 113, 133, 0.28),
      transparent 60%
    ),
    linear-gradient(135deg, #3f2bb5, #10a2a2);
}

.card {
  border-radius: var(--radius);
}
.step-badge {
  min-width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  display: inline-grid;
  place-items: center;
  background: linear-gradient(135deg, var(--tx-iris), var(--tx-teal));
  color: #fff;
  font-weight: 700;
  box-shadow: var(--shadow);
}
.btn:focus,
.form-control:focus,
.form-select:focus,
.form-check-input:focus {
  box-shadow: var(--focus);
}
.visually-hidden-focusable:not(:focus):not(:focus-within) {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  border: 0;
  padding: 0;
  white-space: nowrap;
  clip-path: inset(50%);
  clip: rect(0 0 0 0);
  overflow: hidden;
}

/* Градиенты фичей */
.grad-a {
  background: linear-gradient(135deg, var(--tx-iris), #7c8cf8);
  color: #fff;
}
.grad-b {
  background: linear-gradient(135deg, var(--tx-teal), #34d399);
  color: #0b1220;
}
.grad-c {
  background: linear-gradient(135deg, var(--tx-coral), #fda4af);
  color: #0b1220;
}
.grad-d {
  background: linear-gradient(135deg, var(--tx-sun), #fbbf24);
  color: #0b1220;
}

.price-card .display-6 {
  letter-spacing: -0.5px;
}
.ribbon {
  position: absolute;
  top: 0.75rem;
  right: -0.5rem;
  background: var(--tx-coral);
  color: #fff;
  padding: 0.25rem 0.75rem;
  border-radius: 0.5rem;
  transform: rotate(6deg);
  font-weight: 700;
}

.callout {
  background: linear-gradient(135deg, #5b3fd1, #0ea5a6);
  color: #fff;
}

.section-soft {
  background: var(--tx-sand);
}
.toc-link {
  text-decoration: none;
}
.toc-link:hover {
  text-decoration: underline;
}