/* ─────────────────────────────────────────────────────────────────────────
   Abstract backgrounds — layered onto sections via pseudo-elements.
   All patterns are behind content (z-index: 0 or lower).
   ───────────────────────────────────────────────────────────────────────── */

/* ─── Hero: Blueprint grid + angular slash accent ────────────────────── */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.028) 1px, transparent 1px);
  background-size: 64px 64px;
  pointer-events: none;
  z-index: 0;
}

/* Large angular red slash — right half of hero */
.hero__bg-glow::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 30%;
  background: linear-gradient(
    118deg,
    transparent 38%,
    rgba(204, 34, 34, 0.06) 38%,
    rgba(204, 34, 34, 0.06) 52%,
    transparent 52%
  );
  pointer-events: none;
}

/* ─── Problem: Dot grid ──────────────────────────────────────────────── */
.problem::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(
    circle,
    rgba(255, 255, 255, 0.055) 1px,
    transparent 1px
  );
  background-size: 32px 32px;
  pointer-events: none;
  z-index: 0;
}

/* Large faint "01" style number in corner */
.problem::after {
  content: '';
  position: absolute;
  top: -4%;
  right: -2%;
  width: 400px;
  height: 400px;
  background: radial-gradient(
    circle at center,
    rgba(204, 34, 34, 0.06) 0%,
    transparent 65%
  );
  pointer-events: none;
  z-index: 0;
}

/* ─── Solution: Diagonal hatching ───────────────────────────────────── */
.solution::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    -55deg,
    transparent,
    transparent 26px,
    rgba(255, 255, 255, 0.02) 26px,
    rgba(255, 255, 255, 0.02) 27px
  );
  pointer-events: none;
  z-index: 0;
}

/* Red accent glow — top left */
.solution::after {
  content: '';
  position: absolute;
  top: -20%;
  left: -10%;
  width: 50%;
  height: 80%;
  background: radial-gradient(
    ellipse at center,
    rgba(204, 34, 34, 0.05) 0%,
    transparent 70%
  );
  pointer-events: none;
  z-index: 0;
}

/* ─── Benefits: Diamond crosshatch ──────────────────────────────────── */
.benefits::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(
      45deg,
      transparent,
      transparent 18px,
      rgba(255, 255, 255, 0.022) 18px,
      rgba(255, 255, 255, 0.022) 19px
    ),
    repeating-linear-gradient(
      -45deg,
      transparent,
      transparent 18px,
      rgba(255, 255, 255, 0.022) 18px,
      rgba(255, 255, 255, 0.022) 19px
    );
  pointer-events: none;
  z-index: 0;
}

/* ─── Founder: Angular red accent block ─────────────────────────────── */
.founder::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 46%;
  height: 100%;
  background: linear-gradient(
    160deg,
    rgba(204, 34, 34, 0.05) 0%,
    rgba(204, 34, 34, 0.02) 40%,
    transparent 70%
  );
  pointer-events: none;
  z-index: 0;
}

/* Faint vertical rule separating portrait from content */
.founder::after {
  content: '';
  position: absolute;
  top: 10%;
  left: 42%;
  width: 1px;
  height: 80%;
  background: linear-gradient(
    to bottom,
    transparent,
    rgba(255, 255, 255, 0.04) 25%,
    rgba(255, 255, 255, 0.04) 75%,
    transparent
  );
  pointer-events: none;
  z-index: 0;
}

@media (max-width: 900px) {
  .founder::before,
  .founder::after { display: none; }
}

/* ─── Timeline: Horizontal scan lines ───────────────────────────────── */
.timeline::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    to bottom,
    transparent,
    transparent 24px,
    rgba(255, 255, 255, 0.018) 24px,
    rgba(255, 255, 255, 0.018) 25px
  );
  pointer-events: none;
  z-index: 0;
}

/* ─── Vision: Concentric radar rings ────────────────────────────────── */
.vision::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    repeating-radial-gradient(
      circle at 50% 50%,
      transparent 0px,
      transparent 119px,
      rgba(255, 255, 255, 0.022) 120px,
      transparent 121px
    );
  pointer-events: none;
  z-index: 0;
}

/* ─── Signup: Corner accent marks ───────────────────────────────────── */
.signup::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.018) 1px, transparent 1px);
  background-size: 48px 48px;
  pointer-events: none;
  z-index: 0;
  mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, transparent 40%, black 100%);
  -webkit-mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, transparent 40%, black 100%);
}

/* ─── About hero: same grid as main hero ────────────────────────────── */
.about-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.028) 1px, transparent 1px);
  background-size: 64px 64px;
  pointer-events: none;
  z-index: 0;
}

/* ─── About origin: dot grid ────────────────────────────────────────── */
.about-origin::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(
    circle,
    rgba(255, 255, 255, 0.05) 1px,
    transparent 1px
  );
  background-size: 30px 30px;
  pointer-events: none;
  z-index: 0;
}

/* ─── About values: crosshatch ──────────────────────────────────────── */
.about-values::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(
      45deg,
      transparent,
      transparent 18px,
      rgba(255, 255, 255, 0.02) 18px,
      rgba(255, 255, 255, 0.02) 19px
    ),
    repeating-linear-gradient(
      -45deg,
      transparent,
      transparent 18px,
      rgba(255, 255, 255, 0.02) 18px,
      rgba(255, 255, 255, 0.02) 19px
    );
  pointer-events: none;
  z-index: 0;
}

/* Ensure section containers sit above background patterns */
.problem .container,
.solution .container,
.benefits .container,
.founder .container,
.timeline .container,
.vision .container,
.signup .container {
  position: relative;
  z-index: 1;
}