/* =====================================================
VL24 CTA — FINAL 2026
Organic / Curved / Premium Surface
Matches VL24 design system
===================================================== */


/* =========================
SECTION BASE
========================= */

.cta{
  position:relative;
  padding:180px 0;
  overflow:hidden;

  /* ⭐ light premium surface */
  background:
    radial-gradient(circle at 20% 10%, rgba(212,225,87,.12), transparent 40%),
    radial-gradient(circle at 90% 90%, rgba(212,225,87,.08), transparent 50%),
    linear-gradient(180deg,#f6f7f8,#eef1f3);
}


/* =========================
ORGANIC CURVED LINES
(important — match site)
========================= */

.cta::before{
  content:"";
  position:absolute;
  inset:-40%;

  background:
    radial-gradient(circle at center,
      transparent 58%,
      rgba(0,0,0,.04) 59%,
      transparent 60%
    );

  background-size:900px 900px;

  opacity:.5;
  pointer-events:none;
}


/* =========================
SOFT BRAND GLOW BLOBS
========================= */

.cta::after{
  content:"";
  position:absolute;
  inset:0;

  background:
    radial-gradient(circle at 70% 30%, rgba(212,225,87,.18), transparent 40%),
    radial-gradient(circle at 30% 80%, rgba(212,225,87,.15), transparent 50%);

  filter:blur(60px);
  pointer-events:none;
}


/* =========================
CONTENT WRAP
========================= */

.cta-inner{
  position:relative;
  z-index:5;

  max-width:900px;
  margin:0 auto;
  text-align:center;

  padding:100px 80px;
  border-radius:40px;

  /* ⭐ parem läbipaistvus */
  background:rgba(255,255,255,.55);

  backdrop-filter:blur(2px);

  border:1px solid rgba(255,255,255,.35);

  box-shadow:
    0 40px 120px rgba(0,0,0,.08),
    inset 0 1px 0 rgba(255,255,255,.6);
}


/* =========================
TOP ACCENT LINE
========================= */

.cta-inner::before{
  content:"";
  position:absolute;
  top:0;
  left:50%;
  transform:translateX(-50%);

  width:90px;
  height:4px;
  border-radius:10px;

  background:var(--brand-primary);
}


/* =========================
TITLE
========================= */

.cta-inner h2{
  font-family:"Outfit",sans-serif;

  font-size:clamp(40px,5vw,72px);
  font-weight:600;
  letter-spacing:-0.03em;
  line-height:1.05;

  margin:0 0 16px;

  color:#111;
}


/* =========================
TEXT
========================= */

.cta-inner p{
  font-size:18px;
  line-height:1.6;
  max-width:640px;
  margin:0 auto 40px;

  color:#555;
}


/* =========================
BUTTON SPACING
========================= */

.btn-cta{
  margin-top:10px;
}


/* =========================
HOVER LIFT
========================= */

.cta-inner:hover{
  transform:translateY(-6px);
  transition:.4s ease;

  box-shadow:
    0 60px 160px rgba(0,0,0,.12);
}


/* =========================
MOBILE
========================= */

@media(max-width:768px){

  .cta{
    padding:120px 0;
  }

  .cta-inner{
    padding:60px 24px;
    border-radius:26px;
  }

  .cta-inner h2{
    font-size:34px;
  }

  .cta-inner p{
    font-size:16px;
  }

}

/* =========================================
   CTA — SHOW MY BACKGROUND IMAGE (OVERRIDE)
   (paste at the END of cta.css)
========================================= */

.cta{
  background: transparent !important;   /* võtab maha su gradient/taustad */
}

.cta::before,
.cta::after{
  content: none !important;             /* võtab maha ringjooned + glow */
}

.cta{
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

.cta-bg{
  position:absolute;
  inset:0;
  background-size:cover;
  background-position:center;
  z-index:1;
}

.cta-overlay{
  position:absolute;
  inset:0;
  z-index:2;
}

.cta-inner{
  position:relative;
  z-index:3;
}

/* CTA BUTTON CENTER */

.cta-inner .vl24-btn{
  display:inline-flex;
  margin:30px auto 0;
}

.cta-inner{
  text-align:center;
}

.cta{
  border-radius:0 0 60px 60px;
}

.cta{
  position:relative;
  z-index:1;
}

/* =========================
CTA BG EXTEND UNDER FOOTER
========================= */

.cta{
  position:relative;
  padding:120px 0 120px; /* ⭐ bottom padding suur */
  margin-bottom:-120px;  /* ⭐ tõmbab järgmise sektsiooni peale */
}