/* pushule_cta.css */
/* CTA wrapper */
.pushule-cta{ margin:1.6rem 0; }
.pushule-cta__frame{
  border:3px solid #ff6b6b;
  background:#fff5f5;
  border-radius:16px;
  overflow:hidden;
}
.pushule-cta__inner{ padding:1rem 1.1rem; }

/* Title SVG (only the Pushule title svg) */
.pushule-cta .pushule-title-svg{
  width:100%;
  max-width:700px;
  margin:0 auto .5rem;
  display:block;
}
.pushule-cta .service-title-text{
  font-size:clamp(3rem, 5vw, 3rem);
  font-weight:700;
}

/* Copy */
.pushule-cta__text{
  margin:0;
  font-size:1.25rem;
  line-height:1.75;
}

/* LP-like highlight for bold words inside CTA copy */
.pushule-cta__text b{
  font-weight:700;
  color:#0175d8;
  background:linear-gradient(to bottom, transparent 65%, yellow 50%);
  padding:0 .15em;
}

/* Button */
.pushule-cta__actions{
  display:flex;
  justify-content:center;
  gap:.7rem;
  flex-wrap:wrap;
  margin-top:1rem;
}
.pushule-cta__btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  font-weight:800;
  border-radius:999px;
  padding:.75rem 1.2rem;
  font-size:1rem;
  border:2px solid transparent;
}
.pushule-cta__btn--primary{ background:#ff6b6b; color:#fff; }
.pushule-cta__btn--primary:hover{ filter:brightness(.95); }

/* Scrolling phone icons (scoped to CTA only) */
.pushule-cta .scroll-row{
  overflow:hidden;
  width:100%;
  padding:8px 10px;
  background:#fff;
  border-top:1px solid rgba(0,0,0,.06);
  border-bottom:1px solid rgba(0,0,0,.06);
  line-height:0;
}
.pushule-cta .scroll-track{
  display:flex;
  gap:10px;
  width:max-content;
  animation:scroll-left 4s linear infinite;
  will-change:transform;
}
.pushule-cta .scroll-track.reverse{
  animation:scroll-right 4s linear infinite;
}

.pushule-cta .phone-icon{
  width:3rem;
  height:3rem;
  flex:0 0 auto;
  opacity:.7;
}

/* Main image */
.pushule-cta .main-image{
  width:100%;
  margin:0;
  padding:.6rem 0;
  line-height:0;
}
.pushule-cta .main-image__grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
  gap:clamp(1.2rem, 4vw, 2.4rem);
  max-width:900px;
  margin:0 auto;
  padding:.4rem 1.2rem;
}
.pushule-cta .main-image__card{
  position:relative;
  border-radius:14px;
  overflow:hidden;
  box-shadow:0 10px 22px -10px rgba(0,0,0,.25), 0 2px 6px rgba(0,0,0,.06);
  animation:pushule-float 5s ease-in-out infinite;
  transition:transform .3s ease, box-shadow .3s ease;
  isolation:isolate;
}
.pushule-cta .main-image__card--a{ animation-delay:0s; }
.pushule-cta .main-image__card--b{ animation-delay:-2.5s; }
.pushule-cta .main-image__card:hover{
  transform:translateY(-6px) scale(1.02);
  box-shadow:0 18px 30px -10px rgba(0,0,0,.3), 0 4px 10px rgba(0,0,0,.08);
}
.pushule-cta .main-image__card svg.scene{
  width:100%;
  height:auto;
  display:block;
  margin:0;
}

/* Diagonal light sweep passing over each card */
.pushule-cta .main-image__card::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(115deg, transparent 35%, rgba(255,255,255,.35) 48%, transparent 60%);
  transform:translateX(-120%);
  animation:pushule-sweep 6s ease-in-out infinite;
  pointer-events:none;
  z-index:2;
}
.pushule-cta .main-image__card--a::after{ animation-delay:.6s; }
.pushule-cta .main-image__card--b::after{ animation-delay:2.6s; }

