/* ===== ClickSambo · Homepage closing CTA (scoped: .ccta) ===== */
.ccta{
  --ccta-navy:#1C2841; --ccta-orange:#F94C10; --ccta-orange-d:#D93D08; --ccta-green:#22B573;
  --ccta-cream:#FFF1E9; --ccta-r:20px;
  background:transparent; color:#fff;
  font-family:"Nunito",-apple-system,"Segoe UI",Roboto,sans-serif;
  font-size:16px; line-height:1.7; -webkit-font-smoothing:antialiased; padding:82px 0;
}
.ccta.ccta--cream{background:var(--ccta-cream)}
.ccta *,.ccta *::before,.ccta *::after{box-sizing:border-box}
/* layout.css sets a global font-family on elements; keep the design font */
.ccta *{font-family:inherit}
/* width comes from the site .container */
.ccta-card{position:relative; overflow:hidden; isolation:isolate; background:var(--ccta-navy); border-radius:var(--ccta-r);
  padding:56px; display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:48px; align-items:center}
.ccta-card::before,.ccta-card::after{content:""; position:absolute; border-radius:50%; z-index:-1}
.ccta-card::before{width:420px; height:420px; right:-140px; top:-180px; background:rgba(249,76,16,.08)}
.ccta-card::after{width:260px; height:260px; left:-110px; bottom:-150px; background:rgba(255,255,255,.05)}
.ccta h2{margin:0; font-size:clamp(28px,3.4vw,40px); line-height:1.15; font-weight:800; letter-spacing:-.015em; color:#fff; max-width:20ch}
.ccta-lede{margin:16px 0 0; color:#B9C2D2; font-size:17px; line-height:1.7; max-width:52ch}
.ccta-actions{margin-top:30px; display:flex; flex-wrap:wrap; gap:12px}
.ccta-btn{display:inline-flex; align-items:center; justify-content:center; gap:9px; min-height:52px; padding:14px 28px; border-radius:10px; font-size:16px; font-weight:800; text-decoration:none; transition:background .15s ease, color .15s ease, transform .15s ease}
.ccta-btn svg{width:18px; height:18px}
.ccta-btn.p{background:var(--ccta-orange); color:#fff}
.ccta-btn.p:hover{background:var(--ccta-orange-d); transform:translateY(-1px)}
.ccta-btn.g{background:transparent; color:#fff; border:1.6px solid rgba(255,255,255,.45)}
.ccta-btn.g:hover{background:#fff; color:var(--ccta-navy)}
.ccta-trust{list-style:none; margin:26px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:10px 22px}
.ccta-trust li{display:inline-flex; align-items:center; gap:8px; font-size:14px; font-weight:700; color:#D5DCE8}
.ccta-trust svg{width:17px; height:17px; color:#FFB08F; flex:none}

.ccta-box{background:rgba(34,181,115,.12); border:1px solid rgba(34,181,115,.35); border-radius:18px; padding:26px}
.ccta-box h3{margin:0 0 18px; font-size:19px; line-height:1.3; font-weight:800; color:#fff}
.ccta-steps{list-style:none; margin:0; padding:0; display:grid; gap:18px}
.ccta-steps li{position:relative; display:grid; grid-template-columns:34px minmax(0,1fr); gap:14px; align-items:start}
.ccta-steps li:not(:last-child)::before{content:""; position:absolute; left:16px; top:38px; bottom:-14px; width:2px; background:rgba(34,181,115,.35)}
.ccta-n{width:34px; height:34px; border-radius:50%; background:#fff; color:var(--ccta-navy); font-size:15px; font-weight:800; display:grid; place-items:center}
.ccta-steps li:last-child .ccta-n{background:var(--ccta-green); color:#fff}
.ccta-steps li:last-child .ccta-n svg{width:17px; height:17px}
.ccta-steps b{display:block; font-size:16px; font-weight:800; line-height:1.35; color:#fff; padding-top:5px}
.ccta-steps div > span{display:block; margin-top:2px; font-size:14.5px; line-height:1.55; color:#B9C2D2}
.ccta a:focus-visible{outline:2px solid #FFB08F; outline-offset:3px; border-radius:10px}

@media (max-width:940px){
  .ccta-card{grid-template-columns:minmax(0,1fr); gap:34px; padding:42px 32px}
  .ccta h2{max-width:none}
}
@media (max-width:640px){
  .ccta{padding:64px 0}
  .ccta-card{padding:32px 20px}
  .ccta-btn{width:100%}
  .ccta-box{padding:22px 18px}
}
@media (prefers-reduced-motion:reduce){.ccta *{transition:none !important}}