:root{
  --brand:#0568de;                 /* Your main color */
  --bg:#f7f9fc;                    /* Clean soft background */
  --g1:rgba(5,104,222,0.35);       /* Soft brand tint */
  --g2:rgba(132,182,255,0.33);     /* Light sky blend */
  --g3:#0598ff;     /* Airy ice pastel */
  --line:rgba(170,180,200,0.05);   /* Very soft grid */
}

/* Background Container */
.fluid-bg{
  position:fixed; inset:0;
  background:var(--bg);
  overflow:hidden;
  z-index:-9999;
  pointer-events:none;
}

/* Blobs (Organic Shapes) */
.blob{
  position:absolute;
  width:420px; height:420px;
  border-radius:50%;
  filter:blur(70px);
  opacity:.45;
  animation:blob-move 22s ease-in-out infinite;
  will-change:transform;
}

/* Blob placements */
.b1{ background:var(--g1); top:-12%; left:-12%; animation-delay:0s; }
.b2{ background:var(--g2); bottom:-14%; right:-10%; animation-delay:3s; }
.b3{ background:var(--g3); top:35%; left:42%; animation-delay:6s; } /* Desktop soft ambient fill */

/* Calmer, slower motion */
@keyframes blob-move{
  0%,100%{ transform:translateY(0) scale(1); }
  50%{ transform:translateY(-28px) scale(1.05); }
}

/* Subtle quiet grid */
.fluid-grid{
  position:absolute; inset:0;
  background:
    repeating-linear-gradient(0deg,transparent,transparent 85px,var(--line) 85px,var(--line) 86px),
    repeating-linear-gradient(90deg,transparent,transparent 85px,var(--line) 85px,var(--line) 86px);
  opacity:.35;
}

/* Decorative Images */
.bg-image-top{
  position:absolute;
  top:120px;  /* Moved further down - was 60px */
  right:0;
  width:280px;
  height:auto;
  opacity:0.32;
  pointer-events:none;
  z-index:-1;
  animation:floaty2 22s ease-in-out infinite;
}
/* Content */
.content-layer{
  position:relative; z-index:9;
  padding:90px 20px;
  text-align:center;
  font-family:Inter,Segoe UI,system-ui;
}
.content-layer h1{
  font-size:clamp(1.8rem,3vw,2.8rem);
  font-weight:700;
  background:linear-gradient(90deg,var(--brand),#5aa8ff);
  -webkit-background-clip:text;
  color:transparent;
  letter-spacing:-0.02em;
}
.content-layer p{
  color:#4b5563;
  max-width:650px;
  margin:8px auto 0;
  line-height:1.55;
  font-size:clamp(.95rem,1.2vw,1.1rem);
}

/* Smooth Mobile Performance */
@media(max-width:768px){
  .blob{ width:300px;height:300px;filter:blur(50px);opacity:.38; }
  .b3{ opacity:.25; }
}
@media(max-width:480px){
  .b3{ display:none; }            /* Keep only 2 blobs for silky smooth */
  .blob{ filter:blur(38px); }
  .content-layer{ padding:70px 18px; }
}

/* Reduced Motion */
@media(prefers-reduced-motion:reduce){
  .blob{ animation:none !important; }
}