/* --- Illustration internals (SVG scenes) --- */
.pushule-cta .scene .cloud{
  animation:pushule-cloud 13s ease-in-out infinite alternate;
  transform-box:fill-box;
  transform-origin:center;
}
.pushule-cta .scene .cloud--2{ animation-duration:16s; animation-delay:-4s; }

.pushule-cta .scene .figure{
  animation:pushule-figure-bob 4.6s ease-in-out infinite;
  transform-box:fill-box;
  transform-origin:center bottom;
}
.pushule-cta .scene .figure--w2,
.pushule-cta .scene .figure--s2{ animation-delay:-1.1s; }
.pushule-cta .scene .figure--w3,
.pushule-cta .scene .figure--s3{ animation-delay:-2.3s; }
.pushule-cta .scene .figure--admin,
.pushule-cta .scene .figure--manager{ animation-delay:-3.4s; animation-duration:5.4s; }

.pushule-cta .scene .bubble{
  animation:pushule-bubble-bounce 2.6s ease-in-out infinite;
  transform-box:fill-box;
  transform-origin:center;
}
.pushule-cta .scene .bubble-arrow{
  animation:pushule-arrow-pulse 2.6s ease-in-out infinite;
  transform-box:fill-box;
  transform-origin:center;
}

.pushule-cta .scene .calendar-cell{ fill:#EDE7DA; }
.pushule-cta .scene .calendar-cell--open{ fill:#BFDCC2; }
.pushule-cta .scene .calendar-cell--busy{ fill:#E7B3AC; }
.pushule-cta .scene .calendar-cell--live-a{ animation-name:pushule-cell-cycle-a; animation-timing-function:ease-in-out; animation-iteration-count:infinite; }
.pushule-cta .scene .calendar-cell--live-b{ animation-name:pushule-cell-cycle-b; animation-timing-function:ease-in-out; animation-iteration-count:infinite; }
.pushule-cta .scene .calendar-cell--live-c{ animation-name:pushule-cell-cycle-c; animation-timing-function:ease-in-out; animation-iteration-count:infinite; }

/* Animations */
@keyframes scroll-left{
  from{ transform:translateX(0); }
  to{ transform:translateX(-50%); }
}
@keyframes scroll-right{
  from{ transform:translateX(-50%); }
  to{ transform:translateX(0); }
}
@keyframes pushule-float{
  0%, 100%{ transform:translateY(0) rotate(0deg); }
  50%{ transform:translateY(-10px) rotate(-.6deg); }
}
@keyframes pushule-sweep{
  0%, 40%{ transform:translateX(-120%); }
  60%, 100%{ transform:translateX(120%); }
}
@keyframes pushule-cloud{
  from{ transform:translateX(0); }
  to{ transform:translateX(14px); }
}
@keyframes pushule-figure-bob{
  0%, 100%{ transform:translateY(0); }
  50%{ transform:translateY(-4px); }
}
@keyframes pushule-bubble-bounce{
  0%, 100%{ transform:translateY(0) scale(1); }
  30%{ transform:translateY(-7px) scale(1.05); }
  50%{ transform:translateY(0) scale(1); }
}
@keyframes pushule-arrow-pulse{
  0%, 100%{ opacity:.55; transform:translateY(0); }
  50%{ opacity:1; transform:translateY(3px); }
}
@keyframes pushule-cell-cycle-a{
  0%, 100%{ fill:#EDE7DA; }
  40%, 60%{ fill:#BFDCC2; }
}
@keyframes pushule-cell-cycle-b{
  0%, 100%{ fill:#EDE7DA; }
  40%, 60%{ fill:#E7B3AC; }
}
@keyframes pushule-cell-cycle-c{
  0%, 100%{ fill:#EDE7DA; }
  35%{ fill:#BFDCC2; }
  65%{ fill:#E7B3AC; }
}
/* Responsive */
@media (max-width:768px){
  .pushule-cta__inner{ padding:.9rem; }
  .pushule-cta__btn{ width:100%; }
}