/* Experimental background-only treatment — HTML Validator Home / Midnight Depth
   No typography, geometry, content, interactions, or component assets changed.
   This file is an isolated visual proof, NOT a production stylesheet. */
:root { --midnight-canvas: #041326; --bg: #041326; }
html, body { background-color: var(--midnight-canvas); }
main {
  background: linear-gradient(180deg,
    #041326 0%,
    #05172b 19%,
    #06192e 39%,
    #06192e 59%,
    #05182d 80%,
    #041326 100%);
}
.hero,.engines,.workflow,.steps,.final-section{ background:transparent; }
/* Directional spotlight over the browser — edges vanish into shared canvas. */
.hero::before {
  background:
    radial-gradient(ellipse 58% 58% at 75% 39%, rgba(23, 76, 119, .24) 0%, rgba(10, 38, 70, .10) 52%, transparent 85%),
    radial-gradient(ellipse 52% 46% at 23% 72%, rgba(14, 53, 92, .13) 0%, transparent 87%);
}
/* Engine cards, not ambient lighting, carry the visual distinction. */
.engines::before {
  background:radial-gradient(ellipse 62% 65% at 50% 47%, rgba(14, 56, 91, .16) 0%, rgba(13, 46, 79, .06) 54%, transparent 87%);
}
/* One extremely soft cool bloom behind browser preview. */
.workflow::before {
  background:radial-gradient(ellipse 63% 63% at 70% 51%, rgba(19, 71, 109, .22) 0%, rgba(11, 40, 67, .08) 57%, transparent 86%);
}
/* Steps nearly flat: outlines provide the hierarchy. */
.steps::before {
  background:radial-gradient(ellipse 67% 70% at 52% 54%, rgba(12, 51, 84, .13) 0%, transparent 85%);
}
/* The CTA gets a focused but understated cool ambient halo. */
.final-section::before {
  background:radial-gradient(ellipse 59% 57% at 50% 43%, rgba(19, 74, 117, .19) 0%, rgba(12, 51, 88, .07) 61%, transparent 87%);
}
.hero::before,.engines::before,.workflow::before,.steps::before,.final-section::before {
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 14%,#000 83%,transparent 100%);
  mask-image:linear-gradient(180deg,transparent 0%,#000 14%,#000 83%,transparent 100%);
}
/* Orange separator only on Hero, not below engines; the Hero wave is toned down. */
.hero-swoosh {opacity:.18; background:radial-gradient(ellipse 45% 30% at 29% 45%,rgba(255,144,70,.30),transparent 83%);}
.hero-swoosh::after {filter:none;border-top-color:rgba(255,162,66,.38);}
.section-ribbon {display:none !important;}
/* The ornamental Hero wave is intentionally removed, per approved direction. */
.hero-swoosh,.section-ribbon{display:none!important}