/* Live weather backdrop · subtle · mode=clear-night · temp=53°F · 10:20 */
html {
  background: linear-gradient(180deg, #06080e 0%, #080b14 55%, #0c0f18 100%) !important;
  background-attachment: fixed !important;
  min-height: 100%;
}
body {
  background-color: transparent !important;
  background-image: none !important;
}
html::before, html::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  will-change: transform, background-position, opacity;
}

@media (prefers-reduced-motion: reduce) {
  html::before, html::after { animation: none !important; }
}
@media print {
  html, body { background: white !important; }
  html::before, html::after { display: none !important; }
}

/* Every full-width section: NO color, NO image. The html sky shows straight
   through, giving you the continuous live-weather feel top-to-bottom of the
   page instead of stacked panels. */
section,
.hero,
.page-hero,
.why,
.features,
.cta,
#services,
#about,
#contact,
#scrap {
  background: transparent !important;
}

/* Kill the colored radial-glow pseudo-elements on the hero — those tinted
   sections blue/purple, breaking the unified weather look. */
.hero::before,
.hero::after,
.page-hero::before,
.page-hero::after {
  background: none !important;
}

/* Ticker is a thin strip — keep a near-solid dark band so the marquee text reads. */
.ticker-wrap {
  background: rgba(10,12,24,.78) !important;
}

/* Cards & content panels — semi-transparent so the sky bleeds through, but
   dark enough that text and inputs still read cleanly. */
.svc-card,
.svc-cat-card,
.scrap-card,
.about-badge,
.hero-about-badge,
.phone-feature,
.as-box,
.cd-ico,
.card,
.tools,
.studio-canvas-wrap,
.studio-side,
.step-bar .step,
.info-modal,
.cs-card,
.price-card {
  background-color: rgba(15,18,32,.55) !important;
}

/* Contact form has many inputs that already darken its weight — go lighter
   so the live sky still shows behind it. */
.form-wrap {
  background-color: rgba(15,18,32,.4) !important;
}

/* Scrap-metal panel sets an inline multi-stop gradient — replace fully. */
.svc-scrap {
  background: rgba(15,18,32,.55) !important;
}
.svc-scrap::before { background: none !important; }

/* Site footer — slightly darker so legal/contact text reads clearly. */
footer,
.site-footer,
.footer-wrap,
.footer-bar {
  background-color: rgba(7,8,16,.85) !important;
}