/* CAAC Go hero ad — styles
   640×640 base canvas, scaled to fit iframe via JS.
   Brand: #5090FF primary, #1A1A2E ink, Outfit display, Inter body. */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Outfit:wght@700;800&display=swap');

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root {
  --brand: #5090FF;
  --brand-light: #EDF3FF;
  --brand-dark: #3A6FD8;
  --ink: #1A1A2E;
  --ink-soft: #4B5563;
  --surface: #F7F9FC;
  --success: #47D7AC;
  --success-bg: #ECFDF5;
  --line: #E5E7EB;
  --radius: 16px;
}

.adv {
  position: relative;
  width: 640px; height: 640px;
  overflow: hidden;
  border-radius: 22px;
  background: linear-gradient(135deg, #EDF3FF 0%, #fff 40%, #F5F0FF 100%);
  font-family: 'Inter', system-ui, sans-serif;
  color: var(--ink);
}

/* ---- Logo "C" mark ---- */
.logo-c {
  display: grid; place-items: center;
  width: 36px; height: 36px;
  border-radius: 10px;
  background: var(--brand);
  color: #fff;
  font-family: 'Outfit', sans-serif;
  font-weight: 800;
  font-size: 18px;
  line-height: 1;
  flex-shrink: 0;
}
.logo-c.sm { width: 28px; height: 28px; font-size: 14px; border-radius: 8px; }
.logo-c.lg { width: 56px; height: 56px; font-size: 28px; border-radius: 14px; }

/* ---- Beats ---- */
.beat {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  flex-direction: column;
  opacity: 0; pointer-events: none;
  transition: opacity .3s ease;
}
.beat.active { opacity: 1; pointer-events: auto; }

/* ---- Wipe transition ---- */
.wipe {
  position: absolute; inset: -10% -20%;
  background: var(--brand);
  z-index: 100;
  transform: translateX(-135%) skewX(-9deg);
  pointer-events: none;
}

/* ---- Progress bar ---- */
.adv-prog {
  position: absolute; bottom: 16px; left: 50%;
  transform: translateX(-50%);
  display: flex; gap: 4px;
  z-index: 50;
}
.seg {
  width: 48px; height: 3px;
  background: rgba(0,0,0,.1);
  border-radius: 2px;
  overflow: hidden;
}
.seg .fill {
  height: 100%;
  width: 0%;
  background: var(--brand);
  border-radius: 2px;
}
.seg.full .fill { width: 100%; }

/* ---- Cursor ---- */
.open-cursor, .chat-cursor {
  position: absolute;
  width: 20px; height: 20px;
  z-index: 20;
  opacity: 0;
  pointer-events: none;
  transform: translate(var(--cursor-x, 0), var(--cursor-y, 0));
  transition: transform .5s cubic-bezier(.22,.72,.18,1), opacity .18s ease;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.2));
}
.open-cursor.is-visible, .chat-cursor.is-visible { opacity: 1; }
.open-cursor.is-clicking, .chat-cursor.is-clicking { transform: translate(var(--cursor-x, 0), var(--cursor-y, 0)) scale(.85); }

/* ================================================
   BEAT 1: OPEN — site → bubble → zoom → chat
   ================================================ */
.b-open .site-stage {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  transition: transform .6s cubic-bezier(.4,0,.2,1);
  transform-origin: 89% 87%;
}
.b-open.zoom .site-stage { transform: scale(1.4); }

