/* ============================================================
   convert.css — conversion / persuasion animations
   Subtle base motion, bold CTA. Respects reduced-motion.
   ============================================================ */

/* ---------- Scroll reveal (fade-up) ---------- */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); will-change: opacity, transform; }
.reveal.in { opacity: 1; transform: none; }
.reveal.d1 { transition-delay: .08s; }
.reveal.d2 { transition-delay: .16s; }
.reveal.d3 { transition-delay: .24s; }

/* ---------- Price card feature ticks stagger ---------- */
.price-card li { opacity: 0; transform: translateX(-8px); transition: opacity .45s ease, transform .45s ease; }
.price-card.in li { opacity: 1; transform: none; }
.price-card.in li:nth-child(1){transition-delay:.10s}
.price-card.in li:nth-child(2){transition-delay:.17s}
.price-card.in li:nth-child(3){transition-delay:.24s}
.price-card.in li:nth-child(4){transition-delay:.31s}
.price-card.in li:nth-child(5){transition-delay:.38s}
.price-card.in li:nth-child(6){transition-delay:.45s}
.price-card.in li:nth-child(7){transition-delay:.52s}
.price-card.in li:nth-child(8){transition-delay:.59s}
.price-card.in li:nth-child(9){transition-delay:.66s}
.price-card.in li::before { transform: scale(0); transition: transform .35s cubic-bezier(.34,1.56,.64,1); }
.price-card.in li:nth-child(1)::before{transition-delay:.14s}
.price-card.in li:nth-child(2)::before{transition-delay:.21s}
.price-card.in li:nth-child(3)::before{transition-delay:.28s}
.price-card.in li:nth-child(4)::before{transition-delay:.35s}
.price-card.in li:nth-child(5)::before{transition-delay:.42s}
.price-card.in li:nth-child(6)::before{transition-delay:.49s}
.price-card.in li:nth-child(7)::before{transition-delay:.56s}
.price-card.in li:nth-child(8)::before{transition-delay:.63s}
.price-card.in li:nth-child(9)::before{transition-delay:.70s}
.price-card.in li::before { transform: scale(1); }

/* ---------- Card hover lift (stronger than base) ---------- */
.price-card { transition: transform .25s ease, box-shadow .25s ease; }
.price-card:hover { transform: translateY(-8px); box-shadow: 0 22px 50px rgba(15,23,42,.16); }

