/* RealtyForecaster Visual Backgrounds Header-Ready CSS
   Upload to: /public_html/assets/css/visual-backgrounds.css
*/

:root{
  --rf-dark:#071527;
  --rf-mid:#0b3156;
  --rf-teal:#35d0c8;
  --rf-green:#65f2aa;
  --rf-text:#e8f1f8;
}

.rf-hero-visual{
  position:relative;
  overflow:hidden;
  border-radius:34px;
  min-height:520px;
  display:flex;
  align-items:flex-end;
  padding:54px;
  background-color:#071527;
  background-size:cover;
  background-position:center center;
  box-shadow:0 28px 70px rgba(7,21,39,.18);
}

.rf-hero-visual::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(110deg, rgba(5,18,33,.84) 0%, rgba(7,21,39,.68) 36%, rgba(7,21,39,.18) 70%, rgba(255,255,255,0) 100%);
}

.rf-hero-visual::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at top right, rgba(101,242,170,.16), transparent 28%),
    radial-gradient(circle at top left, rgba(53,208,200,.16), transparent 30%);
  mix-blend-mode:screen;
  pointer-events:none;
}

.rf-hero-content{
  position:relative;
  z-index:2;
  max-width:780px;
  color:var(--rf-text);
}

.rf-hero-kicker{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 12px;
  border-radius:999px;
  background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.15);
  color:#bff9f6;
  font-size:13px;
  font-weight:900;
  letter-spacing:.04em;
  text-transform:uppercase;
}

.rf-hero-content h1{
  font-size:clamp(40px,5vw,76px);
  line-height:.95;
  letter-spacing:-2px;
  margin:16px 0 14px;
  color:#fff;
}

.rf-hero-content p{
  font-size:18px;
  line-height:1.65;
  color:#dcecf6;
  max-width:720px;
}

.rf-hero-actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:22px;
}

.rf-btn-hero{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:14px 20px;
  border-radius:999px;
  text-decoration:none !important;
  font-weight:900;
  line-height:1;
  transition:transform .15s ease, box-shadow .15s ease;
}

.rf-btn-hero.primary{
  background:linear-gradient(135deg,var(--rf-teal),var(--rf-green));
  color:#062033 !important;
  box-shadow:0 14px 35px rgba(53,208,200,.28);
}

.rf-btn-hero.secondary{
  background:rgba(255,255,255,.12);
  color:#fff !important;
  border:1px solid rgba(255,255,255,.18);
}

.rf-btn-hero:hover{transform:translateY(-1px)}

.rf-page-banner{
  position:relative;
  overflow:hidden;
  border-radius:28px;
  padding:38px;
  color:#fff;
  background-color:#071527;
  background-size:cover;
  background-position:center center;
  box-shadow:0 16px 40px rgba(7,21,39,.12);
}

.rf-page-banner::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(135deg, rgba(5,18,33,.86), rgba(11,49,86,.62) 58%, rgba(255,255,255,0) 100%);
}

.rf-page-banner > *{
  position:relative;
  z-index:2;
}

.rf-dashboard-shell{
  position:relative;
  overflow:hidden;
  border-radius:30px;
  background-image:
    linear-gradient(135deg, rgba(7,21,39,.92), rgba(11,49,86,.78) 54%, rgba(255,255,255,0) 100%),
    url('/assets/images/backgrounds/bg-dashboard-tech.jpg');
  background-size:cover;
  background-position:center center;
  color:#fff;
  box-shadow:0 22px 56px rgba(7,21,39,.16);
}

.rf-dashboard-shell .rf-dashboard-content{
  padding:34px;
}

.rf-home-hero{background-image:url('/assets/images/backgrounds/hero-waterfront.jpg')}
.rf-buyer-hero{background-image:url('/assets/images/backgrounds/hero-neighborhood.jpg')}
.rf-investor-hero{background-image:url('/assets/images/backgrounds/hero-city-growth.jpg')}
.rf-agent-hero{background-image:url('/assets/images/backgrounds/hero-agent-pro.jpg')}
.rf-generic-banner{background-image:url('/assets/images/backgrounds/bg-page-overlay.jpg')}

@media(max-width:900px){
  .rf-hero-visual{
    min-height:460px;
    padding:32px 24px;
  }
  .rf-page-banner{padding:28px 22px}
  .rf-dashboard-shell .rf-dashboard-content{padding:24px}
}