.site-win {
  width: 460px;
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 20px 60px rgba(0,0,0,.12);
}
.site-bar {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px;
  background: #f8f9fa;
  border-bottom: 1px solid var(--line);
}
.dots { display: flex; gap: 5px; }
.dots i { width: 8px; height: 8px; border-radius: 50%; background: #ddd; }
.url {
  flex: 1; display: flex; align-items: center; gap: 4px;
  background: #fff; border-radius: 6px; padding: 4px 10px;
  font-size: 11px; color: var(--ink-soft);
}
.url svg { width: 12px; height: 12px; color: #aaa; }

.site-body { padding: 16px; }
.site-nav {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 16px;
}
.site-logo {
  width: 60px; height: 12px;
  background: var(--ink); border-radius: 3px; opacity: .15;
}
.lk { display: flex; gap: 8px; margin-left: auto; }
.lk b { width: 32px; height: 6px; background: #ddd; border-radius: 3px; }
.pill { width: 54px; height: 22px; background: var(--brand); border-radius: 11px; opacity: .6; }

.site-hero { display: flex; gap: 14px; margin-bottom: 14px; }
.site-cols { flex: 1; }
.h { height: 10px; background: var(--ink); border-radius: 3px; opacity: .12; margin-bottom: 6px; }
.h.w1 { width: 85%; }
.h.w2 { width: 60%; }
.l { height: 6px; background: #e5e7eb; border-radius: 3px; margin-bottom: 5px; width: 90%; }
.l.s { width: 65%; }
.btn { width: 80px; height: 24px; background: var(--brand); border-radius: 6px; margin-top: 8px; opacity: .7; }
.pic { width: 120px; height: 90px; background: linear-gradient(135deg, #e0e7ff, #f0e6ff); border-radius: 10px; flex-shrink: 0; }

.site-cards { display: flex; gap: 8px; }
.site-cards .c { flex: 1; height: 50px; background: #f3f4f6; border-radius: 8px; }

/* Widget launcher */
.open-launch {
  position: absolute; bottom: 32px; right: 32px;
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--brand);
  display: grid; place-items: center;
  box-shadow: 0 6px 20px rgba(80,144,255,.4);
  z-index: 5;
}
.open-launch .logo-c { width: 48px; height: 48px; border-radius: 50%; font-size: 22px; }
.b-open.active .open-launch {
  animation: launcherPulse 2s ease-in-out infinite;
}
@keyframes launcherPulse {
  0%,100%{box-shadow:0 6px 20px rgba(80,144,255,.4)}
  50%{box-shadow:0 6px 28px rgba(80,144,255,.65)}
}

/* Bubble */
.open-bubble {
  position: absolute; bottom: 88px; right: 32px;
  background: #fff;
  padding: 10px 16px;
  border-radius: 16px 16px 4px 16px;
  font-size: 13px; font-weight: 500;
  box-shadow: 0 4px 20px rgba(0,0,0,.1);
  opacity: 0; transform: translateY(8px) scale(.95);
  transition: opacity .3s ease, transform .3s ease;
  z-index: 5;
  white-space: nowrap;
}
.b-open.bubble .open-bubble { opacity: 1; transform: translateY(0) scale(1); }
.b-open.zoom .open-bubble { opacity: 0; }

/* Chat surface */
.chat-surface {
  position: absolute; inset: 0;
  opacity: 0; pointer-events: none;
  display: flex; align-items: center; justify-content: center;
  transition: opacity .4s ease;
  z-index: 10;
}
.b-open.open-chat .chat-surface { opacity: 1; }

.chat-win {
  width: 340px;
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 20px 60px rgba(0,0,0,.15);
  overflow: hidden;
  transform: scale(.8) translateY(20px);
  opacity: 0;
  transition: transform .5s cubic-bezier(.22,.72,.18,1), opacity .3s ease;
}
.b-open.open-chat .chat-win { transform: scale(1) translateY(0); opacity: 1; }

.cw-top {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
}
.cw-top-text { display: flex; flex-direction: column; }
.nm { font-weight: 700; font-size: 14px; }
.status { font-size: 11px; color: var(--ink-soft); }

.cw-body {
  min-height: 200px; max-height: 260px;
  padding: 16px;
  overflow: hidden;
  display: flex; flex-direction: column; gap: 10px;
  background: var(--surface);
}

.cw-input {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 16px;
  border-top: 1px solid var(--line);
  opacity: 0; transform: translateY(10px);
  transition: opacity .3s, transform .3s;
}
.b-open.compose-in .cw-input { opacity: 1; transform: translateY(0); }

.field {
  flex: 1;
  font-size: 13px; color: var(--ink);
  min-height: 18px;
}
.cur {
  display: inline-block; width: 1.5px; height: 14px;
  background: var(--brand);
  animation: blink 1s steps(2) infinite;
  vertical-align: text-bottom;
  margin-left: 1px;
}
@keyframes blink { 0%,50%{opacity:1} 51%,100%{opacity:0} }
.b-open.compose-sent .cur { display: none; }

.send {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
  display: grid; place-items: center;
  opacity: .4;
  transition: opacity .2s, transform .1s;
}
.send svg { width: 18px; height: 18px; }
.b-open.compose-active .send { opacity: 1; }

/* Chat messages */
.umsg {
  align-self: flex-end;
  background: var(--brand);
  color: #fff;
  padding: 8px 14px;
  border-radius: 14px 14px 4px 14px;
  font-size: 13px; line-height: 1.5;
  max-width: 80%;
  opacity: 0; transform: translateY(8px);
  transition: opacity .3s, transform .3s;
}
.umsg.stick { opacity: 1; transform: translateY(0); }

.amsg {
  align-self: flex-start;
  background: #fff;
  padding: 10px 14px;
  border-radius: 14px 14px 14px 4px;
  font-size: 13px; line-height: 1.55;
  max-width: 85%;
  color: var(--ink);
  box-shadow: 0 1px 3px rgba(0,0,0,.06);
}
.amsg .w {
  opacity: 0; filter: blur(3px); transform: translateY(3px);
  transition: opacity .2s, filter .2s, transform .2s;
  display: inline;
}
.amsg .w.on { opacity: 1; filter: blur(0); transform: translateY(0); }

/* Thinking dots */
.athink {
  align-self: flex-start;
  display: flex; gap: 4px;
  padding: 12px 16px;
  background: #fff;
  border-radius: 14px 14px 14px 4px;
  box-shadow: 0 1px 3px rgba(0,0,0,.06);
}
.athink i {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #bbb;
  animation: dotPulse .9s ease-in-out infinite;
}
.athink i:nth-child(2) { animation-delay: .15s; }
.athink i:nth-child(3) { animation-delay: .3s; }
@keyframes dotPulse {
  0%,100%{opacity:.35;transform:scale(.85)}
  50%{opacity:1;transform:scale(1)}
}

/* ================================================
   BEAT 2: TRAINING
   ================================================ */
.b-train {
  background: linear-gradient(160deg, #EDF3FF, #fff 50%, #F5F0FF);
  padding: 40px;
}

.train-card {
  width: 420px;
  background: #fff;
  border-radius: 18px;
  padding: 28px;
  box-shadow: 0 20px 60px rgba(0,0,0,.08);
}
.train-header {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 20px;
}
.train-header b { font-size: 16px; font-weight: 700; }

.train-url-bar {
  background: var(--surface);
  border: 1.5px solid var(--line);
  border-radius: 10px;
  padding: 12px 16px;
  font-size: 13px;
  font-family: 'SF Mono', 'Fira Code', monospace;
  color: var(--ink);
  margin-bottom: 16px;
  min-height: 42px;
  display: flex; align-items: center;
}
.train-caret {
  display: inline-block; width: 1.5px; height: 14px;
  background: var(--brand);
  animation: blink 1s steps(2) infinite;
  margin-left: 1px;
  vertical-align: text-bottom;
}
.b-train.done .train-caret { display: none; }

.train-progress {
  height: 4px;
  background: var(--line);
  border-radius: 2px;
  margin-bottom: 12px;
  overflow: hidden;
}
.train-progress-fill {
  height: 100%; width: 0%;
  background: linear-gradient(90deg, var(--brand), #7FADFF);
  border-radius: 2px;
}

.train-status {
  font-size: 12px;
  color: var(--ink-soft);
  margin-bottom: 16px;
}
.b-train.done .train-status { color: var(--success); font-weight: 600; }

.train-result {
  display: flex; gap: 16px;
  opacity: 0; transform: translateY(10px);
  transition: opacity .4s, transform .4s;
}
.train-result.show { opacity: 1; transform: translateY(0); }

.train-stat {
  flex: 1;
  text-align: center;
  padding: 12px 8px;
  background: var(--surface);
  border-radius: 10px;
}
.train-stat b {
  display: block;
  font-size: 22px; font-weight: 800;
  font-family: 'Outfit', sans-serif;
  color: var(--brand);
}
.train-stat span { font-size: 11px; color: var(--ink-soft); }

.train-label, .lead-label, .always-label {
  position: absolute; bottom: 40px; left: 50%;
  transform: translateX(-50%);
  text-align: center;
  white-space: nowrap;
}
.train-label b, .lead-label b, .always-label b {
  display: block;
  font-size: 15px; font-weight: 700;
  color: var(--ink);
  margin-bottom: 2px;
}
.train-label span, .lead-label span, .always-label span {
  font-size: 13px; color: var(--ink-soft);
}

/* ================================================
   BEAT 3: LEAD CAPTURE
   ================================================ */
.b-lead {
  background: linear-gradient(160deg, #EDF3FF, #fff 50%, #ECFDF5);
  padding: 30px;
}

.lead-chat {
  width: 360px;
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 20px 60px rgba(0,0,0,.1);
  overflow: hidden;
}
.lead-top {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
}
.lead-agent { display: flex; flex-direction: column; }
.lead-agent b { font-size: 14px; }
.lead-agent span { font-size: 11px; color: var(--ink-soft); }

.lead-thread { padding: 16px; display: flex; flex-direction: column; gap: 10px; background: var(--surface); }

.lead-msg {
  padding: 10px 14px;
  border-radius: 14px;
  font-size: 13px; line-height: 1.5;
  max-width: 85%;
  opacity: 0; transform: translateY(10px);
  transition: opacity .35s ease, transform .35s ease;
}
.lead-msg.show { opacity: 1; transform: translateY(0); }
.lead-msg.ai {
  background: #fff;
  border-radius: 14px 14px 14px 4px;
  align-self: flex-start;
  box-shadow: 0 1px 3px rgba(0,0,0,.06);
}
.lead-msg.user {
  background: var(--brand);
  color: #fff;
  border-radius: 14px 14px 4px 14px;
  align-self: flex-end;
}

/* Lead notification */
.lead-notif {
  margin-top: 16px;
  display: flex; align-items: center; gap: 12px;
  background: #fff;
  border: 1.5px solid var(--success);
  border-radius: 14px;
  padding: 14px 18px;
  width: 360px;
  box-shadow: 0 8px 30px rgba(71,215,172,.18);
  opacity: 0; transform: translateY(16px) scale(.95);
  transition: opacity .4s ease, transform .4s cubic-bezier(.22,.72,.18,1);
}
.lead-notif.show { opacity: 1; transform: translateY(0) scale(1); }

.lead-notif-icon {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--success-bg);
  color: var(--success);
  display: grid; place-items: center;
  flex-shrink: 0;
}
.lead-notif-icon svg { width: 18px; height: 18px; }
.lead-notif-text b { display: block; font-size: 13px; font-weight: 700; color: var(--ink); }
.lead-notif-text span { font-size: 11px; color: var(--ink-soft); }

/* ================================================
   BEAT 4: 24/7 ALWAYS ON
   ================================================ */
.b-always {
  background: linear-gradient(160deg, #1A1A2E 0%, #1e2340 50%, #1A1A2E 100%);
  padding: 40px;
}

.always-clock {
  text-align: center;
  margin-bottom: 24px;
}
.always-time {
  display: block;
  font-family: 'Outfit', sans-serif;
  font-size: 42px; font-weight: 800;
  color: #fff;
  letter-spacing: -1px;
}
.always-day {
  font-size: 14px; color: rgba(255,255,255,.5);
}

.always-chat {
  display: flex; flex-direction: column; gap: 12px;
  width: 360px;
}

.always-bubble {
  padding: 12px 18px;
  border-radius: 16px;
  font-size: 13px; line-height: 1.5;
  max-width: 85%;
  opacity: 0; transform: translateY(10px);
  transition: opacity .35s, transform .35s;
}
.always-bubble.show { opacity: 1; transform: translateY(0); }

.always-bubble.visitor {
  background: rgba(255,255,255,.1);
  color: rgba(255,255,255,.9);
  border-radius: 16px 16px 16px 4px;
  align-self: flex-start;
}
.always-bubble.ai {
  background: rgba(80,144,255,.15);
  border: 1px solid rgba(80,144,255,.25);
  color: #fff;
  border-radius: 16px 16px 4px 16px;
  align-self: flex-end;
}

.always-dots {
  display: flex; gap: 4px; padding: 2px 0;
}
.always-dots i {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: rgba(255,255,255,.4);
  animation: dotPulse .9s ease-in-out infinite;
}
.always-dots i:nth-child(2) { animation-delay: .15s; }
.always-dots i:nth-child(3) { animation-delay: .3s; }

.always-answer { display: none; }

.always-badge {
  display: flex; align-items: center; gap: 8px;
  justify-content: center;
  margin-top: 16px;
  font-size: 12px; font-weight: 600;
  color: var(--success);
  opacity: 0; transform: translateY(6px);
  transition: opacity .3s, transform .3s;
}
.always-badge.show { opacity: 1; transform: translateY(0); }

.always-pulse {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--success);
  box-shadow: 0 0 0 0 rgba(71,215,172,.4);
  animation: statusPulse 2s ease infinite;
}
@keyframes statusPulse {
  0%{box-shadow:0 0 0 0 rgba(71,215,172,.4)}
  70%{box-shadow:0 0 0 8px rgba(71,215,172,0)}
  100%{box-shadow:0 0 0 0 rgba(71,215,172,0)}
}

.b-always .always-label b { color: #fff; }
.b-always .always-label span { color: rgba(255,255,255,.5); }

/* ================================================
   BEAT 5: CTA
   ================================================ */
.b-cta {
  background: linear-gradient(135deg, #EDF3FF 0%, #fff 40%, #F5F0FF 100%);
}

.cta-rings { position: absolute; inset: 0; }
.cta-ring {
  position: absolute;
  border: 1.5px solid rgba(80,144,255,.15);
  border-radius: 50%;
  animation: ringFloat 4s ease-in-out infinite;
  animation-delay: var(--d, 0s);
}
@keyframes ringFloat {
  0%,100%{transform:translateY(0) scale(1)}
  50%{transform:translateY(-8px) scale(1.1)}
}

.cta-logo {
  margin-bottom: 24px;
}
.cta-h {
  text-align: center;
  font-family: 'Outfit', sans-serif;
  font-size: 36px; font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.5px;
  color: var(--ink);
  margin-bottom: 12px;
}
.cta-h .ln { display: block; }

.cta-price {
  text-align: center;
  font-size: 14px;
  color: var(--ink-soft);
  margin-bottom: 20px;
}

.cta-btn {
  display: block;
  margin: 0 auto;
  padding: 14px 32px;
  background: var(--brand);
  color: #fff;
  border: none;
  border-radius: 12px;
  font-size: 16px; font-weight: 700;
  font-family: 'Inter', sans-serif;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(80,144,255,.3);
  transition: transform .15s, box-shadow .15s;
}
.cta-btn:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(80,144,255,.4); }

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
}

/* ===== Channel toggle (Website / WhatsApp demo experiment) ===== */
.adv-channel-toggle {
  position: absolute; top: 14px; right: 14px; z-index: 40;
  display: flex; gap: 4px;
  background: rgba(255,255,255,.85); backdrop-filter: blur(6px);
  border: 1px solid var(--line); border-radius: 999px; padding: 3px;
}
.ch-tab {
  display: inline-flex; align-items: center; gap: 6px;
  border: 0; background: transparent; cursor: pointer;
  border-radius: 999px; padding: 5px 12px;
  font-family: inherit; font-size: 12px; font-weight: 700; color: var(--ink-soft);
  transition: background .2s, color .2s;
}
.ch-tab svg { width: 14px; height: 14px; }
.ch-tab.on { background: #fff; color: var(--brand); box-shadow: 0 1px 4px rgba(0,0,0,.12); }
.ch-tab.on[data-ch="wa"] { color: #1FAF54; }

/* ===== WhatsApp skin — chat surfaces only; brand chrome stays ===== */
.adv.wa-mode .logo-c { background: #25D366; }
.adv.wa-mode .cw-top, .adv.wa-mode .lead-top { background: #075E54; border-bottom-color: #075E54; }
.adv.wa-mode .cw-top .nm, .adv.wa-mode .lead-agent b { color: #fff; }
.adv.wa-mode .cw-top .status, .adv.wa-mode .lead-agent span { color: rgba(255,255,255,.78); }
.adv.wa-mode .cw-body, .adv.wa-mode .lead-thread { background: #ECE5DD; }
.adv.wa-mode .umsg, .adv.wa-mode .lead-msg.user { background: #DCF8C6; color: #0B3D2E; }
.adv.wa-mode .open-launch .logo-c { background: #25D366; }
.adv.wa-mode .cw-input .send { background: #25D366; }