/* =========================================================
   ADS STANDARD BG — ProFlow Manuel V4
   Risolve tre cose:
   1) meno velo/overlay sullo sfondo
   2) più texture visibile, card leggibili ma meno tappate
========================================================= */
:root{
  --ads-bg-navy:#061426;
  --ads-bg-ocean:#0B2A45;
  --ads-bg-platinum:#E9EEF6;
  --ads-bg-ivory:#F6F0E4;
}

body{
  background:
    radial-gradient(circle at 50% 10%, rgba(42,121,197,.26), transparent 48%),
    linear-gradient(180deg, #071b31 0%, #061426 48%, #050816 100%) !important;
}

.bg-wrap{
  background:#061426 !important;
}

/* Qui sta la differenza: sfondo più presente, meno “spento”. */
.bg-video{
  opacity:.82 !important;
  filter:saturate(1.16) contrast(1.10) brightness(.96) !important;
}

/* Velo molto più leggero del CSS originale. */
.bg-overlay{
  background:
    linear-gradient(180deg,
      rgba(5,8,22,.16) 0%,
      rgba(7,18,34,.18) 22%,
      rgba(8,22,42,.25) 56%,
      rgba(5,8,22,.42) 100%) !important;
}

/* Anche la vignetta originale scuriva molto: alleggerita. */
.bg-vignette{
  background:
    radial-gradient(78% 62% at 50% 10%, rgba(42,121,197,.26) 0%, rgba(42,121,197,0) 64%),
    radial-gradient(70% 58% at 50% 45%, rgba(255,255,255,.08) 0%, rgba(255,255,255,0) 66%),
    radial-gradient(120% 110% at 50% 50%, rgba(0,0,0,0) 58%, rgba(0,0,0,.12) 100%) !important;
}

.hero-card,
.point-card,
.form-wrap{
  background:
    linear-gradient(180deg, rgba(9,24,45,.50) 0%, rgba(7,16,32,.55) 100%) !important;
  border-color:rgba(233,238,246,.20) !important;
  box-shadow:
    0 28px 70px rgba(0,0,0,.24),
    inset 0 1px 0 rgba(255,255,255,.07) !important;
}

.point-card:hover{
  border-color:rgba(233,238,246,.30) !important;
  box-shadow:0 30px 74px rgba(0,0,0,.28) !important;
}

.eyebrow,
.btn-secondary{
  background:rgba(233,238,246,.08) !important;
  border-color:rgba(233,238,246,.22) !important;
}

.form-shell{
  background:rgba(255,255,255,.065) !important;
  border-color:rgba(233,238,246,.16) !important;
}

.hero h1,
.form-intro h2,
.point-card h2,
.tension-line{
  text-shadow:0 12px 34px rgba(0,0,0,.28) !important;
}

.lead,
.point-card p,
.form-intro p,
.qualify-list li{
  color:rgba(233,238,246,.91) !important;
}

@media (max-width: 640px){
  .bg-video{
    opacity:.66 !important;
    filter:saturate(1.10) contrast(1.06) brightness(.86) !important;
  }
  .bg-overlay{
    background:linear-gradient(180deg, rgba(5,8,22,.28), rgba(7,18,34,.30) 42%, rgba(5,8,22,.52)) !important;
  }
}


/* =========================================================
   V4 — CARD BLU SEMITRASPARENTE SUL TESTO HERO
   Serve a proteggere il titolo quando lo sfondo è molto visibile.
========================================================= */

.hero-copy{
  position: relative !important;
  padding: clamp(24px, 3.6vw, 42px) !important;
  border-radius: 30px !important;
  background:
    linear-gradient(180deg, rgba(6,18,34,.68), rgba(5,10,24,.54)) !important;
  border: 1px solid rgba(233,238,246,.18) !important;
  box-shadow:
    0 28px 80px rgba(0,0,0,.30),
    inset 0 1px 0 rgba(255,255,255,.08) !important;
  backdrop-filter: blur(9px) saturate(1.08) !important;
  -webkit-backdrop-filter: blur(9px) saturate(1.08) !important;
  overflow: hidden !important;
}

.hero-copy::before{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  pointer-events:none !important;
  background:
    radial-gradient(circle at 18% 0%, rgba(42,121,197,.18), transparent 42%),
    linear-gradient(90deg, rgba(5,8,22,.20), transparent 58%) !important;
  z-index:0 !important;
}

.hero-copy > *{
  position: relative !important;
  z-index:1 !important;
}

/* Titolo più inciso sulla card, senza tornare a una cappa scura globale */
.hero-copy h1{
  text-shadow:
    0 2px 0 rgba(0,0,0,.22),
    0 14px 36px rgba(0,0,0,.50) !important;
}

.hero-copy .lead{
  color: rgba(233,238,246,.92) !important;
  text-shadow: 0 8px 22px rgba(0,0,0,.34) !important;
}

.hero-copy .micro-note{
  color: rgba(233,238,246,.80) !important;
}

@media (max-width: 980px){
  .hero-copy{
    padding: clamp(22px, 5vw, 34px) !important;
    border-radius: 24px !important;
  }
}

@media (max-width: 640px){
  .hero-copy{
    padding: 20px 18px !important;
    background:
      linear-gradient(180deg, rgba(6,18,34,.74), rgba(5,10,24,.62)) !important;
  }
}