/* ── Team page hero — Neural SDE sample-path canvas ─────────────────────
   A bundle of stochastic sample paths (Monte Carlo-style trajectories),
   each mean-reverting toward a slowly-reassigned target with Euler-
   Maruyama drift + diffusion steps, wandering the hero the way a Neural
   SDE's simulated paths would. Hovering locally raises the diffusion
   term near the cursor, visibly perturbing nearby paths, evoking the
   drift/diffusion + Euler-Maruyama language on this same page's
   "Mathematically Rigorous" card. A different interaction paradigm from
   the homepage swarm, the Web & App page's grid+blocks, and the
   Fin-Tech page's fixed-axis model-comparison chart on purpose. */
.team-hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .team-hero__bg { display: none; }
}

/* This page has no side panel occluding the shared og-image watermark
   (see .page-hero--navy::before / .page-hero--dim in pages.css) — the
   canvas above is now the hero's own texture, so the watermark image
   is scoped down to near-invisible here rather than left at the shared
   .page-hero--dim 0.08. Scoped to .team-page only; approach.html,
   problem.html, dashboard.html, insights.html, and 404.html still rely
   on the shared rule and are untouched. */
.team-page .page-hero--navy::before {
  opacity: 0.025;
}

/* ── Team cards section — the section and the cards inside it used the
   same flat --bg-white color, so the cards barely read as distinct
   panels against their own background, and the section itself was a
   single solid tone with nothing else going on. Rebuilt with three
   layers: two large color glows echoing each card's own accent (green
   under Cole's side, blue under Filip's), a fine grain texture (SVG
   turbulence, not a flat noise PNG) for the "not defaulting to a solid
   color" atmosphere, and a faint vertical hairline rhythm tying it to
   the engineering/grid language used elsewhere on the site (the Web &
   App page's dot grid, the fintech chart axes). Cards sit on --bg-panel
   with a real drop shadow so they read as lifted panels, not just
   outlined rectangles blending into the same flat tone. ── */
.team-section {
  position: relative;
  overflow: hidden;
  background: var(--bg-white);
  background-image:
    radial-gradient(ellipse 720px 520px at 18% -8%, rgba(63,207,142,0.11), transparent 64%),
    radial-gradient(ellipse 720px 520px at 82% -8%, rgba(88,166,255,0.11), transparent 64%),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.022) 0px, rgba(255,255,255,0.022) 1px, transparent 1px, transparent 140px),
    radial-gradient(rgba(255,255,255,0.032) 1px, transparent 1px);
  background-size: auto, auto, auto, 24px 24px;
}
.team-section::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.5;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.team-card {
  position: relative;
  background: var(--bg-panel);
  box-shadow: 0 12px 32px rgba(0,0,0,0.22);
}