/* Home-only preview: the approved C layout over a quiet workspace grid.
   The owner requested the original Publisher backdrop adapted to brand gold.
   Static decoration only; component surfaces and all layout rules stay intact. */
#main > .hero,
#main > #platform {
  --home-grid-line: rgba(184, 197, 212, .045);
  --home-grid-warm: rgba(255, 194, 45, .06);
  --home-grid-cool: rgba(73, 132, 160, .035);
  position: relative;
  isolation: isolate;
}

html[data-theme="light"] #main > .hero,
html[data-theme="light"] #main > #platform {
  --home-grid-line: rgba(128, 105, 45, .025);
  --home-grid-warm: rgba(255, 194, 45, .04);
  --home-grid-cool: rgba(118, 148, 171, .01);
  /* Maintain small-text contrast on the new warm ground, including grid
     intersections. This token remains local to these two Home sections. */
  --text-3: #626b77;
}

#main > .hero::before,
#main > #platform::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(var(--home-grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--home-grid-line) 1px, transparent 1px);
  background-size: 56px 56px;
  background-position: center top;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, .78) 45%, transparent 95%);
  mask-image: linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, .78) 45%, transparent 95%);
}

#main > .hero::after,
#main > #platform::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 77% 23%, var(--home-grid-warm), transparent 62%),
    radial-gradient(ellipse at 8% 10%, var(--home-grid-cool), transparent 48%);
}

/* The quieter second use ties the account section to the product workspace.
   The catalogue, campaign table, code and FAQ sections keep their plain ground. */
#main > #platform::before {
  opacity: .52;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 22%, rgba(0, 0, 0, .65) 58%, transparent 92%);
  mask-image: linear-gradient(to bottom, transparent, #000 22%, rgba(0, 0, 0, .65) 58%, transparent 92%);
}

#main > #platform::after {
  opacity: .55;
  background: radial-gradient(ellipse at 17% 40%, var(--home-grid-warm), transparent 65%);
}

@media (max-width: 720px) {
  #main > .hero::before,
  #main > #platform::before {
    background-size: 48px 48px;
  }

  #main > .hero::after {
    background:
      radial-gradient(ellipse at 90% 38%, var(--home-grid-warm), transparent 64%),
      radial-gradient(ellipse at 0% 0%, var(--home-grid-cool), transparent 42%);
  }
}