/* ============================================================
   MadiLink — dark-theme patch over the shared component base
   (style.css/animations.css assume a light surface by default;
   these overrides flip the handful of hardcoded-white spots to
   the dark Amber Circuit palette) + new components.
   ============================================================ */

.topbar {
  background: rgba(20, 23, 28, 0.86);
  border-bottom-color: rgba(236, 234, 228, 0.08);
}
.topbar .brand { color: var(--ink); }
.topbar .brand:hover { color: var(--ink); }
.topbar .brand__name b { color: var(--brand); }
.topbar .brand__name small { color: var(--muted); }
.topbar .nav__link { color: var(--ink-soft); }
.topbar .nav__link:hover { color: var(--ink); background: rgba(236, 234, 228, 0.06); }
.topbar .nav__link.is-active { color: var(--ink); background: rgba(var(--brand-rgb), 0.16); }
.topbar .nav__link.is-active::after { background: var(--brand); }
.topbar .burger { border-color: rgba(236, 234, 228, 0.16); background: rgba(236, 234, 228, 0.05); }
.topbar .burger span { background: var(--ink); }

.btn--primary { color: var(--on-brand); }
.btn--primary:hover { color: var(--on-brand); }
.btn--light { color: var(--night); }

.field input:focus,
.field textarea:focus { background: var(--surface-3); }
.captcha__row .captcha__q,
.captcha__q { background: var(--surface-3); }
.captcha__row input:focus { background: var(--surface-3); }

.cookie {
  background: rgba(20, 23, 28, 0.96);
  border-color: var(--line);
}

.hero__inner {
  background: rgba(20, 23, 28, 0.74);
  border-color: rgba(236, 234, 228, 0.10);
}

/* Pillar icon tiles — animations.css (shared base) redefines .pillar__icon
   later in the cascade with a flat bordered square, silently dropping the
   colored gradient style.css defines for it. Reinstate the gradient here
   since custom.css loads last. */
.pillar__icon {
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand-soft) 130%) !important;
  border: none !important;
  color: var(--on-brand) !important;
}
.pillar__icon--accent {
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-soft) 130%) !important;
  color: var(--on-brand) !important;
}
.pillar__icon--ink {
  background: linear-gradient(135deg, var(--night-2) 0%, var(--brand-strong) 130%) !important;
  color: var(--ink) !important;
}

/* Pillars: 4-up grid (base component ships a 3-col default) */
.pillars--4 {
  grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 980px) {
  .pillars--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .pillars--4 { grid-template-columns: 1fr; }
}

/* ============================================================
   Hero isometric illustration
   ============================================================ */
.hero-iso {
  width: 100%;
  height: 100%;
  display: block;
}
.hero-iso__block { transform-origin: center; }
.hero-iso__block--a { animation: cs-float 6.5s ease-in-out infinite; }
.hero-iso__block--b { animation: cs-float 7.5s ease-in-out infinite; animation-delay: 0.6s; }
.hero-iso__block--c { animation: cs-float 7s ease-in-out infinite; animation-delay: 1.1s; }
.hero-iso__signal circle { animation: cs-pulse-glow 3.2s ease-in-out infinite; }
.hero-iso__signal circle:nth-child(2) { animation-delay: 0.4s; }
.hero-iso__signal circle:nth-child(3) { animation-delay: 0.8s; }
.hero-iso__nodes circle { animation: cs-pulse-glow 2.6s ease-in-out infinite; }
.motion-static .hero-iso__block,
.motion-static .hero-iso__signal circle,
.motion-static .hero-iso__nodes circle { animation: none; }

/* ============================================================
   Compare table — "before / after" section, structurally distinct
   from the pillar grid and FAQ accordion used elsewhere on the site.
   ============================================================ */
.compare-wrap {
  overflow-x: auto;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
}
.compare-table {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
  background: var(--surface);
  font-size: 0.98rem;
}
.compare-table thead th {
  text-align: left;
  font-family: var(--font-head);
  font-weight: 600;
  letter-spacing: 0.01em;
  padding: 1rem 1.4rem;
  background: var(--surface-2);
  color: var(--ink-soft);
  border-bottom: 1px solid var(--line);
}
.compare-table thead th.compare-table__win {
  color: var(--brand);
}
.compare-table tbody th[scope="row"] {
  text-align: left;
  padding: 1.1rem 1.4rem;
  font-weight: 600;
  color: var(--ink);
  border-bottom: 1px solid var(--line-soft);
  white-space: nowrap;
}
.compare-table td {
  padding: 1.1rem 1.4rem;
  border-bottom: 1px solid var(--line-soft);
  color: var(--ink-soft);
  vertical-align: top;
}
.compare-table tbody tr:last-child th,
.compare-table tbody tr:last-child td { border-bottom: none; }
.compare-table__before i {
  color: var(--muted);
  margin-right: 0.55rem;
}
.compare-table__after {
  color: var(--ink);
  background: rgba(var(--brand-rgb), 0.06);
}
.compare-table__after i {
  color: var(--brand);
  margin-right: 0.55rem;
}