.home .elementor-widget-image {
    max-width: 800px;
}

/* == Hero Section == */
.hl-hero {
  background: #fff;              /* bg-white */
}

.hl-container {
  max-width: 56rem;              /* max-w-4xl */
  margin: 0 auto;                /* mx-auto */
  padding: 0 1rem;               /* px-4 */
  text-align: center;            /* text-center */
}
.hl-hero-title {
  font-size: 2rem;
  font-weight: 800;
  color: #2c2b2b;
  display: inline-block;
  padding: 0.25rem 0.5rem;
  margin-bottom: 1rem;           /* mb-4 */
}
@media (min-width: 40rem) {
  .hl-hero-title {
    font-size: 2.25rem;          /* sm:text-4xl */
  }
}
.hl-hero-subtitle {
  font-size: 1.125rem;           /* text-lg */
  color: #4b5563;                /* text-gray-600 */
  margin-bottom: 4rem;           /* mb-16 */
}

/* == Features Grid == */
.hl-features {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;                     /* gap-8 */
  margin-bottom: 3rem;           /* mb-12 */
}
@media (min-width: 48rem) {
  .hl-features {
    grid-template-columns: repeat(3,1fr);  /* md:grid-cols-3 */
  }
}
.hl-feature {
  display: flex;
  flex-direction: column;
  align-items: center;           /* items-center */
}
.hl-feature-icon {
  font-size: 3rem;               /* text-5xl */
  margin-bottom: 1rem;           /* mb-4 */
}
.hl-icon-bolt    { color: #ffc312; }
.hl-icon-book   { color: #17b1e6; }
.hl-icon-cash  { color: #14d062; }
.hl-feature-title {
  font-size: 1.5rem;           /* text-lg */
  font-weight: 600;              /* font-semibold */
  color: #374151;                /* text-gray-700 */
  margin-bottom: 0.5rem;         /* mb-2 */
}
.hl-feature-text {
  font-size: 1.125rem;           /* text-lg */
  color: #6b7280;                /* text-gray-500 */
}

/* == Demo Header == */
.hl-demo {
  padding: 2rem 0;               /* py-8 */
}
.hl-demo-header {
  max-width: 56rem;
  margin: 0 auto 0.5rem;
}
.hl-demo-title {
  font-size: 1.875rem;
  font-weight: 700;
  color: #1f2937;                /* text-gray-900 */
  margin-bottom: 1rem;
}
@media (min-width: 40rem) {
  .hl-demo-title {
    font-size: 2.25rem;
  }
}

/* == Conversations wrapper == */
.hl-convo-wrapper {
  max-width: 80rem;              /* max-w-7xl */
  margin: 0 auto;
  padding-left: 0.5rem;          /* px-2 */
  padding-right: 0.5rem;
}

/* == Conversation demo == */
.hl-convo-shell {
  position: relative;
  background: linear-gradient(135deg, #fafbff 0%, #f6f8fb 100%);
  border: 1px solid #e3e7f5;
  border-radius: 24px;
  padding: 2.5rem;
  margin-top: 5.25rem;
  box-shadow: 0 25px 60px rgba(15, 23, 42, 0.06);
  overflow: hidden;
  isolation: isolate;
}
.hl-convo-shell::before,
.hl-convo-shell::after {
  content: "";
  position: absolute;
  inset: -20% auto auto -10%;
  width: 240px;
  height: 240px;
  background: radial-gradient(circle, rgba(199, 210, 254, 0.18) 0%, rgba(199, 210, 254, 0) 60%);
  z-index: -1;
  filter: blur(6px);
}
.hl-convo-shell::after {
  inset: auto -15% -25% auto;
  background: radial-gradient(circle, rgba(186, 230, 203, 0.16) 0%, rgba(186, 230, 203, 0) 60%);
}

.hl-convo-heading {
  display: grid;
  gap: 0.6rem;
  text-align: left;
  margin-bottom: 1.5rem;
  color: #0f1d2f;
}
.hl-convo-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 999px;
  background: #e7f8ff;
  color: #0b8cb8;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  width: fit-content;
}
.hl-convo-heading h3 {
  margin: 0;
  font-size: clamp(1.65rem, 2.5vw, 2.15rem);
  font-weight: 800;
}
.hl-convo-heading p {
  margin: 0;
  color: #4b5563;
  max-width: 48rem;
}

.hl-convo-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0.75rem;
  margin-top: 0.25rem;
  margin: 0 0 50px 0;
}
.hl-metric {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  background: #ffffff;
  border: 1px solid #d8e9f7;
  border-radius: 14px;
  padding: 0.75rem 0.95rem;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.04);
}
.hl-metric .hl-metric-dot {
  width: 12px;
  height: 12px;
  border-radius: 999px;
  margin-top: 4px;
  background: #0fb2e9;
  box-shadow: 0 0 0 6px rgba(15, 178, 233, 0.18);
}
.hl-metric strong {
  display: block;
  font-size: 1.05rem;
  color: #0f1d2f;
}
.hl-metric span {
  color: #475569;
  font-size: 0.95rem;
}
.hl-metric.is-green .hl-metric-dot {
  background: #16a34a;
  box-shadow: 0 0 0 6px rgba(22, 163, 74, 0.16);
}
.hl-metric.is-purple .hl-metric-dot {
  background: #9b59b6;
  box-shadow: 0 0 0 6px rgba(155, 89, 182, 0.16);
}

.hl-convo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 1.25rem;
  align-items: start;
}