/* ---------- Featured card: gentle float + flowing gradient border + glow ---------- */
@keyframes floaty { 0%,100%{ transform: translateY(0) } 50%{ transform: translateY(-10px) } }
@keyframes glowPulse {
  0%,100%{ box-shadow:0 0 0 2px #2563eb, 0 12px 34px rgba(37,99,235,.30) }
  50%{ box-shadow:0 0 0 2px #22d3ee, 0 18px 48px rgba(34,211,238,.48) }
}
/* "coming out of the screen" — fast scale-up pulse + swelling glow */
@keyframes popOut {
  0%,100%{ transform: scale(1); box-shadow:0 0 0 2px #2563eb, 0 14px 34px rgba(37,99,235,.35); }
  50%{ transform: scale(1.07); box-shadow:0 0 0 3px #22d3ee, 0 34px 80px rgba(37,99,235,.68); }
}
.price-card.featured { animation: popOut .7s ease-in-out infinite; overflow: visible; position: relative; z-index: 3; transform-origin: center; }
.price-card.featured:hover { animation-play-state: paused; }

/* ---------- Badge pulse ---------- */
@keyframes badgePulse { 0%,100%{ transform: translateX(-50%) scale(1); box-shadow:0 0 0 0 rgba(37,99,235,.45) } 50%{ transform: translateX(-50%) scale(1.06); box-shadow:0 0 0 10px rgba(37,99,235,0) } }
.price-card .badge { animation: badgePulse 2.2s ease-in-out infinite; }

/* ---------- Old price + save badge ---------- */
.price-card .old-price { display:block; color:#94a3b8; text-decoration: line-through; font-weight:700; font-size:1.15rem; margin-top:6px; }
.save-badge {
  display:inline-block; background:#dcfce7; color:#15803d; font-weight:800; font-size:.8rem;
  padding:4px 12px; border-radius:999px; margin:6px 0 2px;
  opacity:0; transform: scale(.6); transition: opacity .4s ease, transform .45s cubic-bezier(.34,1.56,.64,1);
}
.price-card.in .save-badge { opacity:1; transform: scale(1); transition-delay:.55s; }

/* ---------- Button shine sweep (bold CTA) ---------- */
.btn { position: relative; overflow: hidden; }
.btn::after {
  content:""; position:absolute; top:0; left:-140%; width:60%; height:100%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,.55), transparent);
  transform: skewX(-20deg); pointer-events:none;
}
.btn:hover::after { animation: shine .8s ease; }
@keyframes shine { to { left:140%; } }
/* auto-pulse on the main solid buttons to catch the eye */
@keyframes ctaPulse { 0%,100%{ box-shadow:0 6px 18px rgba(37,99,235,.35) } 50%{ box-shadow:0 10px 28px rgba(37,99,235,.6) } }
.btn:not(.ghost):not(.wa).cta-pulse { animation: ctaPulse 2s ease-in-out infinite; }
.btn:not(.ghost):not(.wa).cta-pulse:hover { animation: none; }

/* ---------- Promo countdown bar ---------- */
.promo-bar {
  background: linear-gradient(90deg,#111827,#1e3a8a,#111827); color:#fff; text-align:center;
  font-size:.92rem; font-weight:600; padding:9px 14px; letter-spacing:.01em;
}
.promo-bar b { color:#fbbf24; }
.promo-bar .cd { display:inline-flex; gap:6px; margin-left:8px; vertical-align:middle; }
.promo-bar .cd span {
  background:rgba(255,255,255,.14); border-radius:6px; padding:2px 8px; font-variant-numeric:tabular-nums;
  font-weight:800; min-width:34px; display:inline-block;
}
.promo-bar .cd i{ font-style:normal; opacity:.6; padding:2px 0; }
.promo-bar a { color:#fbbf24; text-decoration:underline; font-weight:700; margin-left:8px; }

/* ---------- Slots-left bar ---------- */
.slots { max-width:520px; margin:22px auto 0; background:#fff; border:1px solid var(--line); border-radius:12px; padding:14px 18px; box-shadow:var(--shadow-sm); text-align:center; }
.slots .lbl { font-weight:700; color:var(--ink); font-size:.95rem; }
.slots .lbl b { color:#dc2626; }
.slots .track { height:9px; background:#f1f5f9; border-radius:999px; margin-top:10px; overflow:hidden; }
.slots .fill { height:100%; width:0; border-radius:999px; background:linear-gradient(90deg,#f59e0b,#dc2626); transition: width 1.4s cubic-bezier(.2,.7,.2,1); }

/* ---------- Count-up trust strip ---------- */
.trust-strip { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; text-align:center; }
.trust-strip .t { background:#fff; border:1px solid var(--line); border-radius:14px; padding:22px 14px; box-shadow:var(--shadow-sm); }
.trust-strip .num { font-size:2.1rem; font-weight:800; color:var(--brand); font-variant-numeric:tabular-nums; line-height:1; }
.trust-strip .cap { color:var(--body); font-size:.86rem; margin-top:6px; }
@media(max-width:760px){ .trust-strip{ grid-template-columns:1fr 1fr; } }

/* ---------- Guarantee seal ---------- */
.seal-row { display:flex; gap:16px; align-items:center; justify-content:center; flex-wrap:wrap; margin-top:8px; }
.seal { width:96px; height:96px; border-radius:999px; background:conic-gradient(from 0deg,#2563eb,#22d3ee,#6366f1,#2563eb); color:#fff; display:flex; align-items:center; justify-content:center; text-align:center; font-weight:800; font-size:.72rem; line-height:1.15; padding:10px; box-shadow:0 10px 24px rgba(37,99,235,.3); animation: spinSlow 14s linear infinite; }
.seal span{ background:#fff; color:var(--brand); width:74px;height:74px;border-radius:999px;display:flex;align-items:center;justify-content:center;padding:8px; }
@keyframes spinSlow { to { transform: rotate(360deg); } }

/* ---------- Social-proof toast ---------- */
.sp-toast {
  position:fixed; left:18px; bottom:18px; z-index:900; max-width:320px;
  background:#fff; border:1px solid var(--line); border-left:4px solid var(--success);
  border-radius:12px; box-shadow:0 14px 34px rgba(15,23,42,.18); padding:12px 14px;
  display:flex; gap:12px; align-items:center; transform:translateY(140%); opacity:0;
  transition: transform .5s cubic-bezier(.2,.7,.2,1), opacity .5s ease;
}
.sp-toast.show { transform:none; opacity:1; }
.sp-toast .ic { width:38px;height:38px;border-radius:999px;background:var(--brand-soft);color:var(--brand);display:flex;align-items:center;justify-content:center;font-size:1.1rem;flex:0 0 auto; }
.sp-toast .tx b{ color:var(--ink); font-size:.9rem; display:block; }
.sp-toast .tx small{ color:var(--body); font-size:.8rem; }
@media(max-width:520px){ .sp-toast{ left:10px; right:10px; max-width:none; } }

/* ---------- Confetti canvas ---------- */
#confetti-c { position:fixed; inset:0; pointer-events:none; z-index:1000; }

/* ---------- Reduced motion: turn it all off ---------- */
@media (prefers-reduced-motion: reduce) {
  .reveal, .price-card li, .price-card li::before, .save-badge { opacity:1 !important; transform:none !important; transition:none !important; }
  .price-card.featured, .price-card .badge, .seal, .btn.cta-pulse { animation:none !important; }
  .price-card.featured::after { display:none; }
  .sp-toast { display:none !important; }
}

/* ============================================================
   URGENCY PACK — energetic "it's about to end" animations
   ============================================================ */

/* Top promo bar: flashing (stays at very top; the bottom dock carries persistent urgency) */
@keyframes urgentFlash {
  0%,100%{ background: linear-gradient(90deg,#7f1d1d,#dc2626,#7f1d1d); }
  50%{ background: linear-gradient(90deg,#b91c1c,#ef4444,#b91c1c); }
}
.promo-bar.urgent { animation: urgentFlash 1s steps(1,end) infinite; }
.promo-bar.urgent b, .promo-bar.urgent a { color:#fff700; }
.promo-bar .lbl-hurry { display:inline-block; font-weight:800; color:#fde047; margin-right:6px; animation: blink 1s steps(1,end) infinite; }
@keyframes blink { 0%,49%{opacity:1} 50%,100%{opacity:.15} }

/* Countdown digit bounce on each tick */
@keyframes digitPop { 0%{ transform:scale(1.4); background:#ef4444 } 100%{ transform:scale(1); } }
.promo-bar .cd span.pop { animation: digitPop .5s ease; }
.promo-bar.urgent .cd span { background: rgba(255,255,255,.22); }

/* Bottom sticky urgency dock — always visible */
.urgency-dock {
  position: fixed; left:50%; transform: translateX(-50%) translateY(140%);
  bottom: 16px; z-index:940; display:flex; align-items:center; gap:14px;
  background: linear-gradient(90deg,#111827,#7f1d1d); color:#fff;
  padding:12px 20px; border-radius:999px; box-shadow:0 16px 40px rgba(220,38,38,.45);
  border:1px solid rgba(255,255,255,.15); font-weight:700; font-size:.95rem;
  transition: transform .6s cubic-bezier(.2,.9,.2,1); max-width:94vw;
  animation: dockPulse .6s ease-in-out infinite;
}
.urgency-dock.show { transform: translateX(-50%) translateY(0); }
@keyframes dockPulse {
  0%,100%{ box-shadow:0 10px 26px rgba(220,38,38,.4); outline:0 solid rgba(239,68,68,.0); }
  50%{ box-shadow:0 22px 60px rgba(220,38,38,.95); outline:3px solid rgba(239,68,68,.55); outline-offset:3px; }
}
.urgency-dock .flame { font-size:1.3rem; animation: wobble .45s ease-in-out infinite; }
@keyframes wobble { 0%,100%{ transform:rotate(-12deg) scale(1) } 50%{ transform:rotate(12deg) scale(1.25) } }
.urgency-dock .dock-cd { animation: cdFlash .6s steps(1,end) infinite; }
@keyframes cdFlash { 0%,49%{ background:rgba(255,255,255,.16); color:#fff700 } 50%,100%{ background:rgba(255,255,255,.30); color:#fff } }
.urgency-dock .dock-cd { font-variant-numeric:tabular-nums; background:rgba(255,255,255,.16); padding:4px 12px; border-radius:999px; color:#fff700; font-weight:800; letter-spacing:.02em; min-width:104px; text-align:center; }
.urgency-dock a { background:#fff; color:#dc2626; padding:8px 18px; border-radius:999px; font-weight:800; white-space:nowrap; }
.urgency-dock a:hover { background:#fff700; }
.urgency-dock .x { cursor:pointer; opacity:.6; font-weight:700; padding:0 2px; }
.urgency-dock .x:hover{ opacity:1; }
@media(max-width:560px){ .urgency-dock{ font-size:.82rem; padding:10px 14px; gap:9px; } .urgency-dock .dock-cd{ min-width:88px; padding:4px 8px; } }

/* Slots bar: urgent flashing */
.slots.urgent { border-color:#fca5a5; animation: slotFlash 1.3s ease-in-out infinite; }
@keyframes slotFlash { 0%,100%{ box-shadow:0 0 0 0 rgba(220,38,38,.0); } 50%{ box-shadow:0 0 0 6px rgba(220,38,38,.16); } }
.slots.urgent .lbl b { animation: blink 1.1s steps(1,end) infinite; }
.slots .fill { position:relative; }
.slots.urgent .fill { background:linear-gradient(90deg,#ef4444,#b91c1c); }

/* CTA button: energetic pulse + periodic attention shake */
@keyframes ctaShake { 0%,88%,100%{ transform:none } 90%{ transform:translateX(-2px) rotate(-.6deg) } 92%{ transform:translateX(2px) rotate(.6deg) } 94%{ transform:translateX(-2px) } 96%{ transform:translateX(2px) } }
.btn:not(.ghost):not(.wa).cta-pulse { animation: ctaPulse 1.3s ease-in-out infinite, ctaShake 3.2s ease-in-out infinite; }
.btn:not(.ghost):not(.wa).cta-pulse:hover { animation:none; }

/* "Most Popular" badge — faster, punchier */
.price-card .badge { animation: badgePulse 1.3s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce){
  .promo-bar.urgent, .promo-bar .lbl-hurry, .urgency-dock, .urgency-dock .flame, .slots.urgent, .btn.cta-pulse { animation:none !important; }
  .urgency-dock{ display:none !important; }
}

/* ============================================================
   SALES BOOSTERS — live viewers, value stack, exit-intent, etc.
   ============================================================ */
.live-row{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-bottom:24px; }
.live-pill{ background:#fff; border:1px solid var(--line); border-radius:999px; padding:8px 16px; font-weight:600; font-size:.9rem; color:var(--ink); box-shadow:var(--shadow-sm); display:inline-flex; align-items:center; gap:8px; }
.live-pill .dot{ width:9px;height:9px;border-radius:50%; background:#22c55e; }
.live-pill .dot{ animation: livePulse 1.4s infinite; }
@keyframes livePulse{ 0%{box-shadow:0 0 0 0 rgba(34,197,94,.55)} 70%{box-shadow:0 0 0 8px rgba(34,197,94,0)} 100%{box-shadow:0 0 0 0 rgba(34,197,94,0)} }
.live-pill.green{ color:#15803d; }
.live-pill b{ color:inherit; }

.cmp-line{ text-align:center; margin-top:22px; font-size:1.02rem; color:var(--ink); font-weight:600; }
.cmp-line s{ color:#94a3b8; } .cmp-line b{ color:#dc2626; }

.value-strip{ max-width:720px; margin:18px auto 0; background:linear-gradient(120deg,#eff6ff,#f0fdf4); border:1px dashed #86efac; border-radius:14px; padding:16px 20px; text-align:center; }
.value-strip .vs-head{ font-weight:800; color:var(--ink); margin-bottom:6px; }
.value-strip .vs-items{ display:flex; gap:10px 20px; flex-wrap:wrap; justify-content:center; font-size:.9rem; color:var(--body); }
.value-strip .vs-items span b{ color:#15803d; }
.value-strip .vs-total{ margin-top:10px; font-weight:800; color:#dc2626; font-size:1.02rem; }
.value-strip .vs-total s{ color:#94a3b8; font-weight:700; }

.selling-fast{ position:absolute; top:16px; right:-6px; background:#dc2626; color:#fff; font-weight:800; font-size:.72rem; padding:5px 12px; border-radius:6px 0 0 6px; box-shadow:0 6px 14px rgba(220,38,38,.4); animation: blink 1.4s steps(1,end) infinite; z-index:3; }
.guarantee-inline{ margin-top:10px; font-size:.82rem; color:#15803d; font-weight:700; }

/* Exit-intent modal */
.exit-ov{ position:fixed; inset:0; background:rgba(15,23,42,.62); z-index:1200; display:flex; align-items:center; justify-content:center; opacity:0; pointer-events:none; transition:opacity .3s; padding:20px; }
.exit-ov.show{ opacity:1; pointer-events:auto; }
.exit-modal{ background:#fff; border-radius:20px; max-width:460px; width:100%; padding:38px 30px 30px; text-align:center; transform:scale(.82); transition:transform .4s cubic-bezier(.34,1.56,.64,1); position:relative; box-shadow:0 30px 80px rgba(0,0,0,.4); }
.exit-ov.show .exit-modal{ transform:scale(1); }
.exit-modal .em-x{ position:absolute; top:10px; right:16px; cursor:pointer; font-size:1.4rem; color:#94a3b8; line-height:1; }
.exit-modal .em-x:hover{ color:var(--ink); }
.exit-modal h2{ font-size:1.7rem; margin:6px 0 8px; }
.exit-modal .big{ color:#dc2626; }
.exit-modal p{ color:var(--body); margin-bottom:6px; }
.exit-modal .em-timer{ font-weight:800; color:#dc2626; font-size:1.05rem; margin:12px 0 18px; font-variant-numeric:tabular-nums; }
.exit-modal .btn{ width:100%; box-sizing:border-box; }
.exit-modal small{ display:block; margin-top:14px; color:#94a3b8; }
.exit-modal small b{ color:var(--ink); letter-spacing:.06em; }

@media (prefers-reduced-motion: reduce){
  .live-pill .dot, .selling-fast { animation:none !important; }
}

/* ---------- Card photo band (services etc.) ---------- */
.card .card-photo{ width:100%; height:158px; border-radius:11px; background:#e8eefb; background-size:cover; background-position:center; margin-bottom:16px; }

/* ---------- Testimonial avatar photos ---------- */
.quote .avatar.photo{ background-size:cover; background-position:center 22%; color:transparent; font-size:0; }

/* ---------- Live-row liveliness (non-pulse motion) ---------- */
@keyframes bob { 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-5px) } }
.live-row .live-pill{ animation: bob 3.2s ease-in-out infinite; position:relative; overflow:hidden; }
.live-row .live-pill:nth-child(2){ animation-delay:1.4s; }
.live-row .live-pill::after{ content:""; position:absolute; top:0; left:-150%; width:55%; height:100%; background:linear-gradient(120deg,transparent,rgba(255,255,255,.65),transparent); transform:skewX(-20deg); pointer-events:none; animation: pillShine 4.5s ease-in-out infinite; }
.live-row .live-pill:nth-child(2)::after{ animation-delay:2.2s; }
@keyframes pillShine{ 0%,72%{ left:-150% } 88%,100%{ left:165% } }
.live-pill b{ display:inline-block; }
@keyframes numRoll { 0%{ transform:translateY(-80%); opacity:0 } 60%{ transform:translateY(8%); opacity:1 } 100%{ transform:translateY(0) } }
.live-pill b.bump{ animation: numRoll .45s cubic-bezier(.34,1.56,.64,1); }
@media (prefers-reduced-motion: reduce){ .live-row .live-pill, .live-row .live-pill::after, .live-pill b.bump{ animation:none !important; } }

/* ---------- Mobile: compact urgency dock, no wrapping ---------- */
@media (max-width:560px){
  .urgency-dock{ left:8px; right:8px; transform:translateY(180%); gap:8px; padding:8px 10px; font-size:.82rem; white-space:nowrap; justify-content:center; border-radius:14px; }
  .urgency-dock.show{ transform:translateY(0); }
  .urgency-dock .dock-lbl{ display:none; }               /* drop the wordy text */
  .urgency-dock .flame{ font-size:1.1rem; }
  .urgency-dock .dock-cd{ min-width:auto; padding:4px 8px; }
  .urgency-dock a{ padding:7px 12px; font-size:.82rem; }
  .sp-toast{ display:none; }                              /* declutter: hide popups on small screens */
}

/* ---------- Mobile: keep WhatsApp button above the urgency dock ---------- */
@media (max-width:560px){
  .wa-float{ bottom:86px !important; z-index:945; }
}

/* ---------- Mobile floating action buttons: call (left) + WhatsApp (right), fast pulse ---------- */
.call-float{ display:none; }
@keyframes fabPulseB { 0%{ transform:scale(1); box-shadow:0 6px 18px rgba(0,0,0,.28), 0 0 0 0 rgba(37,99,235,.55) } 70%{ transform:scale(1.1); box-shadow:0 6px 18px rgba(0,0,0,.28), 0 0 0 14px rgba(37,99,235,0) } 100%{ transform:scale(1); box-shadow:0 6px 18px rgba(0,0,0,.28), 0 0 0 0 rgba(37,99,235,0) } }
@keyframes fabPulseG { 0%{ transform:scale(1); box-shadow:0 6px 18px rgba(0,0,0,.28), 0 0 0 0 rgba(37,211,102,.6) } 70%{ transform:scale(1.1); box-shadow:0 6px 18px rgba(0,0,0,.28), 0 0 0 14px rgba(37,211,102,0) } 100%{ transform:scale(1); box-shadow:0 6px 18px rgba(0,0,0,.28), 0 0 0 0 rgba(37,211,102,0) } }
@media (max-width:560px){
  .call-float{
    display:flex; position:fixed; bottom:86px; left:16px; z-index:945;
    width:54px; height:54px; border-radius:999px; background:#2563eb; color:#fff;
    align-items:center; justify-content:center; font-size:1.45rem; text-decoration:none;
    animation: fabPulseB .85s ease-in-out infinite;
  }
  .wa-float{ animation: fabPulseG .85s ease-in-out infinite; }
}
@media (prefers-reduced-motion: reduce){ .call-float, .wa-float{ animation:none !important; } }

/* ---------- Nav hover highlight (rounded square behind each item) ---------- */
.nav-links{ gap:4px; }
.nav-links a{ padding:12px 22px; border-radius:16px; transition:background .35s ease .08s, color .35s ease .08s; }
.nav-links a:hover{ background:var(--brand-soft); color:var(--brand); text-decoration:none; }

/* ---------- Logo wordmark: "Kruz" + "bit" together, two colors ---------- */
.logo .logo-text{ letter-spacing:-.02em; }
.site-header .logo .logo-text{ color:#000; }      /* Kruz black on the white header */
.site-footer .logo .logo-text{ color:#fff; }      /* Kruz white on the dark footer */
.logo .logo-text span{ color:var(--brand); }      /* bit stays blue everywhere */