/* ==========================================================================
   Mancers — Section theme backgrounds ("Signal & Momentum")
   Each vertical gets a restrained, brand-toned background treatment instead
   of a hue swap — the accent color changes, the system doesn't.
   ========================================================================== */

/* ---- hero: animated gradient + signal lines (see #hero-canvas in JS) ---- */
.hero{
  position: relative;
  overflow: hidden;
  background: var(--ink);
  color: #fff;
}
.hero::before{
  content: '';
  position: absolute; inset: -20%;
  background: radial-gradient(circle at 15% 20%, rgba(251,97,158,0.35), transparent 45%),
              radial-gradient(circle at 85% 15%, rgba(38,181,251,0.32), transparent 45%),
              radial-gradient(circle at 60% 90%, rgba(130,65,180,0.30), transparent 45%);
  filter: blur(40px);
  animation: gradient-drift 16s ease-in-out infinite;
  background-size: 180% 180%;
}
.hero-canvas{ position: absolute; inset: 0; opacity: 0.6; }
.hero .wrap{ position: relative; z-index: 1; }
.hero h1{ color: #fff; }
.hero .eyebrow{ color: var(--sky); }
.hero p{ color: rgba(255,255,255,0.78); }

/* ---- software development: fine circuit-grid ---- */
.theme-software{
  background-image:
    linear-gradient(var(--border) 1px, transparent 1px),
    linear-gradient(90deg, var(--border) 1px, transparent 1px);
  background-size: 42px 42px;
  background-position: center;
  background-color: var(--paper);
}

/* ---- AI solutions: drifting node network ---- */
.theme-ai{
  position: relative;
  background: linear-gradient(180deg, var(--surface-sunken), var(--paper));
}
.theme-ai .node-field{ position: absolute; inset: 0; overflow: hidden; pointer-events: none; }

/* ---- agriculture / vertical systems: contour lines ---- */
.theme-agri{
  background-image: repeating-linear-gradient(115deg, rgba(62,142,91,0.08) 0 2px, transparent 2px 34px);
  background-color: var(--paper);
}

/* ---- pharma: route/dash lines (purchase -> dispatch -> post) ---- */
.theme-pharma{
  background-image: repeating-linear-gradient(90deg, rgba(225,79,142,0.12) 0 10px, transparent 10px 24px);
  background-position: 0 50%;
  background-size: 100% 1px;
  background-repeat: no-repeat;
}

/* ---- products: duotone panel ---- */
.theme-products{
  background: linear-gradient(135deg, rgba(107,57,153,0.06), rgba(38,181,251,0.06));
}

.section-alt{ background: var(--surface-sunken); }