.hilucy-convo-container {
  position: relative;
  background: #ffffff;
  border: 1px solid #dbe5ee;
  border-radius: 18px;
  padding: 1.5rem 1.5rem 1.25rem;
  box-shadow: 0 20px 45px rgba(15, 23, 42, 0.05);
  overflow: hidden;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.hilucy-convo-container:hover {
  transform: translateY(-4px);
  box-shadow: 0 26px 60px rgba(15, 23, 42, 0.08);
}
.hilucy-convo-container::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(15, 178, 233, 0.05), rgba(255, 255, 255, 0));
  pointer-events: none;
}

.flow-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin: 0 0 0.35rem;
  color: #0f1d2f;
  font-size: 1.15rem;
  font-weight: 800;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}
.hl-flow-pill {
  background: #e7f8ff;
  color: #0b8cb8;
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 0.9rem;
  font-weight: 700;
  white-space: nowrap;
}
.hilucy-convo-meta {
  margin: 0 0 1rem;
  color: #64748b;
  font-size: 0.98rem;
}

.hl-convo-stream {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin: 0.5rem 0 1.25rem;
}

/* Chat bubbles */
.chat-bubble,
.action-bubble {
  opacity: 0;
  transform: translateY(15px);
  transition: opacity 0.8s ease var(--delay, 0s), transform 0.8s ease var(--delay, 0s);
}
.chat-bubble {
  position: relative;
  padding: 1.05rem 1.3rem;
  max-width: 78%;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 1.2rem;
  font-size: 1.05rem;
  line-height: 1.5;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.06);
}
.bubble-left {
  margin-right: auto;
  transform: translateX(-12px);
  border-bottom-left-radius: 0.75rem;
}
.bubble-left::after {
  content: "";
  position: absolute;
  bottom: 0.9rem;
  left: -0.5rem;
  border: 0.5rem solid transparent;
  border-right-color: #ffffff;
}
.bubble-right {
  margin-left: auto;
  background: linear-gradient(135deg, #f8f7ff, #f1f4f9);
  color: #0f172a;
  border: 1px solid #dcdff2;
  transform: translateX(12px);
  border-bottom-right-radius: 0.75rem;
  box-shadow: 0 12px 26px rgba(76, 81, 191, 0.18);
}
.bubble-right::after {
  content: "";
  position: absolute;
  bottom: 0.9rem;
  right: -0.5rem;
  border: 0.5rem solid transparent;
  border-left-color: #f1f4f9;
}
.bubble-name {
  display: block;
  font-weight: 800;
  margin-bottom: 0.15rem;
  color: inherit;
}
.bubble-left .bubble-name {
  color: #0f172a;
}
.bubble-right .bubble-name {
  color: #0b8cb8;
}
.bubble-muted {
  color: #4b5563;
  font-weight: 600;
  font-size: 0.9rem;
}

/* Action steps */
.action-bubble {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  margin: 1rem auto;
  padding: 0.75rem 1rem;
  max-width: 78%;
  background: linear-gradient(180deg, #f9fafb 0%, #f5f7fb 100%);
  border: 1px solid #dee5f1;
  border-radius: 1rem;
  font-size: 1rem;
  font-weight: 700;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.06);
  color: #0f172a;
}
.action-bubble i {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: #eef1f7;
  color: #0f172a;
  font-size: 1.1rem;
}
.action-bubble.whatsapp {
  border-color: #22c55e;
  background: #f1fbf4;
}
.action-bubble.whatsapp i {
  background: #e3f5ea;
  color: #15803d;
}
.action-bubble.accepted {
  border-color: #bfe7f5;
  background: #f1f9fd;
}
.action-bubble.accepted i {
  background: #e4f3fb;
  color: #0b8cb8;
}

/* Visible state */
.chat-bubble.visible,
.action-bubble.visible,
.flow-title.visible {
  opacity: 1 !important;
  transform: translateX(0) translateY(0) !important;
}

/* Convo footer */
.hl-convo-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.85rem 1rem;
  border: 1px solid #d8e9f7;
  border-radius: 14px;
  background: #f8fbff;
  color: #0f1d2f;
  font-weight: 600;
}
.hl-convo-foot .hl-foot-note {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #0f1d2f;
}
.hl-convo-foot .hl-foot-note i {
  color: #16a34a;
}
.hl-convo-foot .hl-foot-time {
  color: #475569;
  font-weight: 600;
  font-size: 0.95rem;
}

@keyframes popIn {
  0%   { opacity: 0; transform: scale(0.7); }
  70%  { opacity: 1; transform: scale(1.05); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes whatsappGlow {
  0%   { box-shadow: 0 0 10px rgba(22, 163, 74, 0.25); }
  100% { box-shadow: 0 0 18px rgba(22, 163, 74, 0.55); }
}
@keyframes acceptedGlow {
  0%   { box-shadow: 0 0 10px rgba(59, 130, 246, 0.25); }
  100% { box-shadow: 0 0 18px rgba(59, 130, 246, 0.55); }
}
.action-bubble.whatsapp.visible {
  animation: popIn 0.8s ease-out forwards, whatsappGlow 1.2s ease-in-out 0.5s infinite alternate;
}
.action-bubble.accepted.visible {
  animation: popIn 0.8s ease-out forwards, acceptedGlow 1.2s ease-in-out 0.5s infinite alternate;
}

@media (max-width: 640px) {
  .hl-convo-shell { padding: 1.5rem; }
  .chat-bubble { max-width: 100%; font-size: 1rem; }
  .action-bubble { max-width: 100%; font-size: 0.95rem; }
  .flow-title { flex-direction: column; align-items: flex-start; }
}