/* ========================================================
   Vani Technologies - Global Stylesheet
   Logo-Driven Animated Backgrounds & Fluid Visuals
   ======================================================== */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&family=Space+Grotesk:wght@500;600;700&display=swap');

:root {
  --bg-deep: #161c28;
  --bg-main: #1c2332;
  --bg-surface: #252e40;
  --bg-card: rgba(37, 46, 64, 0.65);
  
  --brand-stripe: #60697d;
  --border-subtle: rgba(96, 105, 125, 0.22);
  --border-highlight: rgba(96, 105, 125, 0.45);
  
  --flame-red: #da251d;
  --flame-orange: #e85827;
  --flame-amber: #f97316;
  --flame-gold: #ed8a0a;
  --primary-blue: #3b82f6;
}

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

html {
  scroll-behavior: smooth;
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* Page Transition Entrance */
@keyframes pageFadeIn {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

body {
  background-color: var(--bg-main);
  color: #f1f5f9;
  overflow-x: hidden;
  min-height: 100vh;
  animation: pageFadeIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Accessible Focus Outlines */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--flame-orange) !important;
  outline-offset: 2px !important;
}

/* Headings typography */
h1, h2, h3, h4, .font-heading {
  font-family: 'Space Grotesk', 'Plus Jakarta Sans', sans-serif;
  letter-spacing: -0.025em;
}

/* ========================================================
   LOGO-DRIVEN ANIMATED BACKGROUND PATTERNS & ORBS
   ======================================================== */

/* 1. Animated Diagonal Pinstripes (Replicating & Moving the Logo's Texture) */
@keyframes pinstripeMove {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 56px 56px;
  }
}

.brand-pinstripes-animated {
  background-image: repeating-linear-gradient(
    -45deg,
    rgba(96, 105, 125, 0.08),
    rgba(96, 105, 125, 0.08) 1.5px,
    transparent 1.5px,
    transparent 5px
  );
  background-size: 56px 56px;
  animation: pinstripeMove 30s linear infinite;
}

/* 2. Drifting Flame & Slate Ambient Orbs */
@keyframes orbDrift1 {
  0%, 100% {
    transform: translate(0px, 0px) scale(1);
  }
  33% {
    transform: translate(45px, -35px) scale(1.15);
  }
  66% {
    transform: translate(-30px, 30px) scale(0.9);
  }
}

@keyframes orbDrift2 {
  0%, 100% {
    transform: translate(0px, 0px) scale(1);
  }
  33% {
    transform: translate(-50px, 40px) scale(0.9);
  }
  66% {
    transform: translate(35px, -30px) scale(1.2);
  }
}

@keyframes orbDrift3 {
  0%, 100% {
    transform: translate(0px, 0px) scale(1);
  }
  50% {
    transform: translate(-30px, -45px) scale(1.1);
  }
}

.animate-orb-1 {
  animation: orbDrift1 16s ease-in-out infinite;
}

.animate-orb-2 {
  animation: orbDrift2 20s ease-in-out infinite;
}

.animate-orb-3 {
  animation: orbDrift3 24s ease-in-out infinite;
}

/* 3. Subtle Phoenix Flame Silhouette Watermark in Background */
@keyframes phoenixWatermark {
  0%, 100% {
    opacity: 0.03;
    transform: scale(1) rotate(0deg);
  }
  50% {
    opacity: 0.065;
    transform: scale(1.05) rotate(2deg);
  }
}

.phoenix-watermark {
  animation: phoenixWatermark 12s ease-in-out infinite;
}

/* ========================================================
   LOGO MOVING & GLOW ANIMATIONS
   ======================================================== */

/* Logo Floating Animation */
@keyframes logoFloat {
  0%, 100% {
    transform: translateY(0px) rotate(0deg);
  }
  50% {
    transform: translateY(-4px) rotate(0.6deg);
  }
}

.animate-logo-float {
  animation: logoFloat 4s ease-in-out infinite;
}

/* Logo Phoenix Flame Pulse Glow */
@keyframes flamePulse {
  0%, 100% {
    filter: drop-shadow(0 0 6px rgba(232, 88, 39, 0.35));
    opacity: 0.95;
  }
  50% {
    filter: drop-shadow(0 0 16px rgba(232, 88, 39, 0.65)) drop-shadow(0 0 30px rgba(237, 138, 10, 0.25));
    opacity: 1;
  }
}

.animate-flame-glow {
  animation: flamePulse 3.5s ease-in-out infinite;
}

/* Logo Shimmer Light Reflection Sweep */
.logo-shimmer-wrapper {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  border-radius: 0.75rem;
}

.logo-shimmer-wrapper::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -150%;
  width: 80%;
  height: 200%;
  background: linear-gradient(
    65deg,
    transparent 20%,
    rgba(255, 255, 255, 0.22) 50%,
    transparent 80%
  );
  transform: rotate(25deg);
  animation: shimmerGlide 5s infinite cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
}

@keyframes shimmerGlide {
  0% {
    left: -150%;
  }
  30%, 100% {
    left: 150%;
  }
}

/* Hero Centerpiece 3D Interactive Floating Effect */
@keyframes heroBadgeFloat {
  0%, 100% {
    transform: translateY(0px) rotate(0deg) scale(1);
  }
  50% {
    transform: translateY(-8px) rotate(-1deg) scale(1.01);
  }
}

.animate-hero-centerpiece {
  animation: heroBadgeFloat 5.5s ease-in-out infinite;
}

/* Floating Elements */
@keyframes floatSlow {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-10px);
  }
}

@keyframes floatReverse {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(10px);
  }
}

.animate-float-1 {
  animation: floatSlow 5s ease-in-out infinite;
}

.animate-float-2 {
  animation: floatReverse 6.5s ease-in-out infinite;
}

.animate-float-3 {
  animation: floatSlow 7s ease-in-out 1s infinite;
}

/* ========================================================
   HERO REVEAL & STAGGERED LINE ANIMATIONS
   ======================================================== */
@keyframes heroLineReveal {
  0% {
    opacity: 0;
    transform: translateY(32px) rotateX(12deg);
    filter: blur(4px);
  }
  100% {
    opacity: 1;
    transform: translateY(0) rotateX(0deg);
    filter: blur(0px);
  }
}

.hero-line-fade-up {
  display: block;
  opacity: 0;
  animation: heroLineReveal 0.85s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  will-change: transform, opacity, filter;
}

.hero-line-delay-1 {
  animation-delay: 0.15s;
}

.hero-line-delay-2 {
  animation-delay: 0.32s;
}

.hero-line-delay-3 {
  animation-delay: 0.48s;
}

.hero-line-delay-4 {
  animation-delay: 0.65s;
}

/* Orange Shimmer Accent on "Forward" */
@keyframes orangeShimmer {
  0%, 100% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
}

.orange-shimmer-accent {
  background: linear-gradient(90deg, #e85827 0%, #f97316 25%, #ed8a0a 50%, #f97316 75%, #e85827 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: orangeShimmer 6s ease-in-out infinite;
  display: inline-block;
}

/* ========================================================
   FLOATING TECH CHIPS & BACKGROUND ELEMENTS
   ======================================================== */
.floating-tech-chip {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.85rem;
  border-radius: 9999px;
  background: rgba(22, 28, 40, 0.85);
  border: 1px solid rgba(96, 105, 125, 0.35);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  font-family: 'Space Grotesk', monospace;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: #f1f5f9;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.5);
  pointer-events: none;
  z-index: 5;
}

.chip-pulse-dot {
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 9999px;
  display: inline-block;
}

.floating-glass-card {
  position: absolute;
  padding: 0.75rem 1rem;
  border-radius: 1rem;
  background: rgba(37, 46, 64, 0.7);
  border: 1px solid rgba(96, 105, 125, 0.3);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 12px 30px -8px rgba(10, 14, 22, 0.6);
  pointer-events: none;
  z-index: 5;
}

@keyframes floatTag1 {
  0%, 100% {
    transform: translateY(0px) rotate(0deg);
  }
  50% {
    transform: translateY(-12px) rotate(1deg);
  }
}

@keyframes floatTag2 {
  0%, 100% {
    transform: translateY(0px) rotate(0deg);
  }
  50% {
    transform: translateY(12px) rotate(-1deg);
  }
}

.anim-float-tag-1 {
  animation: floatTag1 6s ease-in-out infinite;
}

.anim-float-tag-2 {
  animation: floatTag2 7.5s ease-in-out infinite 0.5s;
}

/* ========================================================
   Navbar Styles & Sticky Scroll States
   ======================================================== */
@keyframes navbarSlideDown {
  from {
    transform: translateY(-100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.navbar-initial {
  background: rgba(28, 35, 50, 0.85);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border-subtle);
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  animation: navbarSlideDown 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.navbar-scrolled {
  background: rgba(18, 24, 35, 0.95) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border-bottom: 1px solid rgba(232, 88, 39, 0.35) !important;
  box-shadow: 0 14px 40px -10px rgba(10, 14, 22, 0.8) !important;
}

/* Mobile Nav Drawer */
#mobile-menu {
  transition: max-height 0.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease, transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

#mobile-menu.menu-closed {
  max-height: 0;
  opacity: 0;
  transform: translateY(-10px);
  pointer-events: none;
  overflow: hidden;
}

#mobile-menu.menu-open {
  max-height: 480px;
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* ========================================================
   Modern Glass Cards & Gradients
   ======================================================== */
.glass-panel {
  background: rgba(37, 46, 64, 0.75);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--border-subtle);
}

.glass-card {
  background: rgba(37, 46, 64, 0.6);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--border-subtle);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.3s ease,
              box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              background 0.3s ease;
}

.glass-card:hover {
  background: rgba(46, 56, 77, 0.85);
  border-color: rgba(232, 88, 39, 0.5);
  transform: translateY(-6px);
  box-shadow: 0 20px 45px -12px rgba(10, 14, 22, 0.7), 0 0 25px -4px rgba(232, 88, 39, 0.2);
}

/* Gradient Borders */
.gradient-border-card {
  position: relative;
  background: linear-gradient(135deg, rgba(232, 88, 39, 0.35), rgba(96, 105, 125, 0.2), rgba(59, 130, 246, 0.35));
  padding: 1px;
  border-radius: 1.25rem;
  transition: all 0.4s ease;
}

.gradient-border-card:hover {
  background: linear-gradient(135deg, rgba(232, 88, 39, 0.8), rgba(237, 138, 10, 0.6), rgba(59, 130, 246, 0.8));
  box-shadow: 0 20px 45px -15px rgba(232, 88, 39, 0.3);
}

.gradient-border-inner {
  background: rgba(28, 35, 50, 0.95);
  border-radius: calc(1.25rem - 1px);
}

/* Gradient Text matching Logo Phoenix Flame */
.gradient-text-accent {
  background: linear-gradient(135deg, #f8fafc 25%, #fbd5c6 50%, #f97316 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.gradient-text-flame {
  background: linear-gradient(135deg, #e87239 0%, #ed8a0a 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Buttons with Micro-interactions (Phase 11 Polish) */
.btn-primary {
  cursor: pointer;
  position: relative;
  background: linear-gradient(135deg, #e85827 0%, #d4271e 100%);
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1),
              background 0.25s ease,
              filter 0.25s ease;
  box-shadow: 0 4px 18px rgba(232, 88, 39, 0.38);
  overflow: hidden;
}

.btn-primary:hover {
  background: linear-gradient(135deg, #f0693a 0%, #e1352b 100%);
  box-shadow: 0 8px 28px rgba(232, 88, 39, 0.58), 0 0 18px rgba(237, 138, 10, 0.28);
  transform: translateY(-2px) scale(1.015);
  filter: brightness(1.05);
}

.btn-primary:active {
  transform: translateY(0px) scale(0.975);
  box-shadow: 0 2px 10px rgba(232, 88, 39, 0.4);
  filter: brightness(0.95);
  transition: transform 0.08s ease, filter 0.08s ease;
}

/* Arrow moves slightly on button hover */
.btn-primary i.fa-arrow-right,
.btn-primary .fa-arrow-right,
.btn-primary i.fa-arrow-up-right-from-square,
.btn-primary .fa-arrow-up-right-from-square,
.product-story-cta a i.fa-arrow-right,
.product-story-cta a .fa-arrow-right {
  display: inline-block;
  transition: transform 0.26s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn-primary:hover i.fa-arrow-right,
.btn-primary:hover .fa-arrow-right,
.product-story-cta a:hover i.fa-arrow-right,
.product-story-cta a:hover .fa-arrow-right {
  transform: translateX(4px);
}

.btn-primary:hover i.fa-arrow-up-right-from-square,
.btn-primary:hover .fa-arrow-up-right-from-square {
  transform: translate(2px, -2px);
}

.btn-secondary {
  background: rgba(37, 46, 64, 0.7);
  border: 1px solid var(--border-highlight);
  transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1),
              background 0.25s ease,
              border-color 0.25s ease;
}

.btn-secondary:hover {
  background: rgba(46, 56, 77, 0.95);
  border-color: rgba(255, 255, 255, 0.45);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px -6px rgba(0, 0, 0, 0.5);
}

.btn-secondary:active {
  transform: translateY(0px) scale(0.97);
}

/* Canvas for Interactive Logo-Ember Particles */
#flame-particles-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 9px;
}

::-webkit-scrollbar-track {
  background: #161c28;
}

::-webkit-scrollbar-thumb {
  background: #374257;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #4f5d78;
}

/* ========================================================
   PHASE 3: ABOUT & SERVICES STYLING
   ======================================================== */

/* Service Cards */
.service-card {
  position: relative;
  background: rgba(37, 46, 64, 0.65);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(96, 105, 125, 0.28);
  border-radius: 1rem;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.service-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(232, 88, 39, 0.6), transparent);
  opacity: 0;
  transition: opacity 0.35s ease;
}

.service-card:hover {
  transform: translateY(-6px);
  border-color: rgba(232, 88, 39, 0.5);
  box-shadow: 0 16px 36px -10px rgba(0, 0, 0, 0.5), 0 0 25px -5px rgba(232, 88, 39, 0.2);
}

.service-card:hover::before {
  opacity: 1;
}

/* Service Card Icon Box */
.service-icon-box {
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 0.75rem;
  background: linear-gradient(135deg, rgba(37, 46, 64, 0.9) 0%, rgba(22, 28, 40, 0.95) 100%);
  border: 1px solid rgba(96, 105, 125, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  color: #e85827;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

.service-card:hover .service-icon-box {
  background: linear-gradient(135deg, #e85827 0%, #da251d 100%);
  color: #ffffff;
  border-color: rgba(232, 88, 39, 0.8);
  transform: scale(1.08) rotate(-2deg);
  box-shadow: 0 6px 20px rgba(232, 88, 39, 0.4);
}

/* Value Cards */
.value-card {
  position: relative;
  background: rgba(37, 46, 64, 0.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(96, 105, 125, 0.22);
  border-radius: 1rem;
  padding: 1.75rem;
  transition: all 0.3s ease;
}

.value-card:hover {
  background: rgba(37, 46, 64, 0.85);
  border-color: rgba(232, 88, 39, 0.4);
  transform: translateY(-4px);
  box-shadow: 0 12px 28px -8px rgba(0, 0, 0, 0.4);
}

/* Modal Animation (Product & Service Modals) */
.modal-overlay {
  opacity: 0;
  visibility: hidden;
  backdrop-filter: blur(0px);
  -webkit-backdrop-filter: blur(0px);
  transition: opacity 0.32s cubic-bezier(0.16, 1, 0.3, 1), 
              visibility 0.32s cubic-bezier(0.16, 1, 0.3, 1),
              backdrop-filter 0.32s ease,
              -webkit-backdrop-filter 0.32s ease;
}

.modal-overlay.active {
  opacity: 1;
  visibility: visible;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.modal-container {
  transform: scale(0.92) translateY(20px);
  opacity: 0;
  transition: transform 0.36s cubic-bezier(0.16, 1, 0.3, 1), 
              opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.36s ease;
  will-change: transform, opacity;
}

.modal-overlay.active .modal-container {
  transform: scale(1) translateY(0);
  opacity: 1;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.75), 0 0 35px -5px rgba(232, 88, 39, 0.2);
}

/* ========================================================
   PHASE 4: FEATURED PRODUCTS & FILTER STYLING
   ======================================================== */

.product-card {
  position: relative;
  background: rgba(37, 46, 64, 0.7);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(96, 105, 125, 0.3);
  border-radius: 1.25rem;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  cursor: pointer;
  user-select: none;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.product-card:hover {
  transform: translateY(-8px);
  border-color: rgba(232, 88, 39, 0.6);
  box-shadow: 0 20px 40px -12px rgba(0, 0, 0, 0.6), 0 0 30px -5px rgba(232, 88, 39, 0.25);
}

.product-card:active {
  transform: translateY(-4px) scale(0.99);
}

.product-card:focus-visible {
  outline: 2px solid #e85827;
  outline-offset: 3px;
}

.product-card .img-wrapper {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: #161c28;
}

.product-card .img-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.product-card:hover .img-wrapper img {
  transform: scale(1.06);
}

/* Fallback image container when image fails or loads */
.product-image-fallback {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #1c2332 0%, #161c28 100%);
  border-bottom: 1px solid rgba(96, 105, 125, 0.25);
  color: #94a3b8;
  padding: 1.5rem;
  text-align: center;
}

/* Filter Buttons */
.filter-btn {
  padding: 0.5rem 1.15rem;
  font-size: 0.8125rem;
  font-weight: 600;
  border-radius: 9999px;
  background: rgba(37, 46, 64, 0.7);
  color: #cbd5e1;
  border: 1px solid rgba(96, 105, 125, 0.3);
  transition: all 0.25s ease;
  white-space: nowrap;
  cursor: pointer;
}

.filter-btn:hover {
  background: rgba(46, 56, 77, 0.9);
  color: #ffffff;
  border-color: rgba(232, 88, 39, 0.45);
  transform: translateY(-1px);
}

.filter-btn.active {
  background: linear-gradient(135deg, #e85827 0%, #da251d 100%);
  color: #ffffff;
  border-color: #e85827;
  box-shadow: 0 4px 15px rgba(232, 88, 39, 0.35);
}

/* ========================================================
   CINEMATIC PRODUCT STORYTELLING & DUAL-SECTION SHOWCASE
   ======================================================== */

.product-story,
.cinematic-story-card {
  position: relative;
  background: linear-gradient(145deg, rgba(37, 46, 64, 0.7) 0%, rgba(22, 28, 40, 0.85) 100%);
  border: 1px solid rgba(96, 105, 125, 0.35);
  border-radius: 1.5rem;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), 
              border-color 0.4s ease, 
              box-shadow 0.45s cubic-bezier(0.16, 1, 0.3, 1);
  overflow: hidden;
  will-change: transform;
}

.product-story:hover,
.cinematic-story-card:hover {
  transform: translateY(-4px);
  border-color: rgba(232, 88, 39, 0.55);
  box-shadow: 0 30px 60px -15px rgba(0, 0, 0, 0.7), 
              0 0 35px -8px rgba(232, 88, 39, 0.22);
}

/* 1. AI TALKSY: Futuristic, Intelligent, AI, Communication */
.cinematic-story-card.theme-aitalksy,
.product-story.theme-aitalksy {
  background: linear-gradient(145deg, rgba(13, 23, 42, 0.85) 0%, rgba(8, 14, 26, 0.94) 100%);
  border-color: rgba(6, 182, 212, 0.28);
  box-shadow: inset 0 1px 0 rgba(34, 211, 238, 0.15), 0 20px 45px -15px rgba(0, 0, 0, 0.6);
}

.cinematic-story-card.theme-aitalksy:hover,
.product-story.theme-aitalksy:hover {
  border-color: rgba(6, 182, 212, 0.65);
  box-shadow: 0 32px 64px -16px rgba(0, 0, 0, 0.75), 
              0 0 40px -5px rgba(6, 182, 212, 0.3),
              inset 0 1px 0 rgba(34, 211, 238, 0.35);
}

.theme-aitalksy:hover .animate-ai-core {
  filter: drop-shadow(0 0 22px rgba(6, 182, 212, 0.7));
  transform: scale(1.04);
}

.theme-aitalksy:hover #aitalksy-typing-text {
  text-shadow: 0 0 10px rgba(34, 211, 238, 0.5);
}

.theme-aitalksy:hover .aitalksy-neural-bg-canvas {
  opacity: 1;
}

/* 2. COMMUNITY FORUM: Human, Trustworthy, Connected, Community */
.cinematic-story-card.theme-community,
.product-story.theme-community {
  background: linear-gradient(145deg, rgba(16, 30, 26, 0.82) 0%, rgba(10, 19, 18, 0.94) 100%);
  border-color: rgba(16, 185, 129, 0.28);
  box-shadow: inset 0 1px 0 rgba(52, 211, 153, 0.15), 0 20px 45px -15px rgba(0, 0, 0, 0.6);
}

.cinematic-story-card.theme-community:hover,
.product-story.theme-community:hover {
  border-color: rgba(16, 185, 129, 0.65);
  box-shadow: 0 32px 64px -16px rgba(0, 0, 0, 0.75), 
              0 0 40px -5px rgba(16, 185, 129, 0.3),
              inset 0 1px 0 rgba(52, 211, 153, 0.35);
}

.theme-community:hover .community-person-node {
  border-color: rgba(16, 185, 129, 0.65);
  box-shadow: 0 0 16px rgba(16, 185, 129, 0.35);
}

.theme-community:hover .animate-shield-glow {
  filter: drop-shadow(0 0 18px rgba(16, 185, 129, 0.6));
}

.theme-community:hover .community-ecosystem-bg-canvas {
  opacity: 1;
}

/* 3. RATEHONK TRAVEL CRM: Professional, Business, CRM, Data */
.cinematic-story-card.theme-ratehonk,
.product-story.theme-ratehonk {
  background: linear-gradient(145deg, rgba(14, 24, 44, 0.85) 0%, rgba(9, 16, 30, 0.94) 100%);
  border-color: rgba(59, 130, 246, 0.28);
  box-shadow: inset 0 1px 0 rgba(96, 165, 250, 0.15), 0 20px 45px -15px rgba(0, 0, 0, 0.6);
}

.cinematic-story-card.theme-ratehonk:hover,
.product-story.theme-ratehonk:hover {
  border-color: rgba(59, 130, 246, 0.65);
  box-shadow: 0 32px 64px -16px rgba(0, 0, 0, 0.75), 
              0 0 40px -5px rgba(59, 130, 246, 0.3),
              inset 0 1px 0 rgba(96, 165, 250, 0.35);
}

.theme-ratehonk:hover .animate-pipeline-flow {
  filter: drop-shadow(0 0 14px rgba(59, 130, 246, 0.4));
}

.theme-ratehonk:hover .ratehonk-saas-bg-canvas {
  opacity: 1;
}

/* Shared Card Hover & Micro-movement */
.cinematic-story-card:hover .product-story-cta .btn-primary {
  filter: brightness(1.08);
}

.cinematic-story-card:hover .story-stage-canvas {
  border-color: rgba(255, 255, 255, 0.18);
}

.theme-aitalksy .product-story-cta a.btn-primary:hover {
  box-shadow: 0 8px 30px rgba(6, 182, 212, 0.52), 0 0 22px rgba(6, 182, 212, 0.32);
}

.theme-community .product-story-cta a.btn-primary:hover {
  box-shadow: 0 8px 30px rgba(16, 185, 129, 0.52), 0 0 22px rgba(16, 185, 129, 0.32);
}

.theme-ratehonk .product-story-cta a.btn-primary:hover {
  box-shadow: 0 8px 30px rgba(59, 130, 246, 0.52), 0 0 22px rgba(59, 130, 246, 0.32);
}

.product-background,
.story-stage-canvas {
  background: radial-gradient(circle at 50% 30%, rgba(30, 41, 59, 0.6) 0%, rgba(15, 20, 30, 0.95) 100%);
  border: 1px solid rgba(96, 105, 125, 0.25);
  border-radius: 1.25rem;
  position: relative;
  overflow: hidden;
  min-height: 420px;
}

/* Grid background texture */
.story-stage-grid {
  background-image: 
    linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
  background-size: 24px 24px;
}

/* Product Visualization Stage */
.product-visualization {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 270px;
  overflow: hidden;
}

/* Product Story Scene */
.product-story-scene,
.story-step-pane {
  will-change: transform, opacity;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
}

/* Product Story CTA */
.product-story-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
}

/* Step tracker button pill */
.story-step-pill {
  padding: 0.35rem 0.75rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 600;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  border: 1px solid rgba(96, 105, 125, 0.3);
  background: rgba(22, 28, 40, 0.6);
  color: #94a3b8;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  cursor: pointer;
  user-select: none;
}

.story-step-pill:hover {
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.3);
  transform: translateY(-1px);
}

.story-step-pill.active {
  background: rgba(232, 88, 39, 0.15);
  border-color: #e85827;
  color: #f97316;
  box-shadow: 0 0 12px rgba(232, 88, 39, 0.25);
  transform: translateY(-1px);
}

.story-step-pill.active.pill-cyan {
  background: rgba(6, 182, 212, 0.15);
  border-color: #06b6d4;
  color: #22d3ee;
  box-shadow: 0 0 12px rgba(6, 182, 212, 0.25);
}

.story-step-pill.active.pill-emerald {
  background: rgba(16, 185, 129, 0.15);
  border-color: #10b981;
  color: #34d399;
  box-shadow: 0 0 12px rgba(16, 185, 129, 0.25);
}

.story-step-pill.active.pill-blue {
  background: rgba(59, 130, 246, 0.15);
  border-color: #3b82f6;
  color: #60a5fa;
  box-shadow: 0 0 12px rgba(59, 130, 246, 0.25);
}

/* Animations for AI Talksy */
@keyframes aiPulseCore {
  0%, 100% {
    transform: scale(1) translate3d(0, 0, 0);
    box-shadow: 0 0 20px rgba(6, 182, 212, 0.4), inset 0 0 15px rgba(6, 182, 212, 0.2);
  }
  50% {
    transform: scale(1.06) translate3d(0, 0, 0);
    box-shadow: 0 0 35px rgba(6, 182, 212, 0.8), inset 0 0 25px rgba(6, 182, 212, 0.5);
  }
}

@keyframes aiOrbitSpin {
  from { transform: rotate(0deg) translate3d(0, 0, 0); }
  to { transform: rotate(360deg) translate3d(0, 0, 0); }
}

@keyframes aiOrbitSpinReverse {
  from { transform: rotate(360deg) translate3d(0, 0, 0); }
  to { transform: rotate(0deg) translate3d(0, 0, 0); }
}

.animate-ai-core {
  animation: aiPulseCore 3s ease-in-out infinite;
  will-change: transform, box-shadow;
}

.animate-orbit {
  animation: aiOrbitSpin 14s linear infinite;
  will-change: transform;
}

.animate-orbit-reverse {
  animation: aiOrbitSpinReverse 18s linear infinite;
  will-change: transform;
}

/* AI Talksy Dedicated Futuristic Background Canvas */
.aitalksy-neural-bg-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

/* Scene 1: Typing cursor */
@keyframes blinkCursor {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

.aitalksy-cursor {
  display: inline-block;
  font-weight: 700;
  color: #22d3ee;
  animation: blinkCursor 0.8s infinite;
}

/* Scene 2: Message moving toward AI (translate, opacity, scale, blur) */
@keyframes messageMoveTowardAI {
  0% {
    transform: translate3d(0, 18px, 0) scale(1);
    opacity: 0.95;
    filter: blur(0px);
  }
  35% {
    transform: translate3d(0, 0px, 0) scale(1.02);
    opacity: 1;
    filter: blur(0px);
  }
  70% {
    transform: translate3d(0, -18px, 0) scale(0.92);
    opacity: 0.75;
    filter: blur(1px);
  }
  100% {
    transform: translate3d(0, -32px, 0) scale(0.82);
    opacity: 0.3;
    filter: blur(2.5px);
  }
}

.animate-message-transfer {
  animation: messageMoveTowardAI 2.8s ease-in-out infinite;
  will-change: transform, opacity, filter;
}

/* Scene 3: Connected nodes around AI Orb */
@keyframes nodePulseGlow {
  0%, 100% {
    box-shadow: 0 0 10px rgba(6, 182, 212, 0.4);
    transform: scale(1);
  }
  50% {
    box-shadow: 0 0 20px rgba(6, 182, 212, 0.8);
    transform: scale(1.1);
  }
}

.ai-floating-node {
  animation: nodePulseGlow 3s ease-in-out infinite;
  will-change: transform, box-shadow;
}

/* Scene 4: Processing progression pills */
.processing-step-badge {
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.processing-step-badge.active-proc {
  background: rgba(6, 182, 212, 0.2);
  border-color: #06b6d4;
  color: #22d3ee;
  box-shadow: 0 0 12px rgba(6, 182, 212, 0.3);
}

/* Scene 6: Business Connection Network */
@keyframes signalFlow {
  0% {
    stroke-dashoffset: 24;
  }
  100% {
    stroke-dashoffset: 0;
  }
}

.business-connection-node {
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.business-connection-node:hover {
  transform: translateY(-2px) scale(1.04);
  border-color: #22d3ee;
  box-shadow: 0 0 15px rgba(6, 182, 212, 0.35);
}

/* Dynamic Soundwave Bars */
@keyframes soundwaveAnim {
  0%, 100% { height: 6px; }
  50% { height: 22px; }
}

.soundwave-bar {
  width: 3px;
  background: #22d3ee;
  border-radius: 9999px;
  animation: soundwaveAnim 1.2s ease-in-out infinite;
}

.soundwave-bar:nth-child(2) { animation-delay: 0.15s; }
.soundwave-bar:nth-child(3) { animation-delay: 0.3s; }
.soundwave-bar:nth-child(4) { animation-delay: 0.45s; }
.soundwave-bar:nth-child(5) { animation-delay: 0.6s; }

/* Typing indicator dots */
@keyframes typingBounce {
  0%, 80%, 100% {
    transform: translateY(0);
    opacity: 0.4;
  }
  40% {
    transform: translateY(-5px);
    opacity: 1;
  }
}

.typing-dot:nth-child(1) { animation: typingBounce 1.2s infinite ease-in-out 0s; }
.typing-dot:nth-child(2) { animation: typingBounce 1.2s infinite ease-in-out 0.2s; }
.typing-dot:nth-child(3) { animation: typingBounce 1.2s infinite ease-in-out 0.4s; }

/* Community Forum Ecosystem Animations & Background (Phase 7) */
.community-ecosystem-bg-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
  opacity: 0.85;
}

.theme-community-stage {
  background: radial-gradient(circle at 15% 25%, rgba(245, 158, 11, 0.08) 0%, transparent 45%),
              radial-gradient(circle at 85% 75%, rgba(16, 185, 129, 0.08) 0%, transparent 45%),
              radial-gradient(circle at 50% 50%, rgba(232, 88, 39, 0.04) 0%, transparent 60%),
              #131a26;
}

.community-person-node {
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.3s ease,
              box-shadow 0.3s ease;
}

.community-person-node:hover {
  transform: translateY(-3px) scale(1.03);
  border-color: rgba(16, 185, 129, 0.6);
  box-shadow: 0 8px 20px -4px rgba(16, 185, 129, 0.25);
}

/* Scene 2: Community pulse glow */
@keyframes communityPulseGlow {
  0%, 100% {
    box-shadow: 0 0 15px rgba(16, 185, 129, 0.3), 0 0 30px rgba(245, 158, 11, 0.15);
    transform: scale(1);
  }
  50% {
    box-shadow: 0 0 28px rgba(16, 185, 129, 0.6), 0 0 45px rgba(245, 158, 11, 0.35);
    transform: scale(1.03);
  }
}

.animate-community-pulse {
  animation: communityPulseGlow 2.8s ease-in-out infinite;
}

/* Scene 3: Professional verification animation */
@keyframes verificationStamp {
  0% {
    transform: scale(0.65) rotate(-6deg);
    opacity: 0;
  }
  70% {
    transform: scale(1.08) rotate(2deg);
    opacity: 1;
  }
  100% {
    transform: scale(1) rotate(0deg);
    opacity: 1;
  }
}

.animate-verification-stamp {
  animation: verificationStamp 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes shieldGlow {
  0%, 100% {
    box-shadow: 0 0 15px rgba(16, 185, 129, 0.3), inset 0 0 10px rgba(16, 185, 129, 0.2);
    transform: scale(1);
  }
  50% {
    box-shadow: 0 0 30px rgba(16, 185, 129, 0.7), inset 0 0 20px rgba(16, 185, 129, 0.4);
  transform: scale(1.05);
  }
}

.animate-shield-glow {
  animation: shieldGlow 2.5s ease-in-out infinite;
}

/* Scene 4: Smartphone enter & 7 services progression */
@keyframes phoneSlideIn {
  0% {
    transform: translateY(24px) scale(0.94);
    opacity: 0.6;
  }
  100% {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
}

.animate-phone-enter {
  animation: phoneSlideIn 0.55s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.comm-phone-service {
  transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), background 0.2s ease, border-color 0.2s ease;
}

.comm-phone-service:hover {
  background: rgba(15, 23, 42, 0.95);
  border-color: rgba(16, 185, 129, 0.6);
}

@keyframes featureDockIn {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.animate-feature-dock {
  animation: featureDockIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* RateHonk Travel CRM SaaS Animations & Background (Phase 8) */
.ratehonk-saas-bg-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
  opacity: 0.85;
}

.theme-ratehonk-stage {
  background: radial-gradient(circle at 10% 20%, rgba(59, 130, 246, 0.08) 0%, transparent 40%),
              radial-gradient(circle at 90% 80%, rgba(14, 165, 233, 0.08) 0%, transparent 40%),
              #111827;
}

@keyframes pipelineLeadShift {
  0% { transform: translateY(0); }
  25% { transform: translateY(-4px) scale(1.02); }
  50% { transform: translateY(0); }
  75% { transform: translateY(-4px) scale(1.02); }
  100% { transform: translateY(0); }
}

.animate-pipeline-flow {
  animation: pipelineLeadShift 3.2s ease-in-out infinite;
}

.pipeline-step-col {
  transition: all 0.3s ease;
}

.pipeline-step-col.active-col {
  background: rgba(59, 130, 246, 0.35);
  border-color: #3b82f6;
  color: #ffffff;
  box-shadow: 0 0 14px rgba(59, 130, 246, 0.4);
}

@keyframes voucherStampPop {
  0% {
    transform: scale(0.92) rotate(-2deg);
    opacity: 0.5;
  }
  60% {
    transform: scale(1.03) rotate(1deg);
    opacity: 1;
  }
  100% {
    transform: scale(1) rotate(0deg);
    opacity: 1;
  }
}

.animate-voucher-stamp {
  animation: voucherStampPop 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes pipelinePulse {
  0%, 100% {
    border-color: rgba(59, 130, 246, 0.4);
    box-shadow: 0 0 10px rgba(59, 130, 246, 0.2);
  }
  50% {
    border-color: rgba(59, 130, 246, 0.9);
    box-shadow: 0 0 20px rgba(59, 130, 246, 0.5);
  }
}

.animate-pipeline-glow {
  animation: pipelinePulse 2s ease-in-out infinite;
}

/* Delivery Projects Section Styling */
#delivery-projects .product-card {
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.35s ease,
              box-shadow 0.35s ease;
}

#delivery-projects .product-card:hover {
  transform: translateY(-6px);
  border-color: rgba(232, 88, 39, 0.45);
  box-shadow: 0 20px 35px -10px rgba(0, 0, 0, 0.6), 
              0 0 25px -5px rgba(232, 88, 39, 0.15);
}

/* ========================================================
   RESPONSIVE DESIGN: TABLET & MOBILE (PHASE 12)
   Desktop (1024px+): Cinematic storytelling with parallax
   Tablet (768px - 1023px): Reduced animation size, readable text
   Mobile (< 768px): Vertical stacking, zero horizontal scroll,
                     touch-friendly buttons, clear contrast
   ======================================================== */

/* TABLET (768px - 1023px) */
@media (min-width: 768px) and (max-width: 1023px) {
  .product-story,
  .cinematic-story-card {
    padding: 1.75rem !important;
  }

.story-stage-canvas {
    min-height: 360px !important;
  }

  .product-visualization {
    min-height: 240px !important;
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
  }

  .cinematic-story-card h3 {
    font-size: 1.5rem !important;
  }

  .cinematic-story-card p {
    font-size: 0.875rem !important;
    line-height: 1.5 !important;
  }

  .community-phone-frame {
    max-width: 250px !important;
  }

  .animate-ai-core {
    width: 3.5rem !important;
    height: 3.5rem !important;
    font-size: 1.25rem !important;
  }
}

/* MOBILE (< 768px) */
@media (max-width: 767px) {
  #products,
  .product-story,
  .cinematic-story-card,
  .story-stage-canvas,
  .product-visualization {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
  }

  .product-story,
  .cinematic-story-card {
    padding: 1.25rem 1rem !important;
    border-radius: 1.25rem !important;
  }

  .story-stage-canvas {
    min-height: 320px !important;
    padding: 1rem 0.75rem !important;
    border-radius: 1rem !important;
  }

  .product-visualization {
    min-height: 220px !important;
    padding-top: 0.75rem !important;
    padding-bottom: 0.75rem !important;
  }

  /* Full-width responsive buttons that never overflow screen */
  .product-story-cta {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    gap: 0.625rem !important;
  }

  .product-story-cta a.btn-primary,
  .product-story-cta button.product-modal-trigger {
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    text-align: center !important;
    padding: 0.75rem 1rem !important;
    font-size: 0.8125rem !important;
  }

  /* Compact navigation pills inside the stage */
  .story-step-pill {
    padding: 0.25rem 0.5rem !important;
    font-size: 0.6875rem !important;
    line-height: 1 !important;
  }

  /* RateHonk 5-step pipeline on mobile */
  #ratehonk-pipeline-tracker,
  #ratehonk-stage-step2 .grid-cols-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 0.25rem !important;
  }

  .pipeline-step-col,
  #ratehonk-stage-step2 .grid-cols-5 > div {
    padding: 0.35rem 0.15rem !important;
    font-size: 0.5625rem !important;
  }

  /* RateHonk KPI dashboard on mobile */
  #ratehonk-stage-step7 .grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 0.375rem !important;
  }

  /* Community Forum smartphone container on mobile */
  .community-phone-frame {
    max-width: 240px !important;
    padding: 0.5rem !important;
    border-width: 3px !important;
  }

  .comm-phone-service {
    padding: 0.375rem 0.5rem !important;
    font-size: 0.6875rem !important;
  }

  /* Ensure text is always on top of background canvas */
  .product-story-scene,
  .story-step-pane {
    position: relative !important;
    z-index: 10 !important;
  }

  .aitalksy-neural-bg-canvas,
  .community-ecosystem-bg-canvas,
  .ratehonk-saas-bg-canvas {
    opacity: 0.65 !important;
  }

  /* Ensure logos and images never break */
  .cinematic-story-card img {
    max-width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
  }
}

/* Accessibility: respect reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
  *, ::before, ::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }

  body {
    animation: none !important;
  }

  .hero-line-fade-up,
  .hero-line-delay-1,
  .hero-line-delay-2,
  .hero-line-delay-3,
  .hero-line-delay-4,
  .orange-shimmer-accent {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  .floating-tech-chip,
  .floating-glass-card,
  .ambient-glow-orb,
  .chip-pulse-dot {
    animation: none !important;
    transform: none !important;
  }

  .navbar-wrapper {
    animation: none !important;
    transform: none !important;
  }

  .service-card,
  .product-card,
  .product-story,
  .cinematic-story-card,
  .product-story-scene,
  .story-step-pane,
  .product-story-cta,
  .value-card,
  .glass-card,
  .btn-primary,
  .btn-secondary {
    transition: none !important;
    transform: none !important;
  }

  .animate-ai-core,
  .animate-orbit,
  .animate-orbit-reverse,
  .typing-dot,
  .soundwave-bar,
  .animate-shield-glow,
  .animate-feature-dock,
  .animate-voucher-stamp,
  .animate-pipeline-glow,
  .animate-community-pulse,
  .animate-verification-stamp,
  .animate-phone-enter,
  .comm-phone-service,
  .animate-pipeline-flow {
    animation: none !important;
  }

  .modal-overlay,
  .modal-container,
  .modal-overlay.active .modal-container {
    transition: none !important;
    transform: none !important;
  }
}

/* ========================================================
   #products — SaaS product presenter (section-scoped only)
   ======================================================== */

#products .vani-prod-panel-grid,
#products .vani-prod-copy,
#products .vani-prod-hero,
#products .vani-prod-hero-canvas,
#products .vani-prod-phone-stage,
#products .vani-prod-phone-3d,
#products .vani-prod-phone-frame {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}


#products .vani-prod-phone-stage {
  padding-inline: 4px;
}

#products .vani-prod-grid-bg {
  background-image: linear-gradient(rgba(15, 23, 42, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15, 23, 42, 0.035) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse 85% 65% at 50% 35%, #000 15%, transparent 72%);
}

#products .vani-prod-tab {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  min-height: 2.75rem;
  border-radius: 999px;
  border: 1px solid #e2e8f0;
  background: #fff;
  color: #475569;
  font-size: 0.8125rem;
  font-weight: 700;
  cursor: pointer;
  transition: border-color 0.25s, box-shadow 0.25s, color 0.2s;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

#products .vani-prod-tab-logo {
  width: 1.25rem;
  height: 1.25rem;
  object-fit: contain;
  border-radius: 0.35rem;
}

#products .vani-prod-tab.is-active {
  color: #0f172a;
  border-color: rgba(232, 88, 39, 0.45);
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.07);
}

#products .vani-prod-tab.is-active[data-vani-prod-tab='aitalksy'] {
  border-color: rgba(6, 182, 212, 0.45);
  background: linear-gradient(180deg, #fff, #ecfeff);
}

#products .vani-prod-tab.is-active[data-vani-prod-tab='community'] {
  border-color: rgba(16, 185, 129, 0.45);
  background: linear-gradient(180deg, #fff, #ecfdf5);
}

#products .vani-prod-tab.is-active[data-vani-prod-tab='traveljioo'] {
  border-color: rgba(59, 130, 246, 0.45);
  background: linear-gradient(180deg, #fff, #eff6ff);
}

#products .vani-prod-panel {
  display: none;
  padding: 1rem;
  border-radius: 1.5rem;
  background: transparent;
  border: none;
  box-shadow: none;
}

@media (min-width: 1024px) {
  #products .vani-prod-panel.is-active {
    padding: 0.5rem 0;
  }
}

#products .vani-prod-panel.is-active {
  display: block;
}

/* #products — vertical stack (all three products visible) */
#products.vani-prod-stacked .vani-prod-tablist-legacy {
  display: none !important;
}

#products.vani-prod-stacked .vani-prod-stack {
  display: flex;
  flex-direction: column;
  gap: clamp(2.5rem, 6vw, 4rem);
  width: 100%;
}

#products.vani-prod-stacked .vani-prod-panel {
  display: block;
  width: 100%;
  max-width: 100%;
  padding: clamp(1.25rem, 3vw, 1.75rem);
  border-radius: 1.25rem;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid #e2e8f0;
  box-shadow: 0 12px 40px rgba(15, 23, 42, 0.06);
}

#products.vani-prod-stacked .vani-prod-panel + .vani-prod-panel {
  margin-top: 0;
}

#products.vani-prod-stacked .vani-prod-stack-header {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin: 0 0 clamp(1rem, 2.5vw, 1.35rem);
  padding-bottom: 0.85rem;
  border-bottom: 1px solid #e2e8f0;
}

#products.vani-prod-stacked .vani-prod-stack-header-logo {
  width: 2rem;
  height: 2rem;
  object-fit: contain;
  border-radius: 0.45rem;
}

#products.vani-prod-stacked .vani-prod-stack-header-title {
  font-size: clamp(1.125rem, 2.5vw, 1.375rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #0f172a;
}

#products.vani-prod-stacked .vani-prod-stack-header-cyan .vani-prod-stack-header-title {
  color: #0e7490;
}

#products.vani-prod-stacked .vani-prod-stack-header-emerald .vani-prod-stack-header-title {
  color: #047857;
}

#products.vani-prod-stacked .vani-prod-stack-header-blue .vani-prod-stack-header-title {
  color: #1d4ed8;
}

@media (max-width: 1023px) {
  #products.vani-prod-stacked .vani-prod-stack {
    gap: clamp(2rem, 5vw, 3rem);
  }

  #products.vani-prod-stacked .vani-prod-panel {
    padding: 1rem 0.85rem 1.15rem;
  }
}

#products .vani-prod-feature {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  font-size: 0.875rem;
  line-height: 1.45;
  color: #64748b;
}

#products .vani-prod-feature-icon {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 0.65rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 0.85rem;
}

#products .vani-prod-icon-cyan {
  background: #ecfeff;
  color: #0891b2;
  border: 1px solid #a5f3fc;
}

#products .vani-prod-icon-emerald {
  background: #ecfdf5;
  color: #059669;
  border: 1px solid #6ee7b7;
}

#products .vani-prod-icon-blue {
  background: #eff6ff;
  color: #2563eb;
  border: 1px solid #93c5fd;
}

#products .vani-prod-copy {
  padding: 0.25rem 0;
}

/* AI Talksy — six feature cards (#vani-prod-panel-aitalksy only) */
#products [data-vani-prod-panel='aitalksy'] .vani-prod-aitalksy-feature-grid {
  width: 100%;
  padding: 0.85rem 0.75rem;
  border-radius: 0.85rem;
  background: linear-gradient(180deg, #fff 0%, #f8fafc 100%);
  border: 1px solid #e2e8f0;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.04);
}

#products [data-vani-prod-panel='aitalksy'] .vani-prod-aitalksy-features-label {
  margin: 0 0 0.7rem;
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #64748b;
}

#products [data-vani-prod-panel='aitalksy'] .vani-prod-aitalksy-features-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.65rem;
}

@media (min-width: 480px) {
  #products [data-vani-prod-panel='aitalksy'] .vani-prod-aitalksy-features-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.65rem;
  }
}

#products [data-vani-prod-panel='aitalksy'] .vani-prod-aitalksy-features-list > li {
  display: flex;
  min-height: 0;
}

#products [data-vani-prod-panel='aitalksy'] .vani-prod-aitalksy-feature-card {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  width: 100%;
  min-height: 4.25rem;
  text-align: left;
  padding: 0.75rem 0.8rem;
  border-radius: 0.85rem;
  background: #fff;
  border: 1px solid #e2e8f0;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  font: inherit;
  color: inherit;
  cursor: pointer;
  transition:
    border-color 0.25s ease,
    box-shadow 0.25s ease,
    transform 0.25s ease,
    background 0.25s ease;
}

#products [data-vani-prod-panel='aitalksy'] .vani-prod-aitalksy-feature-card.is-active {
  border-color: rgba(6, 182, 212, 0.55);
  box-shadow: 0 8px 22px rgba(6, 182, 212, 0.12);
}

#products [data-vani-prod-panel='aitalksy'] .vani-prod-aitalksy-feature-card:hover {
  border-color: rgba(6, 182, 212, 0.48);
  box-shadow: 0 12px 28px rgba(6, 182, 212, 0.12);
  transform: translateY(-3px);
  background: #fff;
}

#products [data-vani-prod-panel='aitalksy'] .vani-prod-aitalksy-feature-icon {
  flex-shrink: 0;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 0.65rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8125rem;
  color: #0891b2;
  background: linear-gradient(145deg, #ecfeff 0%, #cffafe 100%);
  border: 1px solid #a5f3fc;
  transition:
    background 0.25s ease,
    color 0.25s ease,
    transform 0.25s ease,
    box-shadow 0.25s ease;
}

#products [data-vani-prod-panel='aitalksy'] .vani-prod-aitalksy-feature-card:hover .vani-prod-aitalksy-feature-icon {
  background: linear-gradient(145deg, #cffafe 0%, #a5f3fc 100%);
  color: #0e7490;
  transform: scale(1.06);
  box-shadow: 0 4px 12px rgba(6, 182, 212, 0.18);
}

#products [data-vani-prod-panel='aitalksy'] .vani-prod-aitalksy-feature-text {
  flex: 1;
  min-width: 0;
}

#products [data-vani-prod-panel='aitalksy'] .vani-prod-aitalksy-feature-text strong {
  display: block;
  font-size: 0.8125rem;
  font-weight: 800;
  color: #0f172a;
  margin-bottom: 0.2rem;
  line-height: 1.3;
}

#products [data-vani-prod-panel='aitalksy'] .vani-prod-aitalksy-feature-text span {
  display: block;
  font-size: 0.6875rem;
  line-height: 1.5;
  color: #64748b;
}

@media (prefers-reduced-motion: reduce) {
  #products [data-vani-prod-panel='aitalksy'] .vani-prod-aitalksy-feature-card,
  #products [data-vani-prod-panel='aitalksy'] .vani-prod-aitalksy-feature-icon {
    transition: none;
  }

  #products [data-vani-prod-panel='aitalksy'] .vani-prod-aitalksy-feature-card:hover {
    transform: none;
  }

  #products [data-vani-prod-panel='aitalksy'] .vani-prod-aitalksy-feature-card:hover .vani-prod-aitalksy-feature-icon {
    transform: none;
  }
}

/* AI Talksy — verified integrations grid (screenshot-style, verified-only) */
#products [data-vani-prod-panel='aitalksy'] .vani-prod-aitalksy-integrations {
  width: 100%;
  padding: 0.85rem 0.75rem;
  border-radius: 0.85rem;
  background: linear-gradient(180deg, #fafbfc 0%, #f1f5f9 100%);
  border: 1px solid #e2e8f0;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.04);
}

#products [data-vani-prod-panel='aitalksy'] .vani-prod-aitalksy-integrations-head {
  margin-bottom: 0.75rem;
}

#products [data-vani-prod-panel='aitalksy'] .vani-prod-aitalksy-integrations-label {
  margin: 0 0 0.35rem;
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #64748b;
}

#products [data-vani-prod-panel='aitalksy'] .vani-prod-aitalksy-integrations-note {
  margin: 0;
  font-size: 0.6875rem;
  line-height: 1.5;
  color: #94a3b8;
  max-width: 42rem;
}

#products [data-vani-prod-panel='aitalksy'] .vani-prod-aitalksy-integrations-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.65rem;
}

@media (min-width: 480px) {
  #products [data-vani-prod-panel='aitalksy'] .vani-prod-aitalksy-integrations-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 768px) {
  #products [data-vani-prod-panel='aitalksy'] .vani-prod-aitalksy-integrations-list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  #products [data-vani-prod-panel='aitalksy'] .vani-prod-aitalksy-integrations-list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.7rem;
  }
}

#products [data-vani-prod-panel='aitalksy'] .vani-prod-aitalksy-integration-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  min-height: 5.25rem;
  padding: 0.65rem 0.5rem;
  border-radius: 0.75rem;
  background: #fff;
  border: 1px solid #e2e8f0;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05);
  text-align: center;
  transition:
    border-color 0.25s ease,
    box-shadow 0.25s ease,
    transform 0.25s ease,
    background 0.25s ease;
}

#products [data-vani-prod-panel='aitalksy'] .vani-prod-aitalksy-integration-card:hover {
  border-color: rgba(6, 182, 212, 0.42);
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
  transform: translateY(-2px);
  background: #fff;
}

#products [data-vani-prod-panel='aitalksy'] .vani-prod-aitalksy-integration-icon {
  width: 2.35rem;
  height: 2.35rem;
  border-radius: 0.65rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
  color: #0891b2;
  background: #fff;
  border: 1px solid #e2e8f0;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
  transition:
    background 0.25s ease,
    border-color 0.25s ease,
    color 0.25s ease,
    transform 0.25s ease;
}

#products [data-vani-prod-panel='aitalksy'] .vani-prod-aitalksy-integration-card:hover .vani-prod-aitalksy-integration-icon {
  transform: scale(1.05);
}

#products [data-vani-prod-panel='aitalksy'] .vani-prod-aitalksy-integration-icon-wa {
  color: #16a34a;
  background: #f0fdf4;
  border-color: #bbf7d0;
}

#products [data-vani-prod-panel='aitalksy'] .vani-prod-aitalksy-integration-icon-openai {
  color: #0f172a;
  background: #f8fafc;
  border-color: #e2e8f0;
}

#products [data-vani-prod-panel='aitalksy'] .vani-prod-aitalksy-integration-icon-gemini {
  color: #2563eb;
  background: #eff6ff;
  border-color: #bfdbfe;
}

#products [data-vani-prod-panel='aitalksy'] .vani-prod-aitalksy-integration-icon-slack {
  color: #7c3aed;
  background: #f5f3ff;
  border-color: #ddd6fe;
}

#products [data-vani-prod-panel='aitalksy'] .vani-prod-aitalksy-integration-icon-web {
  color: #0891b2;
  background: #ecfeff;
  border-color: #a5f3fc;
}

#products [data-vani-prod-panel='aitalksy'] .vani-prod-aitalksy-integration-icon-hook,
#products [data-vani-prod-panel='aitalksy'] .vani-prod-aitalksy-integration-icon-api {
  color: #475569;
  background: #f8fafc;
  border-color: #e2e8f0;
}

#products [data-vani-prod-panel='aitalksy'] .vani-prod-aitalksy-integration-name {
  font-size: 0.6875rem;
  font-weight: 700;
  color: #334155;
  line-height: 1.3;
  padding: 0 0.15rem;
}

#products [data-vani-prod-panel='aitalksy'] .vani-prod-aitalksy-integrations-foot {
  margin: 0.7rem 0 0;
  padding-top: 0.65rem;
  border-top: 1px dashed #cbd5e1;
  font-size: 0.625rem;
  line-height: 1.45;
  color: #94a3b8;
}

@media (prefers-reduced-motion: reduce) {
  #products [data-vani-prod-panel='aitalksy'] .vani-prod-aitalksy-integration-card,
  #products [data-vani-prod-panel='aitalksy'] .vani-prod-aitalksy-integration-icon {
    transition: none;
  }

  #products [data-vani-prod-panel='aitalksy'] .vani-prod-aitalksy-integration-card:hover {
    transform: none;
  }

  #products [data-vani-prod-panel='aitalksy'] .vani-prod-aitalksy-integration-card:hover .vani-prod-aitalksy-integration-icon {
    transform: none;
  }
}

/* AI Talksy — how-it-works demo */
#products [data-vani-prod-panel='aitalksy'] .vani-prod-aitalksy-hiw {
  width: 100%;
  padding: 0.85rem 0.75rem;
  border-radius: 0.85rem;
  background: linear-gradient(180deg, #fff 0%, #f8fafc 100%);
  border: 1px solid #e2e8f0;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.05);
}

#products [data-vani-prod-panel='aitalksy'] .vani-prod-aitalksy-hiw-top {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem 0.75rem;
  margin-bottom: 0.75rem;
}

#products [data-vani-prod-panel='aitalksy'] .vani-prod-aitalksy-hiw-label {
  margin: 0 0 0.2rem;
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #64748b;
}

#products [data-vani-prod-panel='aitalksy'] .vani-prod-aitalksy-hiw-disclaimer {
  margin: 0;
  font-size: 0.6875rem;
  color: #94a3b8;
  line-height: 1.4;
  max-width: 22rem;
}

#products [data-vani-prod-panel='aitalksy'] .vani-prod-aitalksy-hiw-replay {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.7rem;
  border-radius: 999px;
  border: 1px solid #e2e8f0;
  background: #fff;
  font-size: 0.6875rem;
  font-weight: 700;
  color: #475569;
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease;
}

#products [data-vani-prod-panel='aitalksy'] .vani-prod-aitalksy-hiw-replay:hover {
  border-color: rgba(6, 182, 212, 0.45);
  color: #0e7490;
}

#products [data-vani-prod-panel='aitalksy'] .vani-prod-aitalksy-hiw-progress {
  height: 0.25rem;
  margin: 0 0 0.75rem;
  border-radius: 999px;
  background: #e2e8f0;
  overflow: hidden;
}

#products [data-vani-prod-panel='aitalksy'] .vani-prod-aitalksy-hiw-progress span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #06b6d4, #0891b2);
  transition: width 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

#products [data-vani-prod-panel='aitalksy'] .vani-prod-aitalksy-hiw.is-workflow-complete .vani-prod-aitalksy-hiw-progress span {
  background: linear-gradient(90deg, #059669, #047857);
}

#products [data-vani-prod-panel='aitalksy'] .vani-prod-aitalksy-hiw-complete {
  margin: 0.75rem 0 0;
  padding: 0.55rem 0.65rem;
  border-radius: 0.55rem;
  font-size: 0.6875rem;
  font-weight: 700;
  color: #047857;
  background: #ecfdf5;
  border: 1px solid #a7f3d0;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

#products [data-vani-prod-panel='aitalksy'] .vani-prod-aitalksy-hiw-complete[hidden] {
  display: none !important;
}

#products [data-vani-prod-panel='aitalksy'] .vani-prod-aitalksy-hiw-wa-preview {
  margin-top: 0.45rem;
  padding: 0.4rem;
  border-radius: 0.45rem;
  background: #ecfdf5;
  border: 1px solid #bbf7d0;
  opacity: 0;
  transform: translateY(6px);
}

#products [data-vani-prod-panel='aitalksy'] .vani-prod-aitalksy-hiw-wa-preview.is-visible {
  opacity: 1;
  transform: none;
  transition:
    opacity 0.35s ease,
    transform 0.35s ease;
}

#products [data-vani-prod-panel='aitalksy'] .vani-prod-aitalksy-hiw-wa-bubble-out {
  display: inline-block;
  max-width: 100%;
  padding: 0.35rem 0.45rem;
  border-radius: 0.45rem 0.45rem 0.1rem 0.45rem;
  background: #dcfce7;
  color: #14532d;
  font-size: 0.625rem;
  line-height: 1.35;
}

#products [data-vani-prod-panel='aitalksy'] .vani-prod-aitalksy-hiw-preview.is-step-pulse {
  animation: vani-prod-hiw-preview-pulse 0.45s ease-out;
}

@keyframes vani-prod-hiw-preview-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(6, 182, 212, 0.35);
  }
  100% {
    box-shadow: 0 0 0 6px rgba(6, 182, 212, 0);
  }
}

#products [data-vani-prod-panel='aitalksy'] .vani-prod-aitalksy-hiw-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
}

@media (min-width: 640px) {
  #products [data-vani-prod-panel='aitalksy'] .vani-prod-aitalksy-hiw-layout {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    gap: 0.85rem;
    align-items: start;
  }
}

#products [data-vani-prod-panel='aitalksy'] .vani-prod-aitalksy-hiw-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

#products [data-vani-prod-panel='aitalksy'] .vani-prod-aitalksy-hiw-step {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.5rem;
  align-items: start;
  width: 100%;
  text-align: left;
  padding: 0.5rem 0.55rem;
  border-radius: 0.65rem;
  border: 1px solid #e2e8f0;
  background: #fff;
  cursor: pointer;
  font: inherit;
  opacity: 0.72;
  transition: opacity 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

#products [data-vani-prod-panel='aitalksy'] .vani-prod-aitalksy-hiw-step.is-active {
  opacity: 1;
  border-color: rgba(6, 182, 212, 0.5);
  box-shadow: 0 6px 18px rgba(6, 182, 212, 0.1);
}

#products [data-vani-prod-panel='aitalksy'] .vani-prod-aitalksy-hiw-step.is-done {
  opacity: 0.9;
}

#products [data-vani-prod-panel='aitalksy'] .vani-prod-aitalksy-hiw-step-num {
  font-size: 0.6875rem;
  font-weight: 800;
  color: #0891b2;
  font-variant-numeric: tabular-nums;
}

#products [data-vani-prod-panel='aitalksy'] .vani-prod-aitalksy-hiw-step-body strong {
  display: block;
  font-size: 0.75rem;
  color: #0f172a;
  margin-bottom: 0.1rem;
}

#products [data-vani-prod-panel='aitalksy'] .vani-prod-aitalksy-hiw-step-body span {
  display: block;
  font-size: 0.6875rem;
  color: #64748b;
  line-height: 1.35;
}

#products [data-vani-prod-panel='aitalksy'] .vani-prod-aitalksy-hiw-preview {
  position: relative;
  min-height: 11.5rem;
  padding: 0.65rem;
  border-radius: 0.65rem;
  background: #fff;
  border: 1px solid #e2e8f0;
  overflow: hidden;
}

#products [data-vani-prod-panel='aitalksy'] .vani-prod-aitalksy-hiw-preview-badge {
  margin: 0 0 0.5rem;
  font-size: 0.625rem;
  font-weight: 700;
  color: #64748b;
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

#products [data-vani-prod-panel='aitalksy'] .vani-prod-aitalksy-hiw-scene {
  display: none;
}

#products [data-vani-prod-panel='aitalksy'] .vani-prod-aitalksy-hiw-scene.is-active {
  display: block;
  animation: vani-prod-hiw-scene-in 0.38s ease-out;
}

@keyframes vani-prod-hiw-scene-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  #products [data-vani-prod-panel='aitalksy'] .vani-prod-aitalksy-hiw-scene.is-active {
    animation: none;
  }
  #products [data-vani-prod-panel='aitalksy'] .vani-prod-aitalksy-hiw-preview.is-step-pulse {
    animation: none;
  }
}

#products [data-vani-prod-panel='aitalksy'] .vani-prod-aitalksy-hiw-ui-card {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.5rem;
  border-radius: 0.55rem;
  border: 1px solid #e2e8f0;
  margin-bottom: 0.55rem;
}

#products [data-vani-prod-panel='aitalksy'] .vani-prod-aitalksy-hiw-wa-icon {
  width: 2rem;
  height: 2rem;
  border-radius: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #dcfce7;
  color: #16a34a;
  font-size: 1rem;
}

#products [data-vani-prod-panel='aitalksy'] .vani-prod-aitalksy-hiw-ui-card strong {
  display: block;
  font-size: 0.75rem;
  color: #0f172a;
}

#products [data-vani-prod-panel='aitalksy'] .vani-prod-aitalksy-hiw-ui-card span {
  font-size: 0.6875rem;
  color: #64748b;
}

#products [data-vani-prod-panel='aitalksy'] .vani-prod-aitalksy-hiw-ui-btn {
  width: 100%;
  padding: 0.45rem 0.55rem;
  border: none;
  border-radius: 0.5rem;
  background: linear-gradient(135deg, #059669, #047857);
  color: #fff;
  font-size: 0.6875rem;
  font-weight: 800;
  cursor: default;
}

#products [data-vani-prod-panel='aitalksy'] .vani-prod-aitalksy-hiw-ui-btn.is-pulse {
  animation: vani-prod-hiw-pulse 0.55s ease-out 2;
}

@keyframes vani-prod-hiw-pulse {
  50% {
    transform: scale(0.97);
    filter: brightness(0.95);
  }
}

#products [data-vani-prod-panel='aitalksy'] .vani-prod-aitalksy-hiw-ui-status {
  margin: 0.5rem 0 0;
  font-size: 0.6875rem;
  font-weight: 700;
  color: #047857;
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

#products [data-vani-prod-panel='aitalksy'] .vani-prod-aitalksy-hiw-ui-title {
  margin: 0 0 0.5rem;
  font-size: 0.75rem;
  font-weight: 800;
  color: #0f172a;
}

#products [data-vani-prod-panel='aitalksy'] .vani-prod-aitalksy-hiw-tag {
  display: inline-block;
  margin-left: 0.25rem;
  padding: 0.08rem 0.35rem;
  border-radius: 999px;
  background: #f1f5f9;
  color: #64748b;
  font-size: 0.5625rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

#products [data-vani-prod-panel='aitalksy'] .vani-prod-aitalksy-hiw-contact-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

#products [data-vani-prod-panel='aitalksy'] .vani-prod-aitalksy-hiw-contact {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.4rem 0.45rem;
  border-radius: 0.45rem;
  border: 1px dashed #cbd5e1;
  font-size: 0.6875rem;
  color: #334155;
  opacity: 0;
  transform: translateY(6px);
}

#products [data-vani-prod-panel='aitalksy'] .vani-prod-aitalksy-hiw-field {
  display: block;
  margin-bottom: 0.45rem;
  font-size: 0.6875rem;
  color: #64748b;
}

#products [data-vani-prod-panel='aitalksy'] .vani-prod-aitalksy-hiw-select {
  display: block;
  margin-top: 0.2rem;
  padding: 0.4rem 0.45rem;
  border-radius: 0.45rem;
  border: 1px solid #a5f3fc;
  background: #ecfeff;
  color: #0e7490;
  font-weight: 700;
}

#products [data-vani-prod-panel='aitalksy'] .vani-prod-aitalksy-hiw-select.is-highlight {
  box-shadow: 0 0 0 2px rgba(6, 182, 212, 0.35);
}

#products [data-vani-prod-panel='aitalksy'] .vani-prod-aitalksy-hiw-toggle {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.6875rem;
  font-weight: 600;
  color: #334155;
}

#products [data-vani-prod-panel='aitalksy'] .vani-prod-aitalksy-hiw-ui-foot {
  margin: 0.5rem 0 0;
  font-size: 0.6875rem;
  font-weight: 700;
  color: #0891b2;
}

#products [data-vani-prod-panel='aitalksy'] .vani-prod-aitalksy-hiw-metrics {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

#products [data-vani-prod-panel='aitalksy'] .vani-prod-aitalksy-hiw-metric {
  font-size: 0.6875rem;
  color: #64748b;
}

#products [data-vani-prod-panel='aitalksy'] .vani-prod-aitalksy-hiw-metric strong {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.8125rem;
  color: #0f172a;
}

#products [data-vani-prod-panel='aitalksy'] .vani-prod-aitalksy-hiw-bar {
  height: 0.35rem;
  margin-top: 0.2rem;
  border-radius: 999px;
  background: #f1f5f9;
  overflow: hidden;
}

#products [data-vani-prod-panel='aitalksy'] .vani-prod-aitalksy-hiw-bar span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #0891b2, #06b6d4);
  transition: width 0.6s ease;
}

#products [data-vani-prod-panel='aitalksy'] .vani-prod-aitalksy-hiw-result {
  margin: 0.65rem 0 0;
  padding: 0.45rem 0.5rem;
  border-radius: 0.45rem;
  background: #ecfdf5;
  border: 1px solid #6ee7b7;
  font-size: 0.6875rem;
  font-weight: 700;
  color: #047857;
}

#products.vani-prod-hiw-static [data-vani-prod-panel='aitalksy'] .vani-prod-aitalksy-hiw-contact {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  #products [data-vani-prod-panel='aitalksy'] .vani-prod-aitalksy-hiw-ui-btn.is-pulse {
    animation: none;
  }
}

/* AI Talksy — interactive phone preview (HIW workflow) */
#products [data-vani-prod-panel='aitalksy'] .vani-prod-aitalksy-web-badge {
  margin: 0 0.65rem 0.35rem;
  padding: 0.25rem 0.45rem;
  font-size: 0.5625rem;
  font-weight: 700;
  color: #64748b;
  text-align: center;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid #e2e8f0;
}

#products [data-vani-prod-panel='aitalksy'] .vani-prod-aitalksy-orbit {
  position: absolute;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.4rem 0.55rem;
  border-radius: 0.55rem;
  background: #fff;
  border: 1px solid #e2e8f0;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
  font-size: 0.625rem;
  font-weight: 700;
  color: #334155;
}

#products [data-vani-prod-panel='aitalksy'] .vani-prod-aitalksy-orbit-left {
  left: 4%;
  top: 18%;
}

#products [data-vani-prod-panel='aitalksy'] .vani-prod-aitalksy-orbit-right {
  right: 4%;
  top: 28%;
}

#products [data-vani-prod-panel='aitalksy'] .vani-prod-aitalksy-orbit i {
  color: #0891b2;
}

#products [data-vani-prod-panel='aitalksy'] .vani-prod-aitalksy-preview-controls {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 0.65rem;
}

#products [data-vani-prod-panel='aitalksy'] .vani-prod-aitalksy-preview-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.4rem 0.75rem;
  border-radius: 999px;
  border: 1px solid #e2e8f0;
  background: #fff;
  font-size: 0.6875rem;
  font-weight: 700;
  color: #475569;
  cursor: pointer;
}

#products [data-vani-prod-panel='aitalksy'] .vani-prod-aitalksy-preview-btn:hover {
  border-color: rgba(6, 182, 212, 0.45);
  color: #0e7490;
}

#products [data-vani-prod-panel='aitalksy'] .vani-prod-aitalksy-preview-btn[aria-pressed='true'] {
  border-color: #0891b2;
  color: #0e7490;
  background: #ecfeff;
}

#products [data-vani-prod-panel='aitalksy'] .vani-prod-aitalksy-demo-nav {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.15rem;
  padding: 0.35rem 0.25rem 0.45rem;
}

#products [data-vani-prod-panel='aitalksy'] .vani-prod-aitalksy-demo-nav button {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.1rem;
  padding: 0.25rem 0.15rem;
  border: none;
  background: transparent;
  font-size: 0.5rem;
  font-weight: 700;
  color: #94a3b8;
  cursor: pointer;
  border-radius: 0.35rem;
}

#products [data-vani-prod-panel='aitalksy'] .vani-prod-aitalksy-demo-nav button.is-on {
  color: #0891b2;
  background: rgba(6, 182, 212, 0.08);
}

#products [data-vani-prod-panel='aitalksy'] .vani-prod-aitalksy-feature-nav {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0.1rem;
  padding: 0.35rem 0.2rem 0.45rem;
}

#products [data-vani-prod-panel='aitalksy'] .vani-prod-aitalksy-feature-nav button {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.35rem 0.1rem;
  border: none;
  background: transparent;
  font-size: 0.85rem;
  color: #94a3b8;
  cursor: pointer;
  border-radius: 0.35rem;
}

#products [data-vani-prod-panel='aitalksy'] .vani-prod-aitalksy-feature-nav button.is-on {
  color: #0891b2;
  background: rgba(6, 182, 212, 0.1);
}

#products [data-vani-prod-panel='aitalksy'] .vani-prod-aitalksy-integrations-list > li {
  list-style: none;
}

#products [data-vani-prod-panel='aitalksy'] button.vani-prod-aitalksy-integration-card {
  width: 100%;
  font: inherit;
  cursor: pointer;
}

#products [data-vani-prod-panel='aitalksy'] button.vani-prod-aitalksy-integration-card.is-active {
  border-color: rgba(6, 182, 212, 0.55);
  box-shadow: 0 0 0 2px rgba(6, 182, 212, 0.15);
}

#products [data-vani-prod-panel='aitalksy'] .vani-prod-aitalksy-feat-view {
  min-height: 10.5rem;
}

#products [data-vani-prod-panel='aitalksy'] .vani-prod-aitalksy-phone-select.is-compact {
  display: block;
  margin: 0.35rem 0;
  font-size: 0.625rem;
  line-height: 1.35;
}

#products [data-vani-prod-panel='aitalksy'] .vani-prod-aitalksy-feat-card {
  margin-bottom: 0.35rem;
  padding: 0.35rem 0.4rem;
}

#products [data-vani-prod-panel='aitalksy'] .vani-prod-aitalksy-phone-int-list {
  list-style: none;
  margin: 0.35rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  font-size: 0.625rem;
}

#products [data-vani-prod-panel='aitalksy'] .vani-prod-aitalksy-phone-int-list li {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.4rem;
  border-radius: 0.4rem;
  border: 1px solid #e2e8f0;
  background: #f8fafc;
}

#products [data-vani-prod-panel='aitalksy'] .vani-prod-aitalksy-phone-int-list li .vani-prod-aitalksy-tag {
  margin-left: auto;
}

#products [data-vani-prod-panel='aitalksy'] .vani-prod-aitalksy-feat-back {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  margin-bottom: 0.35rem;
  padding: 0.15rem 0.35rem;
  border: none;
  background: transparent;
  font-size: 0.625rem;
  font-weight: 700;
  color: #0891b2;
  cursor: pointer;
}

#products [data-vani-prod-panel='aitalksy'] .vani-prod-aitalksy-feat-proc {
  margin-top: 0.35rem;
}

#products [data-vani-prod-panel='aitalksy'] .vani-prod-aitalksy-hiw-view {
  min-height: 10.5rem;
}

#products [data-vani-prod-panel='aitalksy'] .vani-prod-aitalksy-wa-header {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin-bottom: 0.45rem;
  padding: 0.35rem 0.4rem;
  border-radius: 0.45rem;
  background: #075e54;
  color: #ecfdf5;
  font-size: 0.6875rem;
  font-weight: 800;
}

#products [data-vani-prod-panel='aitalksy'] .vani-prod-aitalksy-connect-card {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.45rem;
  border-radius: 0.45rem;
  border: 1px solid #e2e8f0;
  margin-bottom: 0.45rem;
}

#products [data-vani-prod-panel='aitalksy'] .vani-prod-aitalksy-wa-avatar {
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 0.45rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #dcfce7;
  color: #16a34a;
}

#products [data-vani-prod-panel='aitalksy'] .vani-prod-aitalksy-connect-btn {
  width: 100%;
  padding: 0.4rem;
  border: none;
  border-radius: 0.45rem;
  background: linear-gradient(135deg, #059669, #047857);
  color: #fff;
  font-size: 0.625rem;
  font-weight: 800;
}

#products [data-vani-prod-panel='aitalksy'] .vani-prod-aitalksy-connect-btn.is-pulse {
  animation: vani-prod-hiw-pulse 0.55s ease-out 2;
}

#products [data-vani-prod-panel='aitalksy'] .vani-prod-aitalksy-connect-status {
  margin: 0.45rem 0 0;
  font-size: 0.625rem;
  font-weight: 700;
  color: #047857;
}

#products [data-vani-prod-panel='aitalksy'] .vani-prod-aitalksy-wa-thread {
  margin-top: 0.55rem;
  padding: 0.45rem;
  border-radius: 0.45rem;
  background: linear-gradient(180deg, #e5ddd5 0%, #d9d0c7 100%);
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

#products [data-vani-prod-panel='aitalksy'] .vani-prod-aitalksy-wa-thread-compact {
  margin-top: 0.45rem;
}

#products [data-vani-prod-panel='aitalksy'] .vani-prod-aitalksy-wa-bubble {
  max-width: 88%;
  padding: 0.35rem 0.45rem;
  border-radius: 0.45rem;
  font-size: 0.625rem;
  line-height: 1.35;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.06);
}

#products [data-vani-prod-panel='aitalksy'] .vani-prod-aitalksy-wa-bubble-in {
  align-self: flex-start;
  background: #fff;
  color: #1e293b;
}

#products [data-vani-prod-panel='aitalksy'] .vani-prod-aitalksy-wa-bubble-out {
  align-self: flex-end;
  background: #dcf8c6;
  color: #14532d;
}

#products [data-vani-prod-panel='aitalksy'] .vani-prod-aitalksy-phone-contacts {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

#products [data-vani-prod-panel='aitalksy'] .vani-prod-aitalksy-phone-contact {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.35rem 0.4rem;
  border-radius: 0.4rem;
  border: 1px dashed #cbd5e1;
  font-size: 0.625rem;
  opacity: 0;
  transform: translateY(6px);
}

#products.vani-prod-hiw-static [data-vani-prod-panel='aitalksy'] .vani-prod-aitalksy-phone-contact {
  opacity: 1;
  transform: none;
}

#products [data-vani-prod-panel='aitalksy'] .vani-prod-aitalksy-tag {
  font-size: 0.5rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.06rem 0.3rem;
  border-radius: 999px;
  background: #f1f5f9;
  color: #64748b;
}

#products [data-vani-prod-panel='aitalksy'] .vani-prod-aitalksy-phone-foot {
  margin: 0.45rem 0 0;
  font-size: 0.625rem;
  font-weight: 700;
  color: #0891b2;
}

#products [data-vani-prod-panel='aitalksy'] .vani-prod-aitalksy-phone-field {
  display: block;
  margin-bottom: 0.4rem;
  font-size: 0.625rem;
  color: #64748b;
}

#products [data-vani-prod-panel='aitalksy'] .vani-prod-aitalksy-phone-select {
  display: block;
  margin-top: 0.15rem;
  padding: 0.35rem 0.4rem;
  border-radius: 0.4rem;
  border: 1px solid #a5f3fc;
  background: #ecfeff;
  color: #0e7490;
  font-weight: 700;
}

#products [data-vani-prod-panel='aitalksy'] .vani-prod-aitalksy-phone-select.is-highlight {
  box-shadow: 0 0 0 2px rgba(6, 182, 212, 0.35);
}

#products [data-vani-prod-panel='aitalksy'] .vani-prod-aitalksy-phone-toggle {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.625rem;
  font-weight: 600;
  margin-bottom: 0.35rem;
}

#products [data-vani-prod-panel='aitalksy'] .vani-prod-aitalksy-phone-metrics {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

#products [data-vani-prod-panel='aitalksy'] .vani-prod-aitalksy-phone-metric {
  font-size: 0.625rem;
  color: #64748b;
}

#products [data-vani-prod-panel='aitalksy'] .vani-prod-aitalksy-phone-metric strong {
  display: block;
  margin-top: 0.1rem;
  color: #0f172a;
  font-size: 0.6875rem;
}

#products [data-vani-prod-panel='aitalksy'] .vani-prod-aitalksy-phone-bar {
  height: 0.3rem;
  margin-top: 0.15rem;
  border-radius: 999px;
  background: #f1f5f9;
  overflow: hidden;
}

#products [data-vani-prod-panel='aitalksy'] .vani-prod-aitalksy-phone-bar span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #0891b2, #06b6d4);
  transition: width 0.55s ease;
}

/* AI Talksy — Phase 6 responsive layout & accessibility (panel-scoped only) */
#products [data-vani-prod-panel='aitalksy'] .vani-prod-aitalksy-feature-card {
  position: relative;
}

#products [data-vani-prod-panel='aitalksy'] .vani-prod-aitalksy-feature-card.is-active::after {
  content: 'Selected';
  position: absolute;
  top: 0.45rem;
  right: 0.5rem;
  font-size: 0.5625rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #0e7490;
  padding: 0.1rem 0.35rem;
  border-radius: 999px;
  border: 1px solid rgba(6, 182, 212, 0.45);
  background: #ecfeff;
}

#products [data-vani-prod-panel='aitalksy'] .vani-prod-aitalksy-feature-card.is-active {
  box-shadow:
    inset 3px 0 0 #0891b2,
    0 8px 22px rgba(6, 182, 212, 0.12);
}

#products [data-vani-prod-panel='aitalksy'] .vani-prod-aitalksy-hiw-step.is-active {
  box-shadow:
    inset 3px 0 0 #0891b2,
    0 6px 18px rgba(6, 182, 212, 0.1);
}

#products [data-vani-prod-panel='aitalksy'] .vani-prod-aitalksy-hiw-step.is-done .vani-prod-aitalksy-hiw-step-num::after {
  content: ' ✓';
  font-size: 0.625rem;
  color: #047857;
}

#products [data-vani-prod-panel='aitalksy'] .vani-prod-aitalksy-demo-nav button.is-on {
  box-shadow: inset 0 -2px 0 #0891b2;
  font-weight: 800;
}

#products [data-vani-prod-panel='aitalksy'] .vani-prod-aitalksy-feature-card:focus-visible,
#products [data-vani-prod-panel='aitalksy'] .vani-prod-aitalksy-integration-card:focus-visible,
#products [data-vani-prod-panel='aitalksy'] .vani-prod-aitalksy-feature-nav button:focus-visible,
#products [data-vani-prod-panel='aitalksy'] .vani-prod-aitalksy-hiw-step:focus-visible,
#products [data-vani-prod-panel='aitalksy'] .vani-prod-aitalksy-hiw-replay:focus-visible,
#products [data-vani-prod-panel='aitalksy'] .vani-prod-aitalksy-preview-btn:focus-visible,
#products [data-vani-prod-panel='aitalksy'] .vani-prod-aitalksy-demo-nav button:focus-visible,
#products [data-vani-prod-panel='aitalksy'] .vani-prod-feature-step:focus-visible,
#products [data-vani-prod-panel='aitalksy'] .vani-prod-feature-nav-btn:focus-visible,
#products [data-vani-prod-panel='aitalksy'] .vani-prod-feature-dot:focus-visible,
#products [data-vani-prod-panel='aitalksy'] .vani-prod-feature-resume:focus-visible {
  outline: 2px solid #0891b2;
  outline-offset: 2px;
}

#products [data-vani-prod-panel='aitalksy'] .vani-prod-panel-grid {
  overflow-x: clip;
}

@media (min-width: 1024px) {
  #products [data-vani-prod-panel='aitalksy'] .vani-prod-aitalksy-feature-grid {
    padding: 0.15rem 0;
    margin-top: 0.25rem;
  }

  #products [data-vani-prod-panel='aitalksy'] .vani-prod-aitalksy-features-list {
    gap: 0.65rem;
  }

  #products [data-vani-prod-panel='aitalksy'] .vani-prod-aitalksy-integrations {
    padding: 0.85rem 0.75rem;
  }

  #products [data-vani-prod-panel='aitalksy'] .vani-prod-aitalksy-integrations-list {
    gap: 0.55rem;
  }

  #products [data-vani-prod-panel='aitalksy'] .vani-prod-hero {
    align-self: center;
    width: 100%;
  }

  #products [data-vani-prod-panel='aitalksy'] .vani-prod-hero-canvas {
    min-height: clamp(500px, 58vh, 640px);
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  #products [data-vani-prod-panel='aitalksy'] .vani-prod-aitalksy-features-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.55rem;
  }

  #products [data-vani-prod-panel='aitalksy'] .vani-prod-aitalksy-integrations-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  #products [data-vani-prod-panel='aitalksy'] .vani-prod-hero-canvas {
    min-height: clamp(400px, 44vh, 520px);
    padding: clamp(1rem, 2.2vw, 1.45rem);
  }

  #products [data-vani-prod-panel='aitalksy'] .vani-prod-phone-stage {
    width: min(100%, clamp(280px, 46vw, 380px));
  }

  #products [data-vani-prod-panel='aitalksy'] .vani-prod-aitalksy-orbit {
    display: none;
  }

  #products [data-vani-prod-panel='aitalksy'] .vani-prod-float {
    max-width: min(168px, 30vw);
    font-size: 0.5625rem;
    padding: 0.35rem 0.45rem;
  }

  #products [data-vani-prod-panel='aitalksy'] .vani-prod-aitalksy-hiw-layout {
    gap: 0.65rem;
  }
}

@media (max-width: 1023px) {
  #products [data-vani-prod-panel='aitalksy'] .vani-prod-aitalksy-features-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
  }

  #products [data-vani-prod-panel='aitalksy'] .vani-prod-aitalksy-feature-text span {
  font-size: 0.75rem;
    line-height: 1.45;
  }

  #products [data-vani-prod-panel='aitalksy'] .vani-prod-aitalksy-integrations-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.45rem;
  }

  #products [data-vani-prod-panel='aitalksy'] .vani-prod-aitalksy-integration-name {
    font-size: 0.6875rem;
    line-height: 1.3;
    word-break: break-word;
  }

  #products [data-vani-prod-panel='aitalksy'] .vani-prod-hero-canvas {
    min-height: clamp(360px, 88vw, 460px);
    overflow: hidden;
  }

  #products [data-vani-prod-panel='aitalksy'] .vani-prod-aitalksy-orbit {
    display: none;
  }

  #products [data-vani-prod-panel='aitalksy'] .vani-prod-float {
    max-width: min(150px, 42vw);
    font-size: 0.5625rem;
  }

  #products [data-vani-prod-panel='aitalksy'] .vani-prod-aitalksy-demo-nav button {
    min-height: 2.75rem;
    touch-action: manipulation;
  }

  #products [data-vani-prod-panel='aitalksy'] .vani-prod-aitalksy-preview-btn {
    min-height: 2.75rem;
    min-width: 5.5rem;
    touch-action: manipulation;
  }

  #products [data-vani-prod-panel='aitalksy'] .vani-prod-aitalksy-hiw-step {
    min-height: 2.75rem;
    touch-action: manipulation;
  }

  #products [data-vani-prod-panel='aitalksy'] .vani-prod-feature-explore {
    flex-wrap: wrap;
    row-gap: 0.65rem;
  }

  #products [data-vani-prod-panel='aitalksy'] .vani-prod-feature-nav-btn,
  #products [data-vani-prod-panel='aitalksy'] .vani-prod-feature-resume {
    min-height: 2.75rem;
    min-width: 2.75rem;
    touch-action: manipulation;
  }

  #products [data-vani-prod-panel='aitalksy'] .vani-prod-feature-dot::before {
    inset: -0.75rem;
  }
}

@media (max-width: 479px) {
  #products [data-vani-prod-panel='aitalksy'] .vani-prod-aitalksy-integrations-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.4rem;
  }

  #products [data-vani-prod-panel='aitalksy'] .vani-prod-aitalksy-integration-card {
    min-height: 4.75rem;
    padding: 0.5rem 0.35rem;
  }

  #products [data-vani-prod-panel='aitalksy'] .vani-prod-aitalksy-feature-card.is-active::after {
    position: static;
    display: inline-block;
    margin-top: 0.35rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  #products [data-vani-prod-panel='aitalksy'] .vani-prod-phone-3d,
  #products [data-vani-prod-panel='aitalksy'] .vani-prod-phone-drop,
  #products [data-vani-prod-panel='aitalksy'] .vani-prod-aitalksy-orbit,
  #products [data-vani-prod-panel='aitalksy'] .vani-prod-aitalksy-connect-btn.is-pulse,
  #products [data-vani-prod-panel='aitalksy'] .vani-prod-aitalksy-hiw-ui-btn.is-pulse {
    animation: none !important;
    transform: none !important;
  }

  #products [data-vani-prod-panel='aitalksy'] .vani-prod-aitalksy-phone-bar span,
  #products [data-vani-prod-panel='aitalksy'] .vani-prod-aitalksy-hiw-bar span {
    transition: none;
  }

  #products [data-vani-prod-panel='aitalksy'] .vani-prod-aitalksy-feature-card,
  #products [data-vani-prod-panel='aitalksy'] .vani-prod-aitalksy-hiw-step,
  #products [data-vani-prod-panel='aitalksy'] .vani-prod-aitalksy-integration-card {
    transition: none;
  }

  #products [data-vani-prod-panel='aitalksy'] .vani-prod-aitalksy-feature-card:hover {
    transform: none;
  }
}

#products .vani-prod-feature-story {
  margin-top: 0.25rem;
}

#products .vani-prod-feature-story-kicker {
  font-size: 0.6875rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #64748b;
  margin-bottom: 0.35rem;
}

#products .vani-prod-feature-story-now {
  font-size: 0.8125rem;
  line-height: 1.45;
  color: #475569;
  padding: 0.55rem 0.65rem;
  margin-bottom: 0.65rem;
  border-radius: 0.65rem;
  background: #fff;
  border: 1px solid #e2e8f0;
  min-height: 2.75rem;
  transition: border-color 0.35s ease, box-shadow 0.35s ease;
}

#products .vani-prod-feature-story-now strong {
  color: #0f172a;
}

#products .vani-prod-theme-cyan .vani-prod-feature-story-now.is-live {
  border-color: rgba(6, 182, 212, 0.45);
  box-shadow: 0 0 0 1px rgba(6, 182, 212, 0.12);
}

#products .vani-prod-theme-emerald .vani-prod-feature-story-now.is-live {
  border-color: rgba(16, 185, 129, 0.45);
  box-shadow: 0 0 0 1px rgba(16, 185, 129, 0.12);
}

#products .vani-prod-theme-blue .vani-prod-feature-story-now.is-live {
  border-color: rgba(59, 130, 246, 0.45);
  box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.12);
}

#products .vani-prod-feature-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

#products .vani-prod-feature-steps > li {
  margin: 0;
  padding: 0;
}

#products .vani-prod-feature-step {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 0.55rem;
  align-items: start;
  width: 100%;
  margin: 0;
  padding: 0.55rem 0.6rem;
  border-radius: 0.75rem;
  border: 1px solid #e2e8f0;
  background: #fff;
  opacity: 0.72;
  transform: translateX(0);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: opacity 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease, transform 0.4s ease;
}

#products .vani-prod-feature-step:hover {
  opacity: 0.92;
  border-color: #cbd5e1;
}

#products .vani-prod-feature-step:focus-visible {
  outline: 2px solid rgba(232, 88, 39, 0.55);
  outline-offset: 2px;
}

#products .vani-prod-feature-explore {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.5rem;
  margin-top: 0.65rem;
  padding-top: 0.55rem;
  border-top: 1px dashed #e2e8f0;
}

#products .vani-prod-feature-nav-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 999px;
  border: 1px solid #e2e8f0;
  background: #fff;
  color: #475569;
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}

#products .vani-prod-feature-nav-btn:hover:not(:disabled) {
  border-color: #cbd5e1;
  color: #0f172a;
  background: #f8fafc;
}

#products .vani-prod-feature-nav-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

#products .vani-prod-feature-dots {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex: 1;
  justify-content: center;
  min-width: 5rem;
}

#products .vani-prod-feature-dot {
  width: 0.5rem;
  height: 0.5rem;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: #cbd5e1;
  cursor: pointer;
  transition: transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

#products .vani-prod-feature-dot.is-active {
  transform: scale(1.2);
  background: #e85827;
  box-shadow: 0 0 0 3px rgba(232, 88, 39, 0.2);
}

#products .vani-prod-theme-cyan .vani-prod-feature-dot.is-active {
  background: #0891b2;
  box-shadow: 0 0 0 3px rgba(6, 182, 212, 0.22);
}

#products .vani-prod-theme-emerald .vani-prod-feature-dot.is-active {
  background: #059669;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.22);
}

#products .vani-prod-theme-blue .vani-prod-feature-dot.is-active {
  background: #2563eb;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.22);
}

#products .vani-prod-feature-dot:focus-visible {
  outline: 2px solid rgba(232, 88, 39, 0.45);
  outline-offset: 2px;
}

#products .vani-prod-feature-resume {
  display: none;
  align-items: center;
  gap: 0.35rem;
  margin-left: auto;
  padding: 0.35rem 0.65rem;
  border-radius: 999px;
  border: 1px solid #e2e8f0;
  background: #fff;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #475569;
  cursor: pointer;
}

#products.vani-prod-user-driving .vani-prod-feature-resume {
  display: inline-flex;
}

#products .vani-prod-feature-resume:hover {
  border-color: #cbd5e1;
  color: #0f172a;
}

#products .vani-prod-swipe-hint {
  display: none;
  font-size: 0.6875rem;
  color: #94a3b8;
  text-align: center;
  margin-top: 0.35rem;
}

@media (max-width: 1023px) {
  #products .vani-prod-swipe-hint {
    display: block;
  }
}

#products .vani-prod-feature-step.is-done {
  opacity: 0.88;
}

#products .vani-prod-feature-step.is-active {
  opacity: 1;
  transform: translateX(4px);
  border-color: rgba(232, 88, 39, 0.35);
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.06);
}

#products .vani-prod-theme-cyan .vani-prod-feature-step.is-active {
  border-color: rgba(6, 182, 212, 0.5);
  box-shadow: 0 8px 22px rgba(6, 182, 212, 0.12);
}

#products .vani-prod-theme-emerald .vani-prod-feature-step.is-active {
  border-color: rgba(16, 185, 129, 0.5);
  box-shadow: 0 8px 22px rgba(16, 185, 129, 0.1);
}

#products .vani-prod-theme-blue .vani-prod-feature-step.is-active {
  border-color: rgba(59, 130, 246, 0.5);
  box-shadow: 0 8px 22px rgba(59, 130, 246, 0.1);
}

#products .vani-prod-feature-step-num {
  font-size: 0.6875rem;
  font-weight: 800;
  color: #94a3b8;
  font-variant-numeric: tabular-nums;
  padding-top: 0.1rem;
}

#products .vani-prod-feature-step.is-active .vani-prod-feature-step-num {
  color: #0f172a;
}

#products .vani-prod-feature-step-body strong {
  display: block;
  font-size: 0.8125rem;
  color: #0f172a;
  margin-bottom: 0.12rem;
}

#products .vani-prod-feature-step-body span {
  display: block;
  font-size: 0.75rem;
  line-height: 1.4;
  color: #64748b;
}

#products .vani-prod-feature-step-indicator {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  margin-top: 0.35rem;
  background: #cbd5e1;
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 0.35s ease, transform 0.35s ease, background 0.35s ease;
}

#products .vani-prod-feature-step.is-active .vani-prod-feature-step-indicator {
  opacity: 1;
  transform: scale(1);
  background: #e85827;
  box-shadow: 0 0 0 4px rgba(232, 88, 39, 0.18);
  animation: vani-prod-feature-pulse 1.4s ease-in-out infinite;
}

#products .vani-prod-theme-cyan .vani-prod-feature-step.is-active .vani-prod-feature-step-indicator {
  background: #0891b2;
  box-shadow: 0 0 0 4px rgba(6, 182, 212, 0.2);
}

#products .vani-prod-theme-emerald .vani-prod-feature-step.is-active .vani-prod-feature-step-indicator {
  background: #059669;
  box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.2);
}

#products .vani-prod-theme-blue .vani-prod-feature-step.is-active .vani-prod-feature-step-indicator {
  background: #2563eb;
  box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.2);
}

#products .vani-prod-feature-step.is-done .vani-prod-feature-step-indicator {
  opacity: 1;
  transform: scale(1);
  background: #94a3b8;
  box-shadow: none;
  animation: none;
}

@keyframes vani-prod-feature-pulse {
  50% {
    transform: scale(1.12);
  }
}

#products .vani-prod-hero {
  position: relative;
  width: 100%;
}

#products .vani-prod-flow-rail {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.35rem 0.5rem;
  margin-bottom: 1rem;
  font-size: 0.6875rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

#products .vani-prod-flow-step {
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
  border: 1px solid #e2e8f0;
  background: #fff;
  color: #94a3b8;
  transition: border-color 0.3s, color 0.3s, box-shadow 0.3s, background 0.3s;
}

#products .vani-prod-flow-step.is-active {
  color: #0f172a;
  border-color: rgba(232, 88, 39, 0.45);
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.06);
}

#products .vani-prod-flow-rail-cyan .vani-prod-flow-step.is-active {
  border-color: rgba(6, 182, 212, 0.5);
  background: linear-gradient(180deg, #fff, #ecfeff);
  color: #0e7490;
}

#products .vani-prod-flow-rail-emerald .vani-prod-flow-step.is-active {
  border-color: rgba(16, 185, 129, 0.5);
  background: linear-gradient(180deg, #fff, #ecfdf5);
  color: #047857;
}

#products .vani-prod-flow-rail-blue .vani-prod-flow-step.is-active {
  border-color: rgba(59, 130, 246, 0.5);
  background: linear-gradient(180deg, #fff, #eff6ff);
  color: #1d4ed8;
}

#products .vani-prod-flow-connector {
  width: 1.25rem;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, #cbd5e1, #e2e8f0);
}

#products .vani-prod-story-rail {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.35rem;
  font-size: 0.625rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

#products .vani-prod-story-chip {
  padding: 0.25rem 0.55rem;
  border-radius: 999px;
  border: 1px solid #e2e8f0;
  background: #fff;
  color: #94a3b8;
}

#products .vani-prod-story-chip.is-active {
  color: #0f172a;
  border-color: rgba(232, 88, 39, 0.35);
}

#products .vani-prod-story-rail-cyan .vani-prod-story-chip.is-active {
  border-color: rgba(6, 182, 212, 0.45);
  color: #0e7490;
  background: #ecfeff;
}

#products .vani-prod-story-rail-emerald .vani-prod-story-chip.is-active {
  border-color: rgba(16, 185, 129, 0.45);
  color: #047857;
  background: #ecfdf5;
}

#products .vani-prod-story-rail-blue .vani-prod-story-chip.is-active {
  border-color: rgba(59, 130, 246, 0.45);
  color: #1d4ed8;
  background: #eff6ff;
}

#products .vani-prod-story-arrow {
  color: #cbd5e1;
  font-size: 0.55rem;
}

#products .vani-prod-hero-canvas {
  position: relative;
  min-height: clamp(460px, 58vh, 620px);
  padding: clamp(1rem, 2.5vw, 1.75rem);
  border-radius: 1.35rem;
  background: linear-gradient(165deg, #ffffff 0%, #f8fafc 55%, #f1f5f9 100%);
  border: 1px solid #e2e8f0;
  box-shadow: 0 32px 64px -36px rgba(15, 23, 42, 0.22), 0 1px 0 rgba(255, 255, 255, 0.95) inset;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

#products .vani-prod-hero-glow {
  position: absolute;
  inset: 10% 8% auto;
  height: 55%;
  border-radius: 50%;
  filter: blur(48px);
  opacity: 0.55;
  pointer-events: none;
}

#products .vani-prod-theme-cyan .vani-prod-hero-glow {
  background: radial-gradient(circle, rgba(6, 182, 212, 0.2), transparent 70%);
}

#products .vani-prod-theme-emerald .vani-prod-hero-glow {
  background: radial-gradient(circle, rgba(16, 185, 129, 0.18), transparent 70%);
}

#products .vani-prod-theme-blue .vani-prod-hero-glow {
  background: radial-gradient(circle, rgba(59, 130, 246, 0.18), transparent 70%);
}

#products .vani-prod-float {
  position: absolute;
  z-index: 2;
  max-width: min(220px, 38vw);
  display: flex;
  gap: 0.5rem;
  padding: 0.55rem 0.65rem;
  border-radius: 0.85rem;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.9);
  box-shadow: 0 14px 32px rgba(15, 23, 42, 0.1);
  backdrop-filter: blur(10px);
  font-size: 0.625rem;
  line-height: 1.35;
  color: #64748b;
  pointer-events: none;
}

#products .vani-prod-float i {
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: #f1f5f9;
  color: #475569;
}

#products .vani-prod-theme-cyan .vani-prod-float i {
  background: #ecfeff;
  color: #0891b2;
}

#products .vani-prod-theme-emerald .vani-prod-float i {
  background: #ecfdf5;
  color: #059669;
}

#products .vani-prod-theme-blue .vani-prod-float i {
  background: #eff6ff;
  color: #2563eb;
}

#products .vani-prod-float strong {
  display: block;
  font-size: 0.6875rem;
  color: #0f172a;
  margin-bottom: 0.1rem;
}

#products .vani-prod-float-tl {
  top: 8%;
  left: 2%;
}

#products .vani-prod-float-tr {
  top: 10%;
  right: 2%;
}

#products .vani-prod-float-br {
  bottom: 8%;
  right: 4%;
}

/* Realistic smartphone mockup — #products only */
#products .vani-prod-phone-stage {
  position: relative;
  z-index: 5;
  width: min(100%, clamp(280px, 42vw, 440px));
  max-width: 440px;
  margin: 0 auto;
  perspective: 1400px;
  perspective-origin: 50% 42%;
}

#products .vani-prod-phone-platform {
  position: absolute;
  left: 50%;
  bottom: -6%;
  transform: translateX(-50%);
  width: 72%;
  height: clamp(12px, 2.5vw, 18px);
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(15, 23, 42, 0.28), transparent 72%);
  filter: blur(6px);
  z-index: 0;
}

#products .vani-prod-phone-drop {
  position: absolute;
  left: 50%;
  bottom: -2%;
  transform: translateX(-50%);
  width: 62%;
  height: clamp(28px, 5vw, 44px);
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(15, 23, 42, 0.26), transparent 72%);
  filter: blur(16px);
  z-index: 0;
  will-change: transform, opacity;
}

#products .vani-prod-phone-3d {
  position: relative;
  z-index: 2;
  transform-style: preserve-3d;
  transform: rotateY(-5deg) rotateX(2deg);
  will-change: transform;
}

#products .vani-prod-phone-frame {
  position: relative;
  padding: clamp(10px, 1.4vw, 14px);
  border-radius: clamp(2.35rem, 6vw, 3.15rem);
  background: linear-gradient(
    155deg,
    #6b7280 0%,
    #374151 18%,
    #111827 42%,
    #030712 78%,
    #1f2937 100%
  );
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.35) inset,
    0 -1px 0 rgba(0, 0, 0, 0.65) inset,
    0 48px 80px -32px rgba(15, 23, 42, 0.58),
    0 18px 36px -18px rgba(15, 23, 42, 0.38),
    0 4px 12px rgba(15, 23, 42, 0.12);
  aspect-ratio: 9 / 19.25;
  max-height: min(78vh, 720px);
  width: 100%;
}

#products .vani-prod-phone-btn {
  position: absolute;
  background: linear-gradient(90deg, #4b5563, #1f2937);
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.45);
  z-index: 5;
  pointer-events: none;
}

#products .vani-prod-phone-btn-power {
  right: -3px;
  top: 28%;
  width: 3px;
  height: clamp(48px, 12%, 64px);
  border-radius: 0 3px 3px 0;
}

#products .vani-prod-phone-btn-vol-up {
  left: -3px;
  top: 22%;
  width: 3px;
  height: clamp(28px, 7%, 38px);
  border-radius: 3px 0 0 3px;
}

#products .vani-prod-phone-btn-vol-down {
  left: -3px;
  top: 32%;
  width: 3px;
  height: clamp(28px, 7%, 38px);
  border-radius: 3px 0 0 3px;
}

#products .vani-prod-phone-bezel-shine {
  position: absolute;
  inset: clamp(8px, 1.2vw, 12px);
  border-radius: clamp(2rem, 5.2vw, 2.65rem);
  pointer-events: none;
  z-index: 4;
  background: linear-gradient(
    125deg,
    rgba(255, 255, 255, 0.22) 0%,
    transparent 38%,
    transparent 62%,
    rgba(255, 255, 255, 0.06) 100%
  );
}

#products .vani-prod-screen-glare {
  position: absolute;
  inset: clamp(10px, 1.4vw, 14px);
  border-radius: clamp(2rem, 5.2vw, 2.65rem);
  pointer-events: none;
  z-index: 6;
  background: linear-gradient(
    118deg,
    rgba(255, 255, 255, 0.14) 0%,
    transparent 42%,
    transparent 100%
  );
}

#products .vani-prod-phone-home {
  height: 4px;
  width: 34%;
  margin: 0.35rem auto 0.45rem;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.82);
  flex-shrink: 0;
}

#products .vani-prod-channel-strip {
  display: flex;
  gap: 0.25rem;
  margin-bottom: 0.45rem;
}

#products .vani-prod-channel-strip span {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.2rem;
  text-align: center;
  padding: 0.28rem 0.15rem;
  border-radius: 0.4rem;
  font-size: clamp(0.5rem, 1.5vw, 0.5625rem);
  font-weight: 700;
  border: 1px solid #e2e8f0;
  background: #fff;
  color: #94a3b8;
}

#products .vani-prod-channel-strip span.is-on {
  color: #0891b2;
  border-color: #a5f3fc;
  background: #ecfeff;
}

#products .vani-prod-device-inner {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  border-radius: clamp(1.85rem, 4.8vw, 2.45rem);
  overflow: hidden;
  background: #f8fafc;
  border: 2px solid rgba(0, 0, 0, 0.92);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.06) inset,
    0 0 24px rgba(255, 255, 255, 0.04) inset;
}

#products .vani-prod-device-inner::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 9;
  opacity: 0;
  transition: opacity 0.45s ease;
  box-shadow: inset 0 0 56px rgba(6, 182, 212, 0.12);
}

#products .vani-prod-theme-cyan .vani-prod-device-inner.is-screen-loading::after {
  opacity: 1;
  animation: vani-prod-screen-glow 2.4s ease-in-out infinite;
}

#products .vani-prod-theme-emerald .vani-prod-device-inner.is-screen-loading::after {
  box-shadow: inset 0 0 56px rgba(16, 185, 129, 0.12);
}

#products .vani-prod-theme-blue .vani-prod-device-inner.is-screen-loading::after,
#products [data-vani-prod-panel='traveljioo'] .vani-prod-device-inner.is-screen-loading::after {
  box-shadow: inset 0 0 56px rgba(59, 130, 246, 0.12);
}

#products .vani-prod-device-inner.is-screen-success::after {
  opacity: 1;
  box-shadow: inset 0 0 40px rgba(16, 185, 129, 0.16);
  animation: vani-prod-screen-success 0.85s ease-out forwards;
}

@keyframes vani-prod-screen-glow {
  50% {
    opacity: 0.72;
  }
}

@keyframes vani-prod-screen-success {
  0% {
    opacity: 0.35;
  }
  40% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

#products .vani-prod-device-status {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0.55rem 0.85rem 0.35rem;
  font-size: clamp(0.625rem, 1.8vw, 0.6875rem);
  font-weight: 700;
  background: #fff;
  border-bottom: 1px solid #e2e8f0;
  flex-shrink: 0;
}

#products .vani-prod-status-time {
  color: #0f172a;
  letter-spacing: 0.02em;
}

#products .vani-prod-status-icons {
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  color: #64748b;
  font-size: 0.5625rem;
}

#products .vani-prod-device-island {
  position: relative;
  width: clamp(72px, 22%, 92px);
  height: clamp(22px, 5.5%, 28px);
  border-radius: 999px;
  background: #0a0a0a;
  justify-self: center;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06) inset;
}

#products .vani-prod-island-cam {
  position: absolute;
  right: 18%;
  top: 50%;
  transform: translateY(-50%);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #334155, #0f172a 65%);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08);
}

#products .vani-prod-screen-badge {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin-bottom: 0.45rem;
  padding: 0.28rem 0.45rem;
  border-radius: 0.45rem;
  font-size: clamp(0.5625rem, 1.6vw, 0.625rem);
  font-weight: 700;
  color: #64748b;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
}

#products .vani-prod-live-pill-blue {
  color: #2563eb;
}

#products .vani-prod-live-pill-blue .vani-prod-live-dot {
  background: #3b82f6;
}

#products .vani-prod-device-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.65rem;
  background: #fff;
  border-bottom: 1px solid #e2e8f0;
  font-size: 0.6875rem;
}

#products .vani-prod-device-header strong {
  display: block;
  font-size: 0.75rem;
  color: #0f172a;
}

#products .vani-prod-device-logo {
  width: 1.65rem;
  height: 1.65rem;
  object-fit: contain;
  border-radius: 0.4rem;
  border: 1px solid #e2e8f0;
  padding: 0.12rem;
  background: #fff;
}

#products .vani-prod-live-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.5625rem;
  font-weight: 600;
  color: #059669;
}

#products .vani-prod-live-pill-emerald {
  color: #047857;
}

#products .vani-prod-live-dot {
  width: 0.35rem;
  height: 0.35rem;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.2);
}

#products [data-seq='status-pill'].is-thinking .vani-prod-live-dot {
  background: #0891b2;
  animation: vani-prod-live-pulse 1s ease-in-out infinite;
}

@keyframes vani-prod-live-pulse {
  50% {
    transform: scale(1.25);
    opacity: 0.75;
  }
}

#products .vani-prod-device-screen {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  padding: clamp(0.55rem, 1.8vw, 0.75rem);
  font-size: clamp(0.625rem, 1.85vw, 0.6875rem);
  background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
  -webkit-overflow-scrolling: touch;
}

#products .vani-prod-device-screen-app {
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
}

#products .vani-prod-app-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  padding: clamp(0.55rem, 1.8vw, 0.75rem);
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  scrollbar-width: thin;
  scrollbar-color: #cbd5e1 transparent;
}

#products .vani-prod-app-body.is-nav-switching {
  scroll-behavior: auto;
}

#products .vani-prod-app-body::-webkit-scrollbar {
  width: 4px;
}

#products .vani-prod-app-body::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 999px;
}

#products .vani-prod-demo-stepbar {
  margin: 0 0 0.45rem;
  padding: 0.35rem 0.5rem;
  border-radius: 0.45rem;
  background: #0f172a;
  color: #e2e8f0;
  font-size: clamp(0.5625rem, 1.55vw, 0.625rem);
  font-weight: 700;
  line-height: 1.35;
  text-align: center;
}

#products .vani-prod-demo-tap {
  transform-origin: center center;
  will-change: transform;
}

#products .vani-prod-demo-tap.is-tapped {
  box-shadow: 0 0 0 2px rgba(232, 88, 39, 0.45);
  filter: brightness(0.97);
}

#products .vani-prod-app-nav .vani-prod-demo-tap.is-tapped {
  background: #fff7ed;
  transform: scale(0.94);
}

#products .vani-prod-app-view {
  display: none;
  transform-origin: 50% 0;
}

#products .vani-prod-app-view.is-active-view {
  display: block;
}

#products .vani-prod-app-view.is-view-enter {
  animation: vani-prod-view-enter 0.38s ease-out;
}

@keyframes vani-prod-view-enter {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

#products .vani-prod-app-view-title {
  font-size: 0.75rem;
  font-weight: 800;
  color: #0f172a;
  margin-bottom: 0.45rem;
}

#products .vani-prod-app-kpi-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.4rem;
  margin-bottom: 0.5rem;
}

#products .vani-prod-kpi {
  padding: 0.45rem 0.5rem;
  border-radius: 0.55rem;
  background: #fff;
  border: 1px solid #e2e8f0;
  text-align: center;
}

#products .vani-prod-kpi span {
  display: block;
  font-size: 0.5625rem;
  font-weight: 600;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

#products .vani-prod-kpi strong {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.8125rem;
  color: #0f172a;
}

#products .vani-prod-app-card {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.45rem 0.5rem;
  margin-bottom: 0.4rem;
  border-radius: 0.55rem;
  background: #fff;
  border: 1px solid #e2e8f0;
  position: relative;
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}

#products .vani-prod-app-card.vani-prod-demo-tap:active {
  transform: scale(0.98);
}

#products .vani-prod-app-card-icon {
  width: 1.65rem;
  height: 1.65rem;
  border-radius: 0.45rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 0.65rem;
}

#products .vani-prod-app-card strong {
  display: block;
  font-size: 0.6875rem;
  color: #0f172a;
}

#products .vani-prod-app-card span {
  display: block;
  font-size: 0.5625rem;
  color: #64748b;
  margin-top: 0.08rem;
}

#products .vani-prod-app-notif {
  margin-left: auto;
  min-width: 1.1rem;
  height: 1.1rem;
  padding: 0 0.25rem;
  border-radius: 999px;
  background: #e85827;
  color: #fff;
  font-size: 0.5625rem;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.85);
}

#products .vani-prod-app-notif.is-notif-pulse {
  animation: vani-prod-notif-pulse 0.55s ease-out 2;
}

@keyframes vani-prod-notif-pulse {
  50% {
    transform: scale(1.12);
  }
}

#products .vani-prod-app-btn {
  width: 100%;
  margin-top: 0.35rem;
  padding: 0.45rem 0.55rem;
  border: none;
  border-radius: 0.55rem;
  background: linear-gradient(135deg, #0891b2, #0e7490);
  color: #fff;
  font-size: 0.625rem;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  cursor: default;
  box-shadow: 0 6px 16px rgba(8, 145, 178, 0.28);
  transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
}

#products .vani-prod-app-btn.is-tapped,
#products .vani-prod-app-btn:active {
  transform: scale(0.97);
  filter: brightness(0.96);
  box-shadow: 0 3px 10px rgba(8, 145, 178, 0.22);
}

#products .vani-prod-theme-emerald .vani-prod-app-btn {
  background: linear-gradient(135deg, #059669, #047857);
  box-shadow: 0 6px 16px rgba(5, 150, 105, 0.25);
}

#products .vani-prod-theme-blue .vani-prod-app-btn,
#products [data-vani-app='traveljioo'] .vani-prod-app-btn {
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  box-shadow: 0 6px 16px rgba(37, 99, 235, 0.25);
}

#products .vani-prod-app-nav {
  flex-shrink: 0;
  display: flex;
  border-top: 1px solid #e2e8f0;
  background: #fff;
  padding: 0.35rem 0.25rem calc(0.35rem + env(safe-area-inset-bottom, 0));
}

#products .vani-prod-app-nav span {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.12rem;
  font-size: 0.5rem;
  font-weight: 700;
  color: #94a3b8;
  padding: 0.2rem 0.1rem;
  border-radius: 0.45rem;
  transition: color 0.2s, background 0.2s, transform 0.18s ease;
  cursor: pointer;
  user-select: none;
}

#products .vani-prod-app-nav span:active {
  transform: scale(0.94);
}

#products .vani-prod-app-nav span i {
  font-size: 0.6875rem;
}

#products .vani-prod-app-nav span.is-on {
  color: #0f172a;
  background: #f1f5f9;
}

#products .vani-prod-theme-cyan .vani-prod-app-nav span.is-on {
  color: #0e7490;
  background: #ecfeff;
}

#products .vani-prod-theme-emerald .vani-prod-app-nav span.is-on,
#products [data-vani-app='community'] .vani-prod-app-nav span.is-on {
  color: #047857;
  background: #ecfdf5;
}

#products .vani-prod-theme-blue .vani-prod-app-nav span.is-on,
#products [data-vani-app='traveljioo'] .vani-prod-app-nav span.is-on {
  color: #1d4ed8;
  background: #eff6ff;
}

#products .vani-prod-app-processing {
  padding: 0.45rem 0.5rem;
  margin: 0.35rem 0;
  border-radius: 0.55rem;
  background: #fff;
  border: 1px dashed #a5f3fc;
}

#products .vani-prod-app-processing:not([hidden]) {
  animation: vani-prod-processing-in 0.35s ease-out;
}

@keyframes vani-prod-processing-in {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

#products .vani-prod-app-processing.is-loading-shimmer .vani-prod-proc-title::after {
  content: '';
  display: inline-block;
  width: 0.45rem;
  height: 0.45rem;
  margin-left: 0.35rem;
  border-radius: 50%;
  border: 2px solid currentColor;
  border-top-color: transparent;
  vertical-align: -0.05rem;
  animation: vani-prod-step-spin 0.75s linear infinite;
}

#products .vani-prod-theme-emerald .vani-prod-app-processing {
  border-color: #6ee7b7;
}

#products .vani-prod-theme-blue .vani-prod-app-processing,
#products [data-vani-app='traveljioo'] .vani-prod-app-processing {
  border-color: #93c5fd;
}

#products .vani-prod-proc-title {
  font-size: 0.625rem;
  font-weight: 800;
  color: #0891b2;
  margin-bottom: 0.35rem;
}

#products .vani-prod-theme-emerald .vani-prod-proc-title {
  color: #047857;
}

#products .vani-prod-theme-blue .vani-prod-proc-title,
#products [data-vani-app='traveljioo'] .vani-prod-proc-title {
  color: #2563eb;
}

#products .vani-prod-proc-step {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.5625rem;
  font-weight: 600;
  color: #94a3b8;
  padding: 0.18rem 0;
}

#products .vani-prod-proc-step.is-active {
  color: #0f172a;
}

#products .vani-prod-proc-step.is-done {
  color: #0891b2;
}

#products .vani-prod-proc-dot {
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  border: 2px solid #cbd5e1;
  flex-shrink: 0;
}

#products .vani-prod-proc-step.is-active .vani-prod-proc-dot {
  border-color: #0891b2;
  animation: vani-prod-proc-pulse 0.9s ease-in-out infinite;
}

#products .vani-prod-proc-step.is-done .vani-prod-proc-dot {
  background: #0891b2;
  border-color: #0891b2;
}

@keyframes vani-prod-proc-pulse {
  50% {
    transform: scale(1.15);
    opacity: 0.75;
  }
}

#products.vani-prod-demo-static .vani-prod-app-view.is-active-view .vani-prod-seq {
  opacity: 1 !important;
    transform: none !important;
  }

#products.vani-prod-demo-static .vani-prod-app-processing[hidden] {
  display: none !important;
}

#products.vani-prod-demo-static .vani-prod-feature-step {
  opacity: 1;
  transform: none;
}

#products.vani-prod-demo-static .vani-prod-feature-step.is-active {
  transform: none;
}

#products.vani-prod-demo-static .vani-prod-demo-stage.is-visible {
  opacity: 1;
  transform: none;
}

#products .vani-prod-device-screen-crm {
  padding: clamp(0.5rem, 1.6vw, 0.65rem);
}

#products .vani-prod-device-screen-crm .vani-prod-crm-body {
  padding: 0;
  background: transparent;
}

#products .vani-prod-device-screen-crm .vani-prod-crm-lead {
  padding: 0.45rem 0.5rem;
  margin-bottom: 0.45rem;
}

#products .vani-prod-device-screen-crm .vani-prod-crm-pipeline span {
  font-size: clamp(0.4375rem, 1.35vw, 0.5rem);
  padding: 0.32rem 0.08rem;
}

#products .vani-prod-ui-toast {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.4rem 0.5rem;
  margin-bottom: 0.5rem;
  border-radius: 0.5rem;
  font-weight: 600;
  border: 1px solid #e2e8f0;
  background: #fff;
  transform-origin: 50% 0;
}

#products .vani-prod-ui-toast.is-toast-pop {
  animation: vani-prod-toast-pop 0.48s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes vani-prod-toast-pop {
  0% {
    opacity: 0;
    transform: translateY(-6px) scale(0.96);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

#products .vani-prod-ui-toast-success.is-toast-pop i {
  animation: vani-prod-toast-check 0.5s ease-out 0.08s both;
}

@keyframes vani-prod-toast-check {
  from {
    transform: scale(0.6);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

#products .vani-prod-ui-toast-info {
  color: #0891b2;
  border-color: #a5f3fc;
  background: #ecfeff;
}

#products .vani-prod-ui-toast-success {
  color: #047857;
  border-color: #6ee7b7;
  background: #ecfdf5;
}

#products .vani-prod-ui-row {
  display: flex;
  align-items: flex-end;
  gap: 0.35rem;
  margin-bottom: 0.45rem;
}

#products .vani-prod-ui-row-user {
  justify-content: flex-end;
}

#products .vani-prod-ui-avatar {
  width: 1.4rem;
  height: 1.4rem;
  border-radius: 50%;
  background: #ecfeff;
  color: #0891b2;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.6rem;
}

#products .vani-prod-ui-bubble {
  max-width: 82%;
  padding: 0.4rem 0.55rem;
  border-radius: 0.65rem;
  background: #fff;
  border: 1px solid #e2e8f0;
  font-weight: 600;
  line-height: 1.35;
}

#products .vani-prod-ui-bubble-ai {
  background: #ecfeff;
  border-color: #a5f3fc;
}

#products .vani-prod-ui-steps {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  margin: 0.5rem 0;
  padding: 0.45rem;
  border-radius: 0.55rem;
  background: #fff;
  border: 1px solid #e2e8f0;
  font-size: 0.625rem;
  font-weight: 600;
  color: #94a3b8;
}

#products .vani-prod-ui-steps .is-done {
  color: #0891b2;
}

#products .vani-prod-ui-steps .is-active {
  color: #0f172a;
}

#products .vani-prod-ui-verify {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.4rem 0.5rem;
  margin-bottom: 0.5rem;
  border-radius: 0.5rem;
  background: #ecfdf5;
  border: 1px solid #6ee7b7;
  color: #047857;
  font-weight: 700;
  font-size: 0.625rem;
}

#products .vani-prod-ui-thread {
  padding: 0.45rem 0.5rem;
  margin-bottom: 0.4rem;
  border-radius: 0.5rem;
  background: #fff;
  border: 1px solid #e2e8f0;
}

#products .vani-prod-ui-thread strong {
  display: block;
  font-size: 0.6875rem;
  color: #0f172a;
}

#products .vani-prod-ui-thread p {
  margin: 0.15rem 0 0;
  font-size: 0.625rem;
  color: #64748b;
}

#products .vani-prod-ui-service-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.35rem;
  margin: 0.45rem 0;
}

#products .vani-prod-ui-service-grid span {
  padding: 0.35rem;
  text-align: center;
  border-radius: 0.45rem;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  font-size: 0.5625rem;
  font-weight: 700;
  color: #475569;
}

#products .vani-prod-crm-frame {
  max-width: 420px;
  margin: 0 auto;
  border-radius: 1rem;
  overflow: hidden;
  border: 1px solid #e2e8f0;
  box-shadow: 0 28px 56px -32px rgba(15, 23, 42, 0.35);
  background: #fff;
}

#products .vani-prod-crm-chrome {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.5rem 0.75rem;
  background: #f1f5f9;
  border-bottom: 1px solid #e2e8f0;
  font-size: 0.5625rem;
  color: #64748b;
}

#products .vani-prod-crm-dot {
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: #cbd5e1;
}

#products .vani-prod-crm-url {
  margin-left: 0.35rem;
  font-weight: 600;
}

#products .vani-prod-crm-body {
  padding: 0.85rem;
  background: linear-gradient(180deg, #f8fafc, #fff);
  font-size: 0.6875rem;
}

#products .vani-prod-crm-lead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.55rem 0.65rem;
  border-radius: 0.65rem;
  background: #fff;
  border: 1px solid #e2e8f0;
  margin-bottom: 0.55rem;
}

#products .vani-prod-crm-amount {
  font-weight: 800;
  color: #2563eb;
}

#products .vani-prod-crm-pipeline {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.25rem;
  margin-bottom: 0.55rem;
}

#products .vani-prod-crm-pipeline span {
  text-align: center;
  padding: 0.35rem 0.15rem;
  border-radius: 0.45rem;
  font-size: 0.5625rem;
  font-weight: 700;
  background: #f1f5f9;
  color: #94a3b8;
  border: 1px solid #e2e8f0;
}

#products .vani-prod-crm-pipeline span.is-done {
  background: #eff6ff;
  color: #2563eb;
  border-color: #93c5fd;
}

#products .vani-prod-crm-pipeline span.is-active {
  background: #2563eb;
  color: #fff;
  border-color: #2563eb;
}

#products .vani-prod-crm-followup {
  padding: 0.45rem 0.55rem;
  margin-bottom: 0.5rem;
  border-radius: 0.5rem;
  background: #fffbeb;
  border: 1px solid #fcd34d;
  color: #b45309;
  font-weight: 600;
}

/* #products — responsive layout (mobile / tablet / desktop; lg = 1024px unchanged globally) */
@media (max-width: 1023px) {
  #products .vani-prod-panel-grid {
    display: flex;
    flex-direction: column;
    gap: 1.35rem;
    width: 100%;
    overflow-x: clip;
  }

  #products .vani-prod-copy {
    display: contents;
  }

  #products .vani-prod-story-rail {
    order: 0;
    width: 100%;
  }

  #products .vani-prod-copy > p.text-xs.font-mono {
    order: 0;
    width: 100%;
  }

  #products .vani-prod-copy h3 {
    order: 1;
    width: 100%;
  }

  #products .vani-prod-copy > p.text-sm,
  #products .vani-prod-copy > p.text-sm.sm\:text-base {
    order: 2;
    width: 100%;
    max-width: 100%;
  }

  #products [data-vani-prod-panel='aitalksy'] .vani-prod-aitalksy-feature-grid {
    order: 3;
    width: 100%;
    max-width: 100%;
  }

  #products [data-vani-prod-panel='aitalksy'] .vani-prod-aitalksy-integrations {
    order: 4;
    width: 100%;
    max-width: 100%;
  }

  #products [data-vani-prod-panel='aitalksy'] .vani-prod-aitalksy-hiw {
    order: 5;
    width: 100%;
    max-width: 100%;
  }

  #products .vani-prod-hero {
    order: 6;
    width: 100%;
    max-width: 100%;
  }

  #products .vani-prod-feature-story {
    order: 7;
    width: 100%;
    max-width: 100%;
  }

  #products .vani-prod-copy > div.flex {
    order: 8;
    width: 100%;
  }

  #products .vani-prod-hero-canvas {
    min-height: clamp(380px, 52vw, 480px);
    padding: clamp(1rem, 3vw, 1.5rem);
    width: 100%;
  }

  #products .vani-prod-flow-rail {
    margin-bottom: 0.75rem;
    font-size: 0.625rem;
  }

  #products .vani-prod-phone-stage {
    width: min(100%, clamp(272px, 72vw, 400px));
    margin-inline: auto;
  }

  #products .vani-prod-phone-frame {
    width: 100%;
    max-height: min(74vh, 640px);
  }

  #products .vani-prod-demo-caption {
    padding-inline: 0.25rem;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  #products .vani-prod-panel-grid {
    gap: 1.85rem;
  }

  #products .vani-prod-section-header {
    margin-bottom: 2.5rem;
  }

  #products .vani-prod-tablist {
    margin-bottom: 2.5rem;
  }

  #products .vani-prod-float {
    max-width: min(200px, 34vw);
    font-size: 0.5875rem;
  }

  #products .vani-prod-hero-canvas {
    min-height: clamp(420px, 46vh, 540px);
    padding: clamp(1.15rem, 2.5vw, 1.65rem);
  }

  #products .vani-prod-phone-stage {
    width: min(100%, clamp(300px, 50vw, 420px));
  }

  #products .vani-prod-phone-frame {
    max-height: min(76vh, 680px);
  }

  #products .vani-prod-feature-step {
    padding: 0.6rem 0.7rem;
  }

  #products .vani-prod-feature-step-body span {
    font-size: 0.8125rem;
  }

  #products .vani-prod-feature-nav-btn {
    width: 2.35rem;
    height: 2.35rem;
  }
}

@media (min-width: 1024px) {
  #products .vani-prod-panel-grid {
    align-items: center;
    gap: 2rem 2.25rem;
  }

  #products .vani-prod-copy {
    display: block;
    padding-right: 0.5rem;
  }

  #products .vani-prod-hero {
    justify-self: stretch;
  }

  #products .vani-prod-hero-canvas {
    min-height: clamp(480px, 56vh, 620px);
    padding: clamp(1.25rem, 2vw, 1.85rem);
  }

  #products .vani-prod-phone-stage {
    width: min(100%, clamp(320px, 38vw, 440px));
  }

  #products .vani-prod-phone-frame {
    max-height: min(78vh, 720px);
  }
}

@media (min-width: 1280px) {
  #products .vani-prod-panel-grid {
    gap: 2.25rem 2.75rem;
  }

  #products .vani-prod-phone-stage {
    width: min(100%, 440px);
  }

  #products .vani-prod-phone-frame {
    max-height: min(82vh, 760px);
  }
}

@media (max-width: 767px) {
  #products {
    padding-top: 3.5rem;
    padding-bottom: 3.5rem;
  }

  #products .vani-prod-panel {
    padding: 0.25rem 0;
  }

  #products .vani-prod-story-rail {
    display: none;
  }

  #products .vani-prod-hero-canvas {
    min-height: clamp(420px, 105vw, 520px);
    padding: 0.85rem 0.5rem 1rem;
  }

  #products .vani-prod-float-tl,
  #products .vani-prod-float-tr,
  #products .vani-prod-float-br {
    display: none;
  }

  #products .vani-prod-flow-rail {
    gap: 0.25rem 0.35rem;
  }

  #products .vani-prod-flow-step {
    padding: 0.3rem 0.55rem;
    font-size: 0.5625rem;
  }

  /* Heading → phone → features (via flex order on .vani-prod-copy contents) */
  #products .vani-prod-phone-stage {
    width: min(100%, clamp(280px, 92vw, 380px));
  }

  #products .vani-prod-phone-3d {
    transform: none;
  }

  #products .vani-prod-phone-frame {
    max-height: min(68vh, 600px);
  }

  #products .vani-prod-feature-explore {
    justify-content: center;
    gap: 0.5rem;
  }

  #products .vani-prod-feature-nav-btn {
    width: 2.75rem;
    height: 2.75rem;
    touch-action: manipulation;
  }

  #products .vani-prod-feature-dot {
    position: relative;
    width: 0.5rem;
    height: 0.5rem;
  }

  #products .vani-prod-feature-dot::before {
    content: '';
    position: absolute;
    inset: -0.65rem;
  }

  #products .vani-prod-feature-step {
    padding: 0.65rem 0.7rem;
    touch-action: manipulation;
  }

  #products .vani-prod-demo-stage[data-vani-swipe-zone] {
    touch-action: pan-y;
  }

  #products .vani-prod-app-nav span {
    min-height: 2.75rem;
    justify-content: center;
    touch-action: manipulation;
  }

  #products .vani-prod-block-ctas .btn-primary,
  #products .vani-prod-copy > div.flex .btn-primary,
  #products .vani-prod-copy > div.flex button {
    width: 100%;
    justify-content: center;
    min-height: 2.75rem;
  }

  #products .vani-prod-crm-pipeline span {
    font-size: 0.5rem;
    padding: 0.3rem 0.1rem;
  }

  #products .vani-prod-tab {
    flex: 1 1 auto;
    justify-content: center;
    min-width: calc(50% - 0.35rem);
    min-height: 2.75rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  #products .vani-prod-phone-3d {
    transform: none;
  }

  #products .vani-prod-app-body {
    scroll-behavior: auto;
  }

  #products .vani-prod-device-inner::after,
  #products .vani-prod-app-notif.is-notif-pulse,
  #products .vani-prod-ui-toast.is-toast-pop,
  #products [data-seq='status-pill'].is-thinking .vani-prod-live-dot,
  #products .vani-prod-app-processing:not([hidden]) {
    animation: none !important;
  }
}

/* #products — workflow demo animations (GSAP-driven) */
#products.vani-prod-demo-ready .vani-prod-demo-stage {
  transform-origin: 50% 55%;
}

#products .vani-prod-demo-caption {
  font-weight: 600;
  transition: color 0.25s ease;
}

#products .vani-prod-demo-highlight {
  box-shadow: 0 0 0 2px rgba(232, 88, 39, 0.55), 0 8px 24px rgba(15, 23, 42, 0.08);
}

#products .vani-prod-theme-cyan .vani-prod-demo-highlight {
  box-shadow: 0 0 0 2px rgba(6, 182, 212, 0.55), 0 8px 24px rgba(6, 182, 212, 0.12);
}

#products .vani-prod-theme-emerald .vani-prod-demo-highlight {
  box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.55), 0 8px 24px rgba(16, 185, 129, 0.12);
}

#products .vani-prod-theme-blue .vani-prod-demo-highlight {
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.55), 0 8px 24px rgba(59, 130, 246, 0.12);
}

#products .vani-prod-ui-steps span {
  color: #94a3b8;
  font-weight: 600;
}

#products .vani-prod-ui-steps span.is-processing {
  color: #0891b2;
}

#products .vani-prod-ui-steps span.is-processing i {
  animation: vani-prod-step-spin 0.8s linear infinite;
}

#products .vani-prod-ui-steps span.is-done {
  color: #0891b2;
}

#products .vani-prod-ui-steps span.is-done i::before {
  content: '\f00c';
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
}

#products [data-seq='status-pill'].is-thinking {
  color: #0891b2;
}

#products .vani-prod-crm-pipeline span.is-done {
  background: #eff6ff;
  color: #2563eb;
  border-color: #93c5fd;
}

#products .vani-prod-crm-pipeline span.is-active {
  background: #2563eb;
  color: #fff;
  border-color: #2563eb;
  transform: scale(1.04);
}

#products .vani-prod-followup-due {
  display: inline;
}

#products .vani-prod-followup-done {
  display: inline;
  color: #047857;
  font-weight: 700;
}

@keyframes vani-prod-step-spin {
  to {
    transform: rotate(360deg);
  }
}

#products.vani-prod-demo-static .vani-prod-seq {
  opacity: 1 !important;
}

#products.vani-prod-scroll-revealed .vani-prod-hero-canvas {
  will-change: auto;
}

@media (prefers-reduced-motion: reduce) {
  #products.vani-prod-scroll-pending * {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* Premium product showcase (#product-showcase only) */
#product-showcase { overflow-x: clip; }
#product-showcase .showcase-grid-bg {
  background-image: linear-gradient(rgba(15, 23, 42, 0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(15, 23, 42, 0.04) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000 20%, transparent 75%);
}
#product-showcase .showcase-light { position: absolute; border-radius: 50%; filter: blur(56px); opacity: 0.48; }
#product-showcase .showcase-light-key { width: min(42vw, 420px); height: min(42vw, 420px); top: 18%; left: 50%; transform: translateX(-50%); background: radial-gradient(circle, rgba(255,255,255,0.85) 0%, transparent 68%); }
#product-showcase .showcase-light-fill { width: min(55vw, 520px); height: min(40vw, 380px); bottom: 8%; left: 50%; transform: translateX(-50%); background: radial-gradient(circle, rgba(148,163,184,0.35) 0%, transparent 70%); }
#product-showcase .showcase-light-rim { width: min(36vw, 360px); height: min(36vw, 360px); top: 32%; left: 58%; background: radial-gradient(circle, rgba(6,182,212,0.22) 0%, transparent 72%); }
#product-showcase .showcase-light-flame { width: min(28vw, 280px); height: min(28vw, 280px); top: 22%; left: 18%; background: radial-gradient(circle, rgba(232,88,39,0.18) 0%, transparent 70%); }
#product-showcase[data-showcase-theme='emerald'] .showcase-light-rim { background: radial-gradient(circle, rgba(16,185,129,0.24) 0%, transparent 72%); }
#product-showcase[data-showcase-theme='blue'] .showcase-light-rim { background: radial-gradient(circle, rgba(59,130,246,0.24) 0%, transparent 72%); }
#product-showcase .showcase-stage-3d { perspective: 1400px; perspective-origin: 50% 42%; transform-style: preserve-3d; }
#product-showcase .showcase-tab { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1rem; min-height: 2.75rem; border-radius: 999px; border: 1px solid #e2e8f0; background: #fff; color: #475569; font-size: 0.8125rem; font-weight: 700; cursor: pointer; transition: border-color 0.25s, box-shadow 0.25s; }
#product-showcase .showcase-tab-logo { width: 1.25rem; height: 1.25rem; object-fit: contain; border-radius: 0.35rem; }
#product-showcase .showcase-tab.is-active { color: #0f172a; border-color: rgba(232,88,39,0.45); box-shadow: 0 4px 14px rgba(15,23,42,0.06); }
#product-showcase[data-showcase-theme='cyan'] .showcase-tab.is-active { border-color: rgba(6,182,212,0.45); background: linear-gradient(180deg,#fff,#ecfeff); }
#product-showcase[data-showcase-theme='emerald'] .showcase-tab.is-active { border-color: rgba(16,185,129,0.45); background: linear-gradient(180deg,#fff,#ecfdf5); }
#product-showcase[data-showcase-theme='blue'] .showcase-tab.is-active { border-color: rgba(59,130,246,0.45); background: linear-gradient(180deg,#fff,#eff6ff); }
#product-showcase .showcase-panel { display: none; }
#product-showcase .showcase-panel.is-active { display: block; }
#product-showcase .showcase-stage { position: relative; min-height: clamp(420px,52vh,540px); display: flex; align-items: center; justify-content: center; padding: 1rem clamp(0.75rem,3vw,1.5rem) 2rem; max-width: 100%; overflow-x: clip; isolation: isolate; }
#product-showcase .showcase-float-deck { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
#product-showcase .showcase-float-deck .showcase-float { pointer-events: auto; }
#product-showcase .showcase-connectors { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; opacity: 0.55; }
#product-showcase .showcase-connector-path { fill: none; stroke: #cbd5e1; stroke-width: 1.5; stroke-dasharray: 6 8; }
#product-showcase .theme-showcase-cyan .showcase-connector-path { stroke: rgba(6,182,212,0.45); }
#product-showcase .theme-showcase-emerald .showcase-connector-path { stroke: rgba(16,185,129,0.45); }
#product-showcase .theme-showcase-blue .showcase-connector-path { stroke: rgba(59,130,246,0.45); }
#product-showcase .showcase-connector-success { stroke-width: 2; stroke-dasharray: none; }
#product-showcase .showcase-float { position: absolute; z-index: 3; max-width: min(240px,42vw); display: flex; gap: 0.55rem; padding: 0.65rem 0.75rem; border-radius: 0.95rem; background: linear-gradient(145deg,rgba(255,255,255,0.72),rgba(255,255,255,0.42)); border: 1px solid rgba(255,255,255,0.75); box-shadow: 0 16px 40px rgba(15,23,42,0.1), 0 1px 0 rgba(255,255,255,0.85) inset; backdrop-filter: blur(14px); transition: border-color 0.45s, box-shadow 0.45s; }
#product-showcase .showcase-float > div { min-width: 0; flex: 1; }
#product-showcase.showcase-js-ready .showcase-panel.showcase-idle .showcase-float { animation: showcaseFloat3d 8.5s ease-in-out infinite; }
#product-showcase .showcase-float-pos-0 { top: 5%; left: 1%; animation-delay: 0s; transform: rotateY(6deg) rotateX(2deg); }
#product-showcase .showcase-float-pos-1 { top: 9%; right: 1%; animation-delay: 0.8s; transform: rotateY(-7deg) rotateX(2deg); }
#product-showcase .showcase-float-pos-2 { top: 36%; left: 0; animation-delay: 1.6s; transform: rotateY(5deg) rotateX(-1deg); }
#product-showcase .showcase-float-pos-3 { top: 40%; right: 0; animation-delay: 2.2s; transform: rotateY(-6deg) rotateX(-1deg); }
#product-showcase .showcase-float-pos-4 { bottom: 7%; right: 3%; animation-delay: 3s; transform: rotateY(-5deg) rotateX(-2deg); }
#product-showcase .showcase-float-success { border-color: rgba(110,231,183,0.65); background: linear-gradient(145deg,rgba(236,253,245,0.82),rgba(255,255,255,0.5)); }
#product-showcase .showcase-float-icon { width: 2rem; height: 2rem; border-radius: 0.55rem; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 0.8rem; background: #f1f5f9; color: #475569; }
#product-showcase .theme-showcase-cyan .showcase-float-icon { background: #ecfeff; color: #0891b2; }
#product-showcase .theme-showcase-emerald .showcase-float-icon { background: #ecfdf5; color: #059669; }
#product-showcase .theme-showcase-blue .showcase-float-icon { background: #eff6ff; color: #2563eb; }
#product-showcase .showcase-float-label { display: block; font-size: 0.6875rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; color: #0f172a; }
#product-showcase .showcase-float-text { margin: 0.15rem 0 0; font-size: 0.6875rem; line-height: 1.35; color: #64748b; overflow-wrap: anywhere; }
@keyframes showcaseFloat3d { 0%,100%{translate:0 0} 50%{translate:0 -5px} }
#product-showcase .showcase-phone-wrap { position: relative; z-index: 4; width: min(100%,340px); margin-inline: auto; transform-style: preserve-3d; }
#product-showcase .showcase-phone-wrap::after { content: ''; position: absolute; inset: -14% -10% -6%; z-index: 0; pointer-events: none; background: radial-gradient(ellipse 70% 55% at 50% 38%, rgba(6,182,212,0.14), transparent 68%); opacity: 0.85; }
#product-showcase[data-showcase-theme='emerald'] .showcase-phone-wrap::after { background: radial-gradient(ellipse 70% 55% at 50% 38%, rgba(16,185,129,0.14), transparent 68%); }
#product-showcase[data-showcase-theme='blue'] .showcase-phone-wrap::after { background: radial-gradient(ellipse 70% 55% at 50% 38%, rgba(59,130,246,0.14), transparent 68%); }
#product-showcase .showcase-phone-platform { position: absolute; left: 50%; bottom: -1.1rem; transform: translateX(-50%) rotateX(78deg); width: 88%; height: 2.75rem; border-radius: 50%; background: radial-gradient(ellipse,rgba(15,23,42,0.28),transparent 72%); filter: blur(10px); z-index: 0; }
#product-showcase .showcase-phone-shadow { position: absolute; left: 50%; bottom: -0.55rem; transform: translateX(-50%); width: 82%; height: 22px; border-radius: 50%; background: radial-gradient(ellipse,rgba(15,23,42,0.32),transparent 72%); filter: blur(10px); z-index: 1; }
#product-showcase.showcase-js-ready .showcase-panel.showcase-idle .showcase-phone-shadow { animation: showcaseShadowBreath 10s ease-in-out infinite; }
@keyframes showcaseShadowBreath { 0%,100%{opacity:1;transform:translateX(-50%) scale(1)} 50%{opacity:0.82;transform:translateX(-50%) scale(0.94)} }
#product-showcase .showcase-orbit-ring { position: absolute; inset: -8% -12%; z-index: 5; pointer-events: none; }
#product-showcase .showcase-orbit-chip { position: absolute; width: 2rem; height: 2rem; display: flex; align-items: center; justify-content: center; border-radius: 0.65rem; font-size: 0.72rem; background: linear-gradient(145deg,rgba(255,255,255,0.88),rgba(255,255,255,0.45)); border: 1px solid rgba(255,255,255,0.8); box-shadow: 0 10px 24px rgba(15,23,42,0.12); animation: showcaseOrbitPulse 4.2s ease-in-out infinite; }
#product-showcase .showcase-orbit-chip:nth-child(1){top:14%;right:6%} #product-showcase .showcase-orbit-chip:nth-child(2){top:42%;left:2%;animation-delay:0.9s} #product-showcase .showcase-orbit-chip:nth-child(3){bottom:18%;right:10%;animation-delay:1.6s}
@keyframes showcaseOrbitPulse { 0%,100%{transform:translate3d(0,0,0) scale(1)} 50%{transform:translate3d(0,-4px,0) scale(1.02)} }
#product-showcase .showcase-phone-3d { position: relative; z-index: 3; transform: rotateY(-9deg) rotateX(4deg); transform-style: preserve-3d; }
#product-showcase.showcase-js-ready .showcase-panel.showcase-idle .showcase-phone-3d { animation: showcasePhoneIdle3d 10s ease-in-out infinite; }
@keyframes showcasePhoneIdle3d { 0%,100%{transform:rotateY(-9deg) rotateX(4deg) translate3d(0,0,0)} 50%{transform:rotateY(-7deg) rotateX(3.5deg) translate3d(0,-7px,0)} }
#product-showcase .showcase-phone { position: relative; padding: 11px; border-radius: 2.75rem; background: linear-gradient(165deg,#525c6b,#0a0e14); box-shadow: 0 1px 0 rgba(255,255,255,0.22) inset, -12px 18px 32px rgba(15,23,42,0.22), 0 32px 64px -24px rgba(15,23,42,0.55); border: 1px solid rgba(255,255,255,0.08); }
#product-showcase .showcase-phone-bezel-shine { pointer-events: none; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(118deg,rgba(255,255,255,0.34),transparent 48%); z-index: 4; }
#product-showcase .showcase-screen-glare { pointer-events: none; position: absolute; left: 12%; right: 12%; top: 14%; height: 38%; border-radius: 1.5rem; background: linear-gradient(165deg,rgba(255,255,255,0.38),transparent); z-index: 5; mix-blend-mode: soft-light; opacity: 0.65; }
#product-showcase .showcase-phone-inner { position: relative; border-radius: 2.15rem; overflow: hidden; background: #f8fafc; border: 2px solid rgba(0,0,0,0.88); z-index: 2; }
#product-showcase .showcase-phone-status { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 0.45rem 0.85rem; font-size: 0.625rem; font-weight: 700; background: #fff; border-bottom: 1px solid #e2e8f0; }
#product-showcase .showcase-phone-island { width: 72px; height: 22px; border-radius: 999px; background: #0f172a; justify-self: center; }
#product-showcase .showcase-phone-icons { justify-self: end; display: flex; gap: 0.35rem; font-size: 0.6rem; }
#product-showcase .showcase-phone-header { display: flex; align-items: center; gap: 0.5rem; padding: 0.55rem 0.75rem; background: #fff; border-bottom: 1px solid #e2e8f0; font-size: 0.6875rem; min-width: 0; }
#product-showcase .showcase-phone-header > div { min-width: 0; flex: 1; }
#product-showcase .showcase-phone-header strong { display: block; font-size: 0.75rem; color: #0f172a; }
#product-showcase .showcase-phone-logo { width: 1.75rem; height: 1.75rem; object-fit: contain; border-radius: 0.45rem; border: 1px solid #e2e8f0; padding: 0.15rem; background: #fff; }
#product-showcase .showcase-status-pill { display: flex; align-items: center; gap: 0.25rem; font-size: 0.5625rem; font-weight: 600; color: #059669; font-family: ui-monospace,monospace; }
#product-showcase .showcase-status-dot { width: 0.35rem; height: 0.35rem; border-radius: 50%; background: #10b981; flex-shrink: 0; }
#product-showcase .showcase-status-pill.showcase-status-updating .showcase-status-dot { animation: showcaseStatusPulse 0.65s ease-out 1; }
@keyframes showcaseStatusPulse { 0%{box-shadow:0 0 0 0 rgba(16,185,129,0.5)} 70%{box-shadow:0 0 0 6px rgba(16,185,129,0)} 100%{box-shadow:0 0 0 0 rgba(16,185,129,0)} }
#product-showcase .showcase-phone-screen { padding: 0.65rem 0.6rem 0.75rem; min-height: 320px; background: #f1f5f9; font-size: 0.6875rem; overflow-x: hidden; word-break: break-word; }
#product-showcase .showcase-preview-badge { display: flex; align-items: center; justify-content: center; gap: 0.35rem; margin: 0 0 0.45rem; padding: 0.25rem 0.45rem; border-radius: 0.45rem; background: #fff; border: 1px solid #e2e8f0; font-size: 0.5625rem; font-weight: 700; color: #64748b; text-align: center; }
#product-showcase .showcase-demo-note { margin: 0.45rem 0 0; font-size: 0.5625rem; color: #94a3b8; text-align: center; line-height: 1.35; }
#product-showcase .showcase-toast { display: flex; align-items: flex-start; gap: 0.4rem; padding: 0.45rem 0.5rem; margin-bottom: 0.55rem; border-radius: 0.55rem; background: #fff; border: 1px solid #e2e8f0; font-weight: 600; line-height: 1.35; min-width: 0; }
#product-showcase .showcase-toast span { min-width: 0; overflow-wrap: anywhere; }
#product-showcase .showcase-toast.showcase-toast-pulse { animation: showcaseToastNudge 0.55s ease-out 1; }
@keyframes showcaseToastNudge { 0%{transform:translateY(0)} 35%{transform:translateY(-2px);box-shadow:0 6px 16px rgba(15,23,42,0.08)} 100%{transform:translateY(0)} }
#product-showcase .showcase-toast-success { border-color: #6ee7b7; background: #ecfdf5; color: #065f46; }
#product-showcase .showcase-channel-strip { display: flex; gap: 0.25rem; margin-bottom: 0.45rem; }
#product-showcase .showcase-channel-strip span { flex: 1; display: flex; align-items: center; justify-content: center; gap: 0.2rem; padding: 0.25rem; border-radius: 0.45rem; font-size: 0.5625rem; font-weight: 700; color: #64748b; background: #fff; border: 1px solid #e2e8f0; min-width: 0; }
#product-showcase .showcase-channel-strip span.is-active { color: #0891b2; border-color: rgba(6,182,212,0.45); background: #ecfeff; }
#product-showcase .showcase-chat-row { display: flex; align-items: flex-end; gap: 0.4rem; margin-bottom: 0.45rem; }
#product-showcase .showcase-chat-user { justify-content: flex-end; }
#product-showcase .showcase-chat-avatar { width: 1.5rem; height: 1.5rem; border-radius: 50%; background: #ecfeff; color: #0891b2; display: flex; align-items: center; justify-content: center; font-size: 0.65rem; flex-shrink: 0; }
#product-showcase .showcase-bubble { max-width: 78%; padding: 0.45rem 0.55rem; border-radius: 0.75rem; background: #fff; border: 1px solid #e2e8f0; font-weight: 600; line-height: 1.35; }
#product-showcase .showcase-bubble-user { background: #ecfeff; border-color: #a5f3fc; }
#product-showcase .showcase-msg-meta { display: block; font-size: 0.5625rem; font-weight: 700; color: #64748b; margin-bottom: 0.15rem; }
#product-showcase .showcase-bubble-sub { display: block; margin-top: 0.25rem; font-size: 0.5625rem; color: #64748b; }
#product-showcase .showcase-processing { display: flex; flex-direction: column; gap: 0.35rem; margin: 0.5rem 0; padding: 0.45rem; border-radius: 0.65rem; background: #fff; border: 1px solid #e2e8f0; }
#product-showcase .showcase-proc-step { display: flex; align-items: center; gap: 0.4rem; font-size: 0.625rem; font-weight: 600; color: #94a3b8; }
#product-showcase .showcase-proc-step.is-active { color: #0891b2; }
#product-showcase .showcase-proc-dot { width: 0.35rem; height: 0.35rem; border-radius: 50%; background: currentColor; opacity: 0.5; }
#product-showcase .showcase-proc-step.is-active .showcase-proc-dot { opacity: 1; }
#product-showcase .showcase-proc-tag { font-size: 0.5625rem; font-weight: 700; margin-left: auto; color: #64748b; }
#product-showcase .showcase-proc-inline .showcase-proc-pill { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.35rem 0.5rem; border-radius: 0.5rem; background: #ecfdf5; border: 1px solid #6ee7b7; font-size: 0.5625rem; font-weight: 700; color: #047857; }
#product-showcase .showcase-automation-bar,#product-showcase .showcase-connected-bar,#product-showcase .showcase-itinerary-bar,#product-showcase .showcase-outcome-bar { display: flex; align-items: center; gap: 0.4rem; margin-top: 0.45rem; padding: 0.4rem 0.5rem; border-radius: 0.5rem; font-size: 0.5625rem; font-weight: 700; }
#product-showcase .showcase-automation-bar { background: #ecfeff; border: 1px solid rgba(6,182,212,0.35); color: #0e7490; }
#product-showcase .showcase-connected-bar { background: #f0fdf4; border: 1px solid rgba(16,185,129,0.35); color: #047857; }
#product-showcase .showcase-itinerary-bar { background: #eff6ff; border: 1px solid rgba(59,130,246,0.35); color: #1d4ed8; }
#product-showcase .showcase-outcome-bar.showcase-outcome-success { background: #ecfdf5; border: 1px solid #6ee7b7; color: #047857; }
#product-showcase .showcase-service-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 0.25rem; margin-bottom: 0.35rem; }
#product-showcase .showcase-service-chip { display: flex; align-items: center; justify-content: center; gap: 0.2rem; padding: 0.25rem; border-radius: 0.45rem; font-size: 0.5rem; font-weight: 700; background: #fff; border: 1px solid #e2e8f0; color: #64748b; }
#product-showcase .showcase-service-chip.is-active { color: #059669; border-color: rgba(16,185,129,0.45); background: #ecfdf5; }
#product-showcase .showcase-comm-viewport { min-height: 118px; margin-top: 0.35rem; }
#product-showcase .showcase-comm-pane { padding: 0.45rem; border-radius: 0.55rem; background: #fff; border: 1px solid #e2e8f0; }
#product-showcase .showcase-comm-pane-head { display: flex; justify-content: space-between; font-size: 0.5625rem; font-weight: 700; margin-bottom: 0.35rem; }
#product-showcase .showcase-comm-tag { font-size: 0.5rem; padding: 0.15rem 0.35rem; border-radius: 0.35rem; background: #f1f5f9; color: #64748b; }
#product-showcase .showcase-comm-search { font-size: 0.5625rem; color: #94a3b8; margin-bottom: 0.35rem; }
#product-showcase .showcase-comm-row { display: flex; align-items: center; gap: 0.35rem; font-size: 0.5625rem; }
#product-showcase .showcase-comm-row.is-stack { flex-direction: column; align-items: stretch; gap: 0.2rem; }
#product-showcase .showcase-comm-avatar { width: 1.35rem; height: 1.35rem; border-radius: 50%; background: #ecfdf5; display: flex; align-items: center; justify-content: center; color: #059669; flex-shrink: 0; }
#product-showcase .showcase-comm-pill,#product-showcase .showcase-comm-action,#product-showcase .showcase-comm-price { margin-left: auto; font-size: 0.5rem; font-weight: 700; color: #0891b2; }
#product-showcase .showcase-lead-card { padding: 0.45rem; border-radius: 0.55rem; background: #fff; border: 1px solid #e2e8f0; }
#product-showcase .showcase-lead-badge { font-size: 0.5rem; font-weight: 800; color: #2563eb; margin-bottom: 0.35rem; display: flex; align-items: center; gap: 0.25rem; }
#product-showcase .showcase-lead-pulse { width: 0.35rem; height: 0.35rem; border-radius: 50%; background: #3b82f6; animation: showcaseStatusPulse 1.2s ease-in-out infinite; }
#product-showcase .showcase-lead-row { display: flex; justify-content: space-between; font-size: 0.5625rem; margin-bottom: 0.2rem; }
#product-showcase .showcase-lead-row span { color: #64748b; }
#product-showcase .showcase-pipeline-strip { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 0.15rem; margin-top: 0.35rem; }
#product-showcase .showcase-pipeline-strip span { text-align: center; font-size: 0.4rem; font-weight: 700; padding: 0.2rem 0.05rem; border-radius: 0.35rem; background: #f1f5f9; color: #64748b; }
#product-showcase .showcase-pipeline-strip span.is-active { background: #dbeafe; color: #1d4ed8; }
#product-showcase .showcase-followup { margin-top: 0.45rem; padding: 0.4rem; border-radius: 0.5rem; font-size: 0.5625rem; font-weight: 800; text-align: center; }
#product-showcase .showcase-followup-due { border: 1px solid #fcd34d; background: #fffbeb; color: #b45309; }
#product-showcase .showcase-followup-done { border: 1px solid #6ee7b7; background: #ecfdf5; color: #047857; }
#product-showcase .showcase-booking-banner { margin-top: 0.45rem; padding: 0.4rem; border-radius: 0.5rem; background: #ecfdf5; border: 1px solid #6ee7b7; color: #047857; font-size: 0.5625rem; font-weight: 800; text-align: center; }
#product-showcase .showcase-phone-home { height: 4px; width: 36%; margin: 0.45rem auto 0.5rem; border-radius: 999px; background: #cbd5e1; }
#product-showcase .showcase-cta-btn { background: linear-gradient(135deg,#e85827,#da251d); box-shadow: 0 10px 28px -8px rgba(232,88,39,0.45); min-height: 2.75rem; }
#product-showcase .showcase-float.is-sync-active { filter: brightness(1.03); border-color: rgba(6,182,212,0.55); box-shadow: 0 14px 32px rgba(15,23,42,0.11), 0 0 26px rgba(6,182,212,0.12); }
#product-showcase .theme-showcase-emerald .showcase-float.is-sync-active { border-color: rgba(16,185,129,0.55); box-shadow: 0 14px 32px rgba(15,23,42,0.11), 0 0 26px rgba(16,185,129,0.12); }
#product-showcase .theme-showcase-blue .showcase-float.is-sync-active { border-color: rgba(59,130,246,0.55); box-shadow: 0 14px 32px rgba(15,23,42,0.11), 0 0 26px rgba(59,130,246,0.12); }
#product-showcase.showcase-js-ready .showcase-panel:not(.showcase-idle) .showcase-seq-float { opacity: 0; }
#product-showcase.showcase-js-ready .showcase-seq-reveal { opacity: 0; visibility: hidden; }
@media (min-width:1024px){ #product-showcase .showcase-stage{min-height:clamp(460px,54vh,600px)} #product-showcase .showcase-phone-wrap{width:min(100%,380px)} #product-showcase .showcase-float{max-width:min(260px,28vw)} }
@media (min-width:768px) and (max-width:1023px){ #product-showcase .showcase-phone-wrap{width:min(100%,290px)} #product-showcase .showcase-float-pos-1,#product-showcase .showcase-float-pos-3{display:none!important} }
@media (max-width:767px){ #product-showcase .showcase-stage{flex-direction:column;min-height:auto;padding:0.5rem 0 1rem} #product-showcase .showcase-connectors,#product-showcase .showcase-orbit-ring{display:none} #product-showcase .showcase-phone-3d{transform:none;animation:none!important} #product-showcase .showcase-float-deck{position:relative;display:grid;grid-template-columns:1fr;gap:0.5rem;max-width:320px;margin:0 auto;order:2} #product-showcase .showcase-float-deck .showcase-float{position:relative!important;top:auto!important;left:auto!important;right:auto!important;bottom:auto!important;max-width:100%;animation:none;background:rgba(255,255,255,0.94)} #product-showcase .showcase-phone-wrap{order:-1;width:min(100%,320px)} #product-showcase .showcase-float-pos-1,#product-showcase .showcase-float-pos-3{display:none!important} }
@media (prefers-reduced-motion:reduce){ #product-showcase .showcase-float,#product-showcase .showcase-phone-3d,#product-showcase .showcase-phone-shadow,#product-showcase .showcase-orbit-chip{animation:none!important} #product-showcase.showcase-js-ready .showcase-seq-reveal,#product-showcase .showcase-seq-screen-item{opacity:1!important;visibility:visible!important} }

/* =======================================================================
   Phase 6 — AI Talksy showcase responsive ( #vani-prod-panel-aitalksy only )
   ======================================================================= */
#products.vani-prod-stacked .vani-prod-stack,
#products.vani-prod-stacked .vani-prod-panel[data-vani-prod-panel] {
  max-width: 100%;
  overflow-x: clip;
}

#products.vani-prod-stacked .vani-prod-panel-grid,
#products.vani-prod-stacked .vani-prod-copy,
#products.vani-prod-stacked .vani-prod-hero,
#products.vani-prod-stacked .vani-prod-hero-canvas,
#products.vani-prod-stacked .vani-prod-phone-stage,
#products.vani-prod-stacked .vani-prod-phone-3d,
#products.vani-prod-stacked .vani-prod-phone-frame {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

#products.vani-prod-stacked .vani-prod-hero-canvas {
  overflow: hidden;
}

#products.vani-prod-stacked .vani-prod-device-screen,
#products.vani-prod-stacked .vani-prod-app-body {
  max-width: 100%;
  overflow-x: hidden;
}

@media (max-width: 1023px) {
  #products.vani-prod-stacked .vani-prod-panel-grid {
    display: flex;
    flex-direction: column;
    width: 100%;
  }

  #products.vani-prod-stacked [data-vani-prod-panel='community'] .vani-prod-hero,
  #products.vani-prod-stacked [data-vani-prod-panel='traveljioo'] .vani-prod-hero {
    order: 4;
    width: 100%;
    max-width: 100%;
    align-self: center;
  }

  #products.vani-prod-stacked [data-vani-prod-panel='community'] .vani-prod-feature-story,
  #products.vani-prod-stacked [data-vani-prod-panel='traveljioo'] .vani-prod-feature-story {
    order: 5;
    width: 100%;
  }

  #products.vani-prod-stacked [data-vani-prod-panel='community'] .vani-prod-copy > div.flex,
  #products.vani-prod-stacked [data-vani-prod-panel='traveljioo'] .vani-prod-copy > div.flex {
    order: 6;
    width: 100%;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  #products.vani-prod-stacked .vani-prod-stack {
    gap: clamp(2.25rem, 5vw, 3.25rem);
  }

  #products.vani-prod-stacked .vani-prod-panel {
    padding: clamp(1.15rem, 2.5vw, 1.65rem);
  }
}

#products [data-vani-prod-panel='aitalksy'] {
  max-width: 100%;
  overflow-x: clip;
}

#products [data-vani-prod-panel='aitalksy'] .vani-prod-panel-grid,
#products [data-vani-prod-panel='aitalksy'] .vani-prod-copy,
#products [data-vani-prod-panel='aitalksy'] .vani-prod-hero,
#products [data-vani-prod-panel='aitalksy'] .vani-prod-hero-canvas,
#products [data-vani-prod-panel='aitalksy'] .vani-prod-aitalksy-feature-grid,
#products [data-vani-prod-panel='aitalksy'] .vani-prod-aitalksy-integrations,
#products [data-vani-prod-panel='aitalksy'] .vani-prod-aitalksy-hiw {
  min-width: 0;
  max-width: 100%;
}

#products [data-vani-prod-panel='aitalksy'] .vani-prod-device-screen,
#products [data-vani-prod-panel='aitalksy'] .vani-prod-app-body {
  max-width: 100%;
  overflow-x: hidden;
}

@media (min-width: 1024px) {
  #products [data-vani-prod-panel='aitalksy'] .vani-prod-aitalksy-features-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #products [data-vani-prod-panel='aitalksy'] .vani-prod-aitalksy-integrations-list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  #products [data-vani-prod-panel='aitalksy'] .vani-prod-aitalksy-hiw-layout {
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  }
}

@media (max-width: 1023px) {
  #products [data-vani-prod-panel='aitalksy'] .vani-prod-story-rail {
    order: 0;
    width: 100%;
  }

  #products [data-vani-prod-panel='aitalksy'] .vani-prod-copy > p.text-xs.font-mono {
    order: 1;
    width: 100%;
  }

  #products [data-vani-prod-panel='aitalksy'] .vani-prod-copy h3 {
    order: 2;
    width: 100%;
  }

  #products [data-vani-prod-panel='aitalksy'] .vani-prod-copy > p.text-sm,
  #products [data-vani-prod-panel='aitalksy'] .vani-prod-copy > p.text-sm.sm\:text-base {
    order: 3;
    width: 100%;
    max-width: 100%;
  }

  #products [data-vani-prod-panel='aitalksy'] .vani-prod-hero {
    order: 4;
    width: 100%;
    max-width: 100%;
    align-self: center;
  }

  #products [data-vani-prod-panel='aitalksy'] .vani-prod-aitalksy-feature-grid {
    order: 5;
    width: 100%;
  }

  #products [data-vani-prod-panel='aitalksy'] .vani-prod-aitalksy-integrations {
    order: 6;
    width: 100%;
  }

  #products [data-vani-prod-panel='aitalksy'] .vani-prod-aitalksy-hiw {
    order: 7;
    width: 100%;
  }

  #products [data-vani-prod-panel='aitalksy'] .vani-prod-feature-story {
    order: 8;
    width: 100%;
  }

  #products [data-vani-prod-panel='aitalksy'] .vani-prod-copy > div.flex {
    order: 9;
    width: 100%;
  }

  #products [data-vani-prod-panel='aitalksy'] .vani-prod-demo-stage {
    width: min(100%, clamp(260px, 84vw, 400px));
    margin-inline: auto;
  }

  #products [data-vani-prod-panel='aitalksy'] .vani-prod-phone-frame {
    width: 100%;
    max-width: 100%;
  }

  #products [data-vani-prod-panel='aitalksy'] .vani-prod-aitalksy-hiw-layout {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }

  #products [data-vani-prod-panel='aitalksy'] .vani-prod-aitalksy-hiw-steps {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
  }

  #products [data-vani-prod-panel='aitalksy'] .vani-prod-aitalksy-hiw-step {
    width: 100%;
  }

  #products [data-vani-prod-panel='aitalksy'] .vani-prod-aitalksy-preview-controls {
    width: 100%;
    padding-inline: 0.15rem;
  }

  #products [data-vani-prod-panel='aitalksy'] .vani-prod-aitalksy-feature-card,
  #products [data-vani-prod-panel='aitalksy'] .vani-prod-aitalksy-integration-card,
  #products [data-vani-prod-panel='aitalksy'] .vani-prod-aitalksy-hiw-step,
  #products [data-vani-prod-panel='aitalksy'] .vani-prod-aitalksy-hiw-replay,
  #products [data-vani-prod-panel='aitalksy'] .vani-prod-aitalksy-preview-btn,
  #products [data-vani-prod-panel='aitalksy'] .vani-prod-aitalksy-feature-nav button,
  #products [data-vani-prod-panel='aitalksy'] .vani-prod-aitalksy-demo-nav button {
    min-height: 2.75rem;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }

  #products [data-vani-prod-panel='aitalksy'] .vani-prod-aitalksy-integration-card {
    min-height: 4.85rem;
  }

  #products [data-vani-prod-panel='aitalksy'] .vani-prod-aitalksy-feature-text strong {
    font-size: 0.8125rem;
  }

  #products [data-vani-prod-panel='aitalksy'] .vani-prod-aitalksy-feature-text span {
    font-size: 0.6875rem;
    line-height: 1.45;
  }

  #products [data-vani-prod-panel='aitalksy'] .vani-prod-float-tl,
  #products [data-vani-prod-panel='aitalksy'] .vani-prod-float-tr {
    display: none;
  }

  #products [data-vani-prod-panel='aitalksy'] .vani-prod-float-br {
    max-width: min(140px, 38vw);
  }
}

@media (max-width: 359px) {
  #products [data-vani-prod-panel='aitalksy'] .vani-prod-aitalksy-features-list {
    grid-template-columns: 1fr;
  }
}

@media (hover: none) and (pointer: coarse) {
  #products [data-vani-prod-panel='aitalksy'] .vani-prod-aitalksy-feature-card:hover,
  #products [data-vani-prod-panel='aitalksy'] .vani-prod-aitalksy-integration-card:hover {
    transform: none;
  }

  #products [data-vani-prod-panel='aitalksy'] .vani-prod-aitalksy-feature-card:hover .vani-prod-aitalksy-feature-icon {
    transform: none;
    box-shadow: none;
  }
}

/* Community Forum — interactive showcase (#vani-prod-panel-community only) */
#products [data-vani-prod-panel='community'] .vani-prod-community-showcase {
  min-width: 0;
  max-width: 100%;
}

#products [data-vani-prod-panel='community'] .vani-prod-community-canvas {
  position: relative;
  border-radius: 1.25rem;
  padding: clamp(1.25rem, 3vw, 2rem);
  background: linear-gradient(145deg, #0f172a 0%, #1e293b 42%, #0c1222 100%);
  border: 1px solid rgba(232, 88, 39, 0.22);
  box-shadow: 0 24px 48px rgba(15, 23, 42, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.04);
  overflow: hidden;
}

#products [data-vani-prod-panel='community'] .vani-prod-community-canvas-glow {
  position: absolute;
  inset: -20% -10%;
  background: radial-gradient(ellipse at 30% 20%, rgba(232, 88, 39, 0.14), transparent 55%),
    radial-gradient(ellipse at 80% 70%, rgba(16, 185, 129, 0.08), transparent 50%);
  pointer-events: none;
}

#products [data-vani-prod-panel='community'] .vani-prod-community-phone-col {
  min-width: 0;
}

#products [data-vani-prod-panel='community'] .vani-prod-community-caption {
  color: #cbd5e1;
}

@media (min-width: 1024px) {
  #products [data-vani-prod-panel='community'] .vani-prod-community-phone-col {
    order: 1;
  }

  #products [data-vani-prod-panel='community'] .vani-prod-community-controls-col {
    order: 2;
  }
}

#products [data-vani-prod-panel='community'] .vani-prod-live-pill-cf {
  background: rgba(232, 88, 39, 0.15);
  color: #fdba74;
  border: 1px solid rgba(232, 88, 39, 0.35);
}

#products [data-vani-prod-panel='community'] .vani-prod-device-inner.vani-prod-cf-hide-chrome .vani-prod-device-header {
  display: none !important;
}

#products [data-vani-prod-panel='community'] .vani-prod-cf-screen {
  overflow: hidden;
}

#products [data-vani-prod-panel='community'] .vani-prod-cf-app-body {
  background: #f8fafc;
  min-height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
}

#products [data-vani-prod-panel='community'] .vani-prod-cf-onboarding {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0.65rem 0.5rem 0.35rem;
  gap: 0.55rem;
}

#products [data-vani-prod-panel='community'] .vani-prod-cf-brand {
  width: 3rem;
  height: 3rem;
  object-fit: contain;
}

#products [data-vani-prod-panel='community'] .vani-prod-cf-app-title {
  font-size: 0.95rem;
  font-weight: 800;
  color: #0f172a;
  margin: 0;
}

#products [data-vani-prod-panel='community'] .vani-prod-cf-welcome {
  font-size: 0.5625rem;
  line-height: 1.45;
  color: #64748b;
  margin: 0;
  max-width: 14rem;
}

#products [data-vani-prod-panel='community'] .vani-prod-cf-btn {
  width: 100%;
  max-width: 11.5rem;
  border-radius: 0.65rem;
  font-size: 0.625rem;
  font-weight: 700;
  padding: 0.55rem 0.75rem;
  border: none;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

#products [data-vani-prod-panel='community'] .vani-prod-cf-btn-primary {
  background: linear-gradient(135deg, #e85827, #f97316);
  color: #fff;
  box-shadow: 0 6px 16px rgba(232, 88, 39, 0.35);
}

#products [data-vani-prod-panel='community'] .vani-prod-cf-btn-ghost {
  background: #fff;
  color: #334155;
  border: 1px solid #e2e8f0;
}

#products [data-vani-prod-panel='community'] .vani-prod-cf-preview-note {
  font-size: 0.5rem;
  color: #94a3b8;
  margin: 0.25rem 0 0;
}

#products [data-vani-prod-panel='community'] .vani-prod-cf-view {
  padding: 0.35rem 0.2rem;
  font-size: 0.5625rem;
}

#products [data-vani-prod-panel='community'] .vani-prod-cf-screen-title {
  font-weight: 800;
  color: #0f172a;
  margin: 0 0 0.4rem;
  font-size: 0.625rem;
}

#products [data-vani-prod-panel='community'] .vani-prod-cf-pane-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 700;
  margin-bottom: 0.35rem;
  color: #0f172a;
}

#products [data-vani-prod-panel='community'] .vani-prod-cf-tag {
  font-size: 0.5rem;
  padding: 0.12rem 0.35rem;
  border-radius: 0.35rem;
  background: #f1f5f9;
  color: #64748b;
  font-weight: 600;
}

#products [data-vani-prod-panel='community'] .vani-prod-cf-search {
  font-size: 0.5625rem;
  color: #94a3b8;
  margin-bottom: 0.35rem;
  padding: 0.35rem 0.45rem;
  border-radius: 0.45rem;
  background: #f1f5f9;
}

#products [data-vani-prod-panel='community'] .vani-prod-cf-row {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0;
  border-bottom: 1px solid #f1f5f9;
}

#products [data-vani-prod-panel='community'] .vani-prod-cf-row.is-stack {
  flex-direction: column;
  align-items: stretch;
  gap: 0.15rem;
}

#products [data-vani-prod-panel='community'] .vani-prod-cf-row strong {
  color: #0f172a;
}

#products [data-vani-prod-panel='community'] .vani-prod-cf-row small {
  color: #64748b;
  display: block;
}

#products [data-vani-prod-panel='community'] .vani-prod-cf-avatar {
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 50%;
  background: #ecfdf5;
  color: #059669;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

#products [data-vani-prod-panel='community'] .vani-prod-cf-pill,
#products [data-vani-prod-panel='community'] .vani-prod-cf-action,
#products [data-vani-prod-panel='community'] .vani-prod-cf-price {
  margin-left: auto;
  font-size: 0.5rem;
  font-weight: 700;
  color: #0891b2;
}

#products [data-vani-prod-panel='community'] .vani-prod-cf-pill.is-orange {
  color: #e85827;
}

#products [data-vani-prod-panel='community'] .vani-prod-cf-banner {
  margin-top: 0.45rem;
  padding: 0.4rem 0.45rem;
  border-radius: 0.45rem;
  font-size: 0.5625rem;
  font-weight: 600;
}

#products [data-vani-prod-panel='community'] .vani-prod-cf-banner-success {
  background: #ecfdf5;
  color: #047857;
  border: 1px solid #a7f3d0;
}

#products [data-vani-prod-panel='community'] .vani-prod-cf-banner-platform {
  background: linear-gradient(135deg, rgba(232, 88, 39, 0.12), rgba(15, 23, 42, 0.06));
  color: #0f172a;
  border: 1px solid rgba(232, 88, 39, 0.25);
}

#products [data-vani-prod-panel='community'] .vani-prod-cf-kpi-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.35rem;
  margin-bottom: 0.45rem;
}

#products [data-vani-prod-panel='community'] .vani-prod-cf-kpi-row div {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 0.45rem;
  padding: 0.35rem;
  text-align: center;
}

#products [data-vani-prod-panel='community'] .vani-prod-cf-kpi-row span {
  display: block;
  font-size: 0.5rem;
  color: #64748b;
}

#products [data-vani-prod-panel='community'] .vani-prod-cf-kpi-row strong {
  font-size: 0.75rem;
  color: #0f172a;
}

#products [data-vani-prod-panel='community'] .vani-prod-cf-service-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.3rem;
}

#products [data-vani-prod-panel='community'] .vani-prod-cf-service-grid span {
  font-size: 0.5rem;
  font-weight: 600;
  padding: 0.35rem;
  border-radius: 0.4rem;
  background: #fff;
  border: 1px solid #e2e8f0;
  color: #334155;
}

#products [data-vani-prod-panel='community'] .vani-prod-cf-service-grid span.is-hot {
  border-color: rgba(232, 88, 39, 0.45);
  color: #c2410c;
}

#products [data-vani-prod-panel='community'] .vani-prod-cf-proc-step {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.5625rem;
  color: #64748b;
  margin-bottom: 0.25rem;
}

#products [data-vani-prod-panel='community'] .vani-prod-cf-proc-step span {
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  background: #cbd5e1;
}

#products [data-vani-prod-panel='community'] .vani-prod-cf-proc-step.is-active span {
  background: #e85827;
}

#products [data-vani-prod-panel='community'] .vani-prod-cf-proc-step.is-done span {
  background: #10b981;
}

#products [data-vani-prod-panel='community'] .vani-prod-cf-tree {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
  margin: 0.35rem 0;
}

#products [data-vani-prod-panel='community'] .vani-prod-cf-tree-node {
  font-size: 0.5625rem;
  font-weight: 700;
  padding: 0.25rem 0.5rem;
  border-radius: 0.35rem;
  background: #f1f5f9;
  color: #334155;
}

#products [data-vani-prod-panel='community'] .vani-prod-cf-tree-node.is-you {
  background: rgba(232, 88, 39, 0.12);
  color: #c2410c;
}

#products [data-vani-prod-panel='community'] .vani-prod-cf-tree-line {
  width: 2px;
  height: 0.35rem;
  background: #cbd5e1;
}

#products [data-vani-prod-panel='community'] .vani-prod-cf-muted {
  font-size: 0.5rem;
  color: #64748b;
  margin: 0;
}

#products [data-vani-prod-panel='community'] .vani-prod-cf-nav span.is-on {
  color: #e85827;
}

#products [data-vani-prod-panel='community'] .vani-prod-cf-journey-tabs {
  display: flex;
  gap: 0.35rem;
  padding: 0.25rem;
  background: #f1f5f9;
  border-radius: 0.75rem;
  border: 1px solid #e2e8f0;
}

#products [data-vani-prod-panel='community'] .vani-prod-cf-journey-tab {
  flex: 1;
  border: none;
  background: transparent;
  font-size: 0.8125rem;
  font-weight: 700;
  padding: 0.55rem 0.75rem;
  border-radius: 0.55rem;
  color: #64748b;
  cursor: pointer;
}

#products [data-vani-prod-panel='community'] .vani-prod-cf-journey-tab.is-active {
  background: #0f172a;
  color: #fff;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.2);
}

#products [data-vani-prod-panel='community'] .vani-prod-cf-screens-wrap {
  border: 1px solid #e2e8f0;
  border-radius: 0.85rem;
  padding: 0.85rem 1rem;
  background: #fff;
  box-shadow: 0 4px 20px rgba(15, 23, 42, 0.04);
}

#products [data-vani-prod-panel='community'] .vani-prod-cf-screens-kicker {
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #64748b;
  margin: 0 0 0.35rem;
}

#products [data-vani-prod-panel='community'] .vani-prod-cf-screens-now {
  font-size: 0.8125rem;
  color: #0f172a;
  margin: 0 0 0.65rem;
  min-height: 1.25rem;
}

#products [data-vani-prod-panel='community'] .vani-prod-cf-screens-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  max-height: min(22rem, 50vh);
  overflow-y: auto;
}

#products [data-vani-prod-panel='community'] .vani-prod-cf-screen-item {
  width: 100%;
  text-align: left;
  border: 1px solid #e2e8f0;
  border-radius: 0.65rem;
  padding: 0.55rem 0.65rem;
  background: #f8fafc;
  cursor: pointer;
  display: flex;
  gap: 0.5rem;
  align-items: flex-start;
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

#products [data-vani-prod-panel='community'] .vani-prod-cf-screen-item:hover {
  border-color: rgba(232, 88, 39, 0.35);
}

#products [data-vani-prod-panel='community'] .vani-prod-cf-screen-item.is-active {
  border-color: #e85827;
  background: #fff7ed;
  box-shadow: 0 0 0 1px rgba(232, 88, 39, 0.2);
}

#products [data-vani-prod-panel='community'] .vani-prod-cf-screen-item-icon {
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 0.45rem;
  background: #0f172a;
  color: #fdba74;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 0.75rem;
}

#products [data-vani-prod-panel='community'] .vani-prod-cf-screen-item.is-active .vani-prod-cf-screen-item-icon {
  background: linear-gradient(135deg, #e85827, #f97316);
  color: #fff;
}

#products [data-vani-prod-panel='community'] .vani-prod-cf-screen-item strong {
  display: block;
  font-size: 0.8125rem;
  color: #0f172a;
}

#products [data-vani-prod-panel='community'] .vani-prod-cf-screen-item span.vani-prod-cf-screen-desc {
  font-size: 0.6875rem;
  color: #64748b;
  line-height: 1.35;
}

#products [data-vani-prod-panel='community'] .vani-prod-cf-screens-nav {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.65rem;
  justify-content: flex-end;
}

#products [data-vani-prod-panel='community'] .vani-prod-cf-screens-nav-btn {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 0.5rem;
  border: 1px solid #e2e8f0;
  background: #fff;
  color: #334155;
  cursor: pointer;
}

#products [data-vani-prod-panel='community'] .vani-prod-cf-screens-nav-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

@media (max-width: 1023px) {
  #products [data-vani-prod-panel='community'] .vani-prod-community-phone-col {
    order: 1;
    width: 100%;
    max-width: 100%;
  }

  #products [data-vani-prod-panel='community'] .vani-prod-community-controls-col {
    order: 2;
    width: 100%;
    max-width: 100%;
  }
}

#products [data-vani-prod-panel='community'] .vani-prod-cf-progress-wrap {
  padding: 0.35rem 0.45rem 0.15rem;
  border-bottom: 1px solid #e2e8f0;
  background: #fff;
}

#products [data-vani-prod-panel='community'] .vani-prod-cf-progress-bar {
  height: 0.25rem;
  border-radius: 999px;
  background: #e2e8f0;
  overflow: hidden;
}

#products [data-vani-prod-panel='community'] .vani-prod-cf-progress-bar span {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, #e85827, #f97316);
  transition: width 0.35s ease;
}

#products [data-vani-prod-panel='community'] .vani-prod-cf-progress-label {
  font-size: 0.5rem;
  color: #64748b;
  margin: 0.25rem 0 0;
  text-align: center;
}

#products [data-vani-prod-panel='community'] .vani-prod-cf-demo-badge {
  font-size: 0.5rem;
  font-weight: 700;
  color: #c2410c;
  background: #fff7ed;
  border: 1px solid rgba(232, 88, 39, 0.25);
  border-radius: 0.35rem;
  padding: 0.25rem 0.4rem;
  margin: 0 0 0.4rem;
}

#products [data-vani-prod-panel='community'] .vani-prod-cf-field {
  display: block;
  margin-bottom: 0.45rem;
}

#products [data-vani-prod-panel='community'] .vani-prod-cf-field span {
  display: block;
  font-size: 0.5rem;
  font-weight: 600;
  color: #475569;
  margin-bottom: 0.2rem;
}

#products [data-vani-prod-panel='community'] .vani-prod-cf-field input {
  width: 100%;
  box-sizing: border-box;
  font-size: 0.625rem;
  padding: 0.45rem 0.5rem;
  border-radius: 0.45rem;
  border: 1px solid #cbd5e1;
  background: #fff;
}

#products [data-vani-prod-panel='community'] .vani-prod-cf-field input:focus {
  outline: 2px solid rgba(232, 88, 39, 0.35);
  border-color: #e85827;
}

#products [data-vani-prod-panel='community'] .vani-prod-cf-hint {
  font-size: 0.5rem;
  color: #64748b;
  margin: 0 0 0.4rem;
  line-height: 1.4;
}

#products [data-vani-prod-panel='community'] .vani-prod-cf-hint.is-prominent {
  color: #0f172a;
  background: #f1f5f9;
  padding: 0.35rem;
  border-radius: 0.35rem;
}

#products [data-vani-prod-panel='community'] .vani-prod-cf-error {
  font-size: 0.5625rem;
  color: #b91c1c;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 0.35rem;
  padding: 0.35rem 0.45rem;
  margin: 0.35rem 0;
}

#products [data-vani-prod-panel='community'] .vani-prod-cf-flow-nav {
  display: flex;
  gap: 0.35rem;
  margin-top: 0.5rem;
}

#products [data-vani-prod-panel='community'] .vani-prod-cf-flow-nav .vani-prod-cf-btn {
  flex: 1;
  max-width: none;
}

#products [data-vani-prod-panel='community'] .vani-prod-cf-link-back {
  display: block;
  width: 100%;
  margin-top: 0.45rem;
  border: none;
  background: none;
  font-size: 0.5rem;
  font-weight: 600;
  color: #64748b;
  cursor: pointer;
  text-align: center;
}

#products [data-vani-prod-panel='community'] .vani-prod-cf-link-back:hover {
  color: #e85827;
}

#products [data-vani-prod-panel='community'] .vani-prod-cf-check {
  display: flex;
  align-items: flex-start;
  gap: 0.35rem;
  font-size: 0.5625rem;
  color: #334155;
  margin: 0.35rem 0;
  cursor: pointer;
}

#products [data-vani-prod-panel='community'] .vani-prod-cf-review-list {
  margin: 0 0 0.45rem;
  font-size: 0.5625rem;
}

#products [data-vani-prod-panel='community'] .vani-prod-cf-review-list div {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.25rem 0;
  border-bottom: 1px solid #f1f5f9;
}

#products [data-vani-prod-panel='community'] .vani-prod-cf-review-list dt {
  color: #64748b;
  font-weight: 600;
}

#products [data-vani-prod-panel='community'] .vani-prod-cf-review-list dd {
  margin: 0;
  color: #0f172a;
  font-weight: 700;
  text-align: right;
}

#products [data-vani-prod-panel='community'] .vani-prod-cf-photo-demo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  margin: 0.35rem 0 0.5rem;
  font-size: 0.5625rem;
  color: #64748b;
}

#products [data-vani-prod-panel='community'] .vani-prod-cf-avatar.is-lg {
  width: 2.5rem;
  height: 2.5rem;
  font-size: 1rem;
}

#products [data-vani-prod-panel='community'] .vani-prod-cf-await {
  text-align: center;
  padding: 0.75rem 0.35rem;
  color: #64748b;
  font-size: 0.5625rem;
}

#products [data-vani-prod-panel='community'] .vani-prod-cf-await i {
  font-size: 1.25rem;
  color: #e85827;
  margin-bottom: 0.35rem;
}

#products [data-vani-prod-panel='community'] .vani-prod-cf-banner.is-lg {
  text-align: center;
  padding: 0.55rem;
}

#products [data-vani-prod-panel='community'] .vani-prod-cf-flow-view {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

#products [data-vani-prod-panel='community'] .vani-prod-cf-main-view {
  padding-bottom: 0.25rem;
}

#products [data-vani-prod-panel='community'] .vani-prod-cf-bilingual-title {
    font-size: 0.6875rem;
  font-weight: 800;
  color: #0f172a;
  margin: 0 0 0.4rem;
}

#products [data-vani-prod-panel='community'] .vani-prod-cf-bilingual-title span {
  font-weight: 600;
  color: #64748b;
  font-size: 0.5625rem;
  margin-left: 0.25rem;
}

#products [data-vani-prod-panel='community'] .vani-prod-cf-stories {
  display: flex;
    gap: 0.35rem;
  overflow-x: auto;
  margin-bottom: 0.45rem;
  padding-bottom: 0.15rem;
}

#products [data-vani-prod-panel='community'] .vani-prod-cf-story {
  flex-shrink: 0;
  font-size: 0.5rem;
  font-weight: 700;
  padding: 0.3rem 0.45rem;
  border-radius: 999px;
  border: 1px solid #e2e8f0;
  background: #fff;
  color: #475569;
}

#products [data-vani-prod-panel='community'] .vani-prod-cf-story.is-live {
  border-color: #e85827;
  color: #c2410c;
}

#products [data-vani-prod-panel='community'] .vani-prod-cf-quick-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.3rem;
  margin-bottom: 0.35rem;
}

#products [data-vani-prod-panel='community'] .vani-prod-cf-quick {
  border: 1px solid #e2e8f0;
  border-radius: 0.45rem;
  background: #fff;
  padding: 0.35rem 0.2rem;
  font-size: 0.5rem;
  font-weight: 700;
  color: #334155;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.1rem;
}

#products [data-vani-prod-panel='community'] .vani-prod-cf-quick i {
  color: #e85827;
  font-size: 0.75rem;
}

#products [data-vani-prod-panel='community'] .vani-prod-cf-quick small {
  font-weight: 600;
  color: #94a3b8;
  font-size: 0.4375rem;
}

#products [data-vani-prod-panel='community'] .vani-prod-cf-search-input {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.45rem;
  border-radius: 0.45rem;
  background: #f1f5f9;
  margin-bottom: 0.35rem;
  font-size: 0.5625rem;
  color: #94a3b8;
}

#products [data-vani-prod-panel='community'] .vani-prod-cf-search-input input {
  border: none;
  background: transparent;
  flex: 1;
  min-width: 0;
  font-size: 0.5625rem;
  color: #0f172a;
}

#products [data-vani-prod-panel='community'] .vani-prod-cf-search-input input:focus {
  outline: none;
}

#products [data-vani-prod-panel='community'] .vani-prod-cf-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin-bottom: 0.4rem;
}

#products [data-vani-prod-panel='community'] .vani-prod-cf-chips button {
  font-size: 0.5rem;
  font-weight: 700;
  padding: 0.2rem 0.45rem;
  border-radius: 999px;
  border: 1px solid #e2e8f0;
  background: #fff;
  color: #64748b;
  cursor: pointer;
}

#products [data-vani-prod-panel='community'] .vani-prod-cf-chips button.is-on {
  background: #0f172a;
  color: #fff;
  border-color: #0f172a;
}

#products [data-vani-prod-panel='community'] .vani-prod-cf-feed-card {
  border: 1px solid #e2e8f0;
  border-radius: 0.45rem;
  padding: 0.4rem 0.45rem;
  margin-bottom: 0.35rem;
  background: #fff;
  font-size: 0.5625rem;
}

#products [data-vani-prod-panel='community'] .vani-prod-cf-feed-card p {
  margin: 0.15rem 0;
  color: #64748b;
}

#products [data-vani-prod-panel='community'] .vani-prod-cf-feed-card span {
  font-size: 0.5rem;
  color: #94a3b8;
}

#products [data-vani-prod-panel='community'] .vani-prod-cf-ai-bubble {
  background: #f1f5f9;
  border-radius: 0.45rem;
  padding: 0.4rem;
  margin-bottom: 0.35rem;
  font-size: 0.5625rem;
}

#products [data-vani-prod-panel='community'] .vani-prod-cf-ai-bubble.is-user {
  background: #fff7ed;
  border: 1px solid rgba(232, 88, 39, 0.2);
}

#products [data-vani-prod-panel='community'] .vani-prod-cf-reel {
  border-radius: 0.55rem;
  background: linear-gradient(160deg, #0f172a, #334155);
  color: #fff;
  min-height: 5.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 0.5625rem;
  gap: 0.25rem;
}

#products [data-vani-prod-panel='community'] .vani-prod-cf-reel-play {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: rgba(232, 88, 39, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
}

#products [data-vani-prod-panel='community'] .vani-prod-cf-card-btn {
  width: 100%;
  text-align: left;
  border: 1px solid #e2e8f0;
  border-radius: 0.45rem;
  padding: 0.45rem;
  background: #fff;
  margin-bottom: 0.35rem;
  cursor: pointer;
  font-size: 0.5625rem;
}

#products [data-vani-prod-panel='community'] .vani-prod-cf-card-btn strong {
  display: block;
  color: #0f172a;
}

#products [data-vani-prod-panel='community'] .vani-prod-cf-card-btn small {
  color: #64748b;
}

#products [data-vani-prod-panel='community'] .vani-prod-cf-back-bar {
  border: none;
  background: none;
  font-size: 0.5625rem;
  font-weight: 700;
  color: #e85827;
  padding: 0 0 0.35rem;
  cursor: pointer;
}

#products [data-vani-prod-panel='community'] .vani-prod-cf-profile-head {
  display: flex;
  gap: 0.45rem;
  align-items: center;
  margin-bottom: 0.4rem;
}

#products [data-vani-prod-panel='community'] .vani-prod-cf-profile-tabs {
  display: flex;
  gap: 0.2rem;
  margin-bottom: 0.35rem;
  flex-wrap: wrap;
}

#products [data-vani-prod-panel='community'] .vani-prod-cf-profile-tabs button {
  font-size: 0.5rem;
  font-weight: 700;
  padding: 0.25rem 0.4rem;
  border-radius: 0.35rem;
  border: 1px solid #e2e8f0;
  background: #fff;
  cursor: pointer;
}

#products [data-vani-prod-panel='community'] .vani-prod-cf-profile-tabs button.is-on {
  background: #0f172a;
  color: #fff;
}

#products [data-vani-prod-panel='community'] .vani-prod-cf-nav-main {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0;
  padding: 0.25rem 0.15rem 0.35rem;
}

#products [data-vani-prod-panel='community'] .vani-prod-cf-nav-main button {
  border: none;
  background: transparent;
  font-size: 0.4375rem;
  font-weight: 700;
  color: #64748b;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.05rem;
  cursor: pointer;
  padding: 0.15rem;
}

#products [data-vani-prod-panel='community'] .vani-prod-cf-nav-main button i {
  font-size: 0.65rem;
}

#products [data-vani-prod-panel='community'] .vani-prod-cf-nav-main button.is-on {
  color: #e85827;
}

#products [data-vani-prod-panel='community'] .vani-prod-cf-nav-main button small {
  font-size: 0.375rem;
  font-weight: 600;
  color: #94a3b8;
}

#products [data-vani-prod-panel='community'] .vani-prod-cf-journey-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: center;
  margin-top: 0.75rem;
  padding-top: 0.65rem;
  border-top: 1px solid #e2e8f0;
}

#products [data-vani-prod-panel='community'] .vani-prod-cf-journey-ctrl {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 0.45rem 0.75rem;
  border-radius: 0.55rem;
  border: 1px solid #e2e8f0;
  background: #fff;
  color: #334155;
  cursor: pointer;
}

#products [data-vani-prod-panel='community'] .vani-prod-cf-journey-ctrl-primary {
  background: #0f172a;
  color: #fff;
  border-color: #0f172a;
}

#products [data-vani-prod-panel='community'] .vani-prod-cf-autoplay-status {
  flex: 1 1 100%;
  font-size: 0.6875rem;
  color: #64748b;
  margin: 0;
}

#products [data-vani-prod-panel='community'] .vani-prod-cf-screen-item.is-active {
  box-shadow: 0 0 0 2px rgba(232, 88, 39, 0.25);
}

#products [data-vani-prod-panel='community'] .vani-prod-cf-view-animate {
  animation: vaniCfViewIn 0.32s ease-out;
}

#products [data-vani-prod-panel='community'] .vani-prod-cf-phone-pulse {
  animation: vaniCfPhonePulse 0.45s ease-out;
}

@keyframes vaniCfViewIn {
  from {
    opacity: 0;
    transform: translateY(5px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes vaniCfPhonePulse {
  0% {
    box-shadow: 0 0 0 0 rgba(232, 88, 39, 0.2);
  }
  100% { 
    box-shadow: 0 0 0 0 rgba(232, 88, 39, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  #products [data-vani-prod-panel='community'] .vani-prod-cf-view-animate,
  #products [data-vani-prod-panel='community'] .vani-prod-cf-phone-pulse {
    animation: none;
  }

  #products [data-vani-prod-panel='community'] .vani-prod-cf-progress-bar span {
    transition: none;
  }
}

/* Phase 6 — Community Forum responsive showcase + focus (panel-scoped only) */
#products [data-vani-prod-panel='community'].vani-prod-community-panel {
  overflow-x: clip;
  max-width: 100%;
}

#products [data-vani-prod-panel='community'] .vani-prod-community-showcase {
  width: 100%;
  overflow-x: clip;
}

#products [data-vani-prod-panel='community'] .vani-prod-community-phone-col,
#products [data-vani-prod-panel='community'] .vani-prod-community-controls-col,
#products [data-vani-prod-panel='community'] .vani-prod-community-canvas,
#products [data-vani-prod-panel='community'] .vani-prod-phone-stage,
#products [data-vani-prod-panel='community'] .vani-prod-phone-3d,
#products [data-vani-prod-panel='community'] .vani-prod-phone-frame,
#products [data-vani-prod-panel='community'] .vani-prod-device-inner,
#products [data-vani-prod-panel='community'] .vani-prod-cf-screens-wrap {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

#products [data-vani-prod-panel='community'] .vani-prod-phone-stage {
  width: 100%;
  max-width: min(100%, 24rem);
  margin-inline: auto;
}

#products [data-vani-prod-panel='community'] .vani-prod-cf-screens-list {
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
}

#products [data-vani-prod-panel='community'] .vani-prod-cf-screens-now,
#products [data-vani-prod-panel='community'] .vani-prod-cf-screen-item strong,
#products [data-vani-prod-panel='community'] .vani-prod-cf-autoplay-status {
  color: #0f172a;
}

#products [data-vani-prod-panel='community'] .vani-prod-cf-screen-item span.vani-prod-cf-screen-desc {
  color: #475569;
}

#products [data-vani-prod-panel='community'] :is(
    button,
    a.btn-primary,
    .vani-prod-cf-journey-tab,
    .vani-prod-cf-screen-item,
    .vani-prod-cf-screens-nav-btn,
    .vani-prod-cf-journey-ctrl,
    .vani-prod-cf-nav-main button,
    .vani-prod-cf-quick,
    .vani-prod-cf-card-btn,
    .vani-prod-cf-btn,
    .vani-prod-cf-link-back,
    .vani-prod-cf-chips button,
    .vani-prod-cf-profile-tabs button
  ):focus-visible {
  outline: 2px solid #e85827;
  outline-offset: 2px;
}

#products [data-vani-prod-panel='community'] .vani-prod-cf-field input:focus-visible {
  outline: 2px solid #e85827;
  outline-offset: 1px;
}

@media (min-width: 1024px) {
  #products [data-vani-prod-panel='community'] .vani-prod-community-showcase {
    align-items: start;
  }

  #products [data-vani-prod-panel='community'] .vani-prod-community-phone-col {
    grid-column: span 7 / span 7;
    order: 1;
  }

  #products [data-vani-prod-panel='community'] .vani-prod-community-controls-col {
    grid-column: span 5 / span 5;
    order: 2;
  }

  #products [data-vani-prod-panel='community'] .vani-prod-phone-stage {
    max-width: min(100%, 26rem);
  }

  #products [data-vani-prod-panel='community'] .vani-prod-cf-screens-list {
    max-height: min(22rem, 52vh);
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  #products [data-vani-prod-panel='community'] .vani-prod-community-showcase {
    gap: clamp(1rem, 2.5vw, 1.75rem);
  }

  #products [data-vani-prod-panel='community'] .vani-prod-community-canvas {
    padding: clamp(1rem, 2.5vw, 1.5rem);
  }

  #products [data-vani-prod-panel='community'] .vani-prod-phone-stage {
    max-width: min(100%, 21rem);
  }

  #products [data-vani-prod-panel='community'] .vani-prod-cf-screens-list {
    max-height: min(20rem, 45vh);
  }
}

@media (max-width: 767px) {
  #products [data-vani-prod-panel='community'] .vani-prod-community-showcase {
    gap: 1.25rem;
  }

  #products [data-vani-prod-panel='community'] .vani-prod-community-canvas {
    padding: clamp(0.65rem, 3vw, 1rem);
    border-radius: 1rem;
  }

  #products [data-vani-prod-panel='community'] .vani-prod-phone-stage {
    max-width: min(100%, calc(100vw - 2.75rem));
  }

  #products [data-vani-prod-panel='community'] .vani-prod-phone-frame {
    max-width: 100%;
  }

  #products [data-vani-prod-panel='community'] .vani-prod-cf-app-body {
    max-height: clamp(14rem, 42vh, 18.5rem);
  }

  #products [data-vani-prod-panel='community'] .vani-prod-cf-journey-tabs {
    gap: 0.5rem;
    padding: 0.35rem;
  }

  #products [data-vani-prod-panel='community'] .vani-prod-cf-journey-tab {
    min-height: 2.75rem;
    font-size: 0.875rem;
    padding: 0.65rem 0.5rem;
  }

  #products [data-vani-prod-panel='community'] .vani-prod-cf-screens-list {
    max-height: min(36vh, 15.5rem);
  }

  #products [data-vani-prod-panel='community'] .vani-prod-cf-screen-item {
    min-height: 2.75rem;
    padding: 0.65rem 0.75rem;
  }

  #products [data-vani-prod-panel='community'] .vani-prod-cf-screens-nav-btn {
    min-width: 2.75rem;
    min-height: 2.75rem;
  }

  #products [data-vani-prod-panel='community'] .vani-prod-cf-journey-ctrl {
    min-height: 2.75rem;
    padding: 0.55rem 0.85rem;
    flex: 1 1 calc(50% - 0.25rem);
  }

  #products [data-vani-prod-panel='community'] .vani-prod-cf-journey-ctrl-primary {
    flex: 1 1 100%;
  }

  #products [data-vani-prod-panel='community'] .vani-prod-cf-nav-main {
    padding-bottom: 0.15rem;
  }

  #products [data-vani-prod-panel='community'] .vani-prod-cf-nav-main button {
    min-height: 2.65rem;
    padding: 0.2rem 0.05rem;
    gap: 0.05rem;
  }

  #products [data-vani-prod-panel='community'] .vani-prod-cf-nav-main button i {
    font-size: 0.7rem;
  }

  #products [data-vani-prod-panel='community'] .vani-prod-community-controls-col h3 {
    font-size: 1.5rem;
  }
}

@media (max-width: 359px) {
  #products [data-vani-prod-panel='community'] .vani-prod-cf-nav-main button small {
    display: none;
  }

  #products [data-vani-prod-panel='community'] .vani-prod-cf-quick-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

#products [data-vani-prod-panel='community'] .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 767px) {
  #products [data-vani-prod-panel='community'] [data-vani-cf-swipe] {
    touch-action: pan-y;
  }

  #products [data-vani-prod-panel='community'] :is(
      .vani-prod-cf-journey-tab,
      .vani-prod-cf-journey-ctrl,
      .vani-prod-cf-screens-nav-btn,
      .vani-prod-cf-screen-item,
      .vani-prod-cf-nav-main button
    ) {
    touch-action: manipulation;
  }

  #products [data-vani-prod-panel='community'] .vani-prod-phone-frame {
    max-height: min(72vh, 620px);
  }
}

/* TravelJioo — Phase 2 showcase redesign (#vani-prod-panel-traveljioo only) */
#products [data-vani-prod-panel='traveljioo'].vani-prod-travel-panel {
  overflow-x: clip;
  max-width: 100%;
}

#products [data-vani-prod-panel='traveljioo'] .vani-prod-travel-showcase {
  width: 100%;
  min-width: 0;
}

#products [data-vani-prod-panel='traveljioo'] .vani-prod-travel-stats-inner {
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 48%, #f1f5f9 100%);
  border: 1px solid #e2e8f0;
  border-radius: 1.25rem;
  padding: clamp(1.15rem, 2.5vw, 1.75rem);
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

#products [data-vani-prod-panel='traveljioo'] .vani-prod-travel-eyebrow {
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #6366f1;
  margin: 0 0 0.35rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

#products [data-vani-prod-panel='traveljioo'] .vani-prod-travel-stats-title {
  font-size: clamp(1.15rem, 2.2vw, 1.45rem);
  font-weight: 800;
  color: #0f172a;
  margin: 0 0 0.35rem;
  line-height: 1.25;
}

#products [data-vani-prod-panel='traveljioo'] .vani-prod-travel-stats-note {
  font-size: 0.75rem;
  color: #64748b;
  margin: 0 0 1rem;
  line-height: 1.45;
  max-width: 42rem;
}

#products [data-vani-prod-panel='traveljioo'] .vani-prod-travel-stats-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.65rem;
}

@media (min-width: 640px) {
  #products [data-vani-prod-panel='traveljioo'] .vani-prod-travel-stats-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.75rem;
  }
}

#products [data-vani-prod-panel='traveljioo'] .vani-prod-travel-stat-card {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 0.85rem;
  padding: 0.85rem 0.9rem;
  box-shadow: 0 4px 14px rgba(37, 99, 235, 0.06);
  min-width: 0;
}

#products [data-vani-prod-panel='traveljioo'] .vani-prod-travel-stat-label {
  display: block;
  font-size: 0.625rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #64748b;
  margin-bottom: 0.25rem;
}

#products [data-vani-prod-panel='traveljioo'] .vani-prod-travel-stat-value {
  display: block;
  font-size: clamp(1.05rem, 2vw, 1.35rem);
  font-weight: 800;
  color: #1e3a8a;
  line-height: 1.2;
  margin-bottom: 0.35rem;
}

#products [data-vani-prod-panel='traveljioo'] .vani-prod-travel-stat-value small {
  font-size: 0.65em;
  font-weight: 700;
  color: #6366f1;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

#products [data-vani-prod-panel='traveljioo'] .vani-prod-travel-stat-value.vani-prod-travel-stat-muted {
  font-size: clamp(0.95rem, 1.8vw, 1.15rem);
  color: #475569;
}

#products [data-vani-prod-panel='traveljioo'] .vani-prod-travel-stat-desc {
  display: block;
  font-size: 0.6875rem;
  line-height: 1.4;
  color: #64748b;
}

#products [data-vani-prod-panel='traveljioo'] .vani-prod-travel-demo-canvas {
  border-radius: 1.25rem;
  border: 1px solid rgba(99, 102, 241, 0.2);
  background: linear-gradient(145deg, #eff6ff 0%, #eef2ff 42%, #f8fafc 100%);
}

#products [data-vani-prod-panel='traveljioo'] .vani-prod-travel-demo-glow {
  background: radial-gradient(ellipse at 25% 20%, rgba(59, 130, 246, 0.18), transparent 55%),
    radial-gradient(ellipse at 75% 80%, rgba(139, 92, 246, 0.12), transparent 50%);
}

#products [data-vani-prod-panel='traveljioo'] .vani-prod-travel-ecosystem-inner {
  background: linear-gradient(155deg, #0f172a 0%, #1e293b 38%, #172554 100%);
  border-radius: 1.35rem;
  padding: clamp(1.25rem, 3vw, 2rem);
  border: 1px solid rgba(99, 102, 241, 0.35);
  box-shadow: 0 28px 56px rgba(15, 23, 42, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  position: relative;
  overflow: hidden;
}

#products [data-vani-prod-panel='traveljioo'] .vani-prod-travel-ecosystem-inner::before {
  content: '';
  position: absolute;
  inset: -30% 20% auto -20%;
  height: 60%;
  background: radial-gradient(ellipse, rgba(59, 130, 246, 0.22), transparent 65%);
  pointer-events: none;
}

#products [data-vani-prod-panel='traveljioo'] .vani-prod-travel-ecosystem-head {
  position: relative;
  z-index: 1;
  margin-bottom: 1.15rem;
}

#products [data-vani-prod-panel='traveljioo'] .vani-prod-travel-ecosystem-eyebrow {
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #a5b4fc;
  margin: 0 0 0.35rem;
}

#products [data-vani-prod-panel='traveljioo'] .vani-prod-travel-ecosystem-title {
  font-size: clamp(1.2rem, 2.4vw, 1.65rem);
  font-weight: 800;
  color: #f8fafc;
  margin: 0 0 0.4rem;
  line-height: 1.2;
}

#products [data-vani-prod-panel='traveljioo'] .vani-prod-travel-ecosystem-lead {
  font-size: 0.8125rem;
  color: #cbd5e1;
  margin: 0;
  max-width: 40rem;
  line-height: 1.5;
}

#products [data-vani-prod-panel='traveljioo'] .vani-prod-travel-eco-inline-link {
  color: #a5b4fc;
  text-decoration: underline;
  text-underline-offset: 2px;
}

#products [data-vani-prod-panel='traveljioo'] .vani-prod-travel-eco-inline-link:focus-visible {
  outline: 2px solid #818cf8;
  outline-offset: 2px;
  border-radius: 2px;
}

#products [data-vani-prod-panel='traveljioo'] .vani-prod-travel-eco-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.85rem;
}

@media (min-width: 640px) {
  #products [data-vani-prod-panel='traveljioo'] .vani-prod-travel-eco-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
  }
}

@media (min-width: 1280px) {
  #products [data-vani-prod-panel='traveljioo'] .vani-prod-travel-eco-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.1rem;
  }
}

#products [data-vani-prod-panel='traveljioo'] .vani-prod-travel-eco-card {
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(148, 163, 184, 0.28);
  border-radius: 1rem;
  padding: clamp(1rem, 2vw, 1.25rem);
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18);
  transition: border-color 0.22s ease, transform 0.22s ease, box-shadow 0.22s ease, background 0.22s ease;
}

@media (hover: hover) and (pointer: fine) {
  #products [data-vani-prod-panel='traveljioo'] .vani-prod-travel-eco-card:hover {
    border-color: rgba(129, 140, 248, 0.65);
    background: rgba(255, 255, 255, 0.1);
    transform: translateY(-3px);
    box-shadow: 0 16px 36px rgba(37, 99, 235, 0.22);
  }

  #products [data-vani-prod-panel='traveljioo'] .vani-prod-travel-eco-card:hover .vani-prod-travel-eco-more i {
    transform: translateX(3px);
  }
}

#products [data-vani-prod-panel='traveljioo'] .vani-prod-travel-eco-card-top {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}

#products [data-vani-prod-panel='traveljioo'] .vani-prod-travel-eco-icon {
  flex-shrink: 0;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.65rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.45), rgba(139, 92, 246, 0.4));
  color: #eef2ff;
  font-size: 1rem;
  box-shadow: 0 6px 16px rgba(59, 130, 246, 0.25);
}

#products [data-vani-prod-panel='traveljioo'] .vani-prod-travel-eco-title {
  margin: 0;
  font-size: clamp(0.95rem, 1.8vw, 1.1rem);
  font-weight: 800;
  color: #f8fafc;
  line-height: 1.25;
  padding-top: 0.15rem;
}

#products [data-vani-prod-panel='traveljioo'] .vani-prod-travel-eco-desc {
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: #cbd5e1;
}

#products [data-vani-prod-panel='traveljioo'] .vani-prod-travel-eco-points {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

#products [data-vani-prod-panel='traveljioo'] .vani-prod-travel-eco-points li {
  position: relative;
  padding-left: 1rem;
  font-size: 0.6875rem;
  line-height: 1.45;
  color: #94a3b8;
}

#products [data-vani-prod-panel='traveljioo'] .vani-prod-travel-eco-points li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.45em;
  width: 0.35rem;
  height: 0.35rem;
  border-radius: 50%;
  background: linear-gradient(135deg, #60a5fa, #a78bfa);
}

#products [data-vani-prod-panel='traveljioo'] .vani-prod-travel-eco-more {
  margin-top: auto;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 0.65rem;
  border: none;
  border-radius: 999px;
  background: rgba(99, 102, 241, 0.18);
  color: #c7d2fe;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}

#products [data-vani-prod-panel='traveljioo'] .vani-prod-travel-eco-more i {
  font-size: 0.6rem;
  transition: transform 0.2s ease;
}

#products [data-vani-prod-panel='traveljioo'] .vani-prod-travel-eco-more:hover {
  background: rgba(129, 140, 248, 0.32);
  color: #eef2ff;
}

#products [data-vani-prod-panel='traveljioo'] .vani-prod-travel-eco-more:focus-visible {
  outline: 2px solid #818cf8;
  outline-offset: 2px;
}

#products [data-vani-prod-panel='traveljioo'] .vani-prod-travel-eco-card-accent {
  border-color: rgba(167, 139, 250, 0.5);
  background: linear-gradient(145deg, rgba(99, 102, 241, 0.22), rgba(30, 58, 138, 0.35));
}

#products [data-vani-prod-panel='traveljioo'] .vani-prod-travel-eco-card-accent .vani-prod-travel-eco-icon {
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  color: #fff;
}

@media (max-width: 1023px) {
  #products.vani-prod-stacked [data-vani-prod-panel='traveljioo'] .vani-prod-travel-stats {
    order: 1;
    width: 100%;
  }

  #products.vani-prod-stacked [data-vani-prod-panel='traveljioo'] .vani-prod-travel-copy {
    order: 2;
    width: 100%;
  }

  #products.vani-prod-stacked [data-vani-prod-panel='traveljioo'] .vani-prod-travel-hero {
    order: 3;
    width: 100%;
    max-width: 100%;
  }

  #products.vani-prod-stacked [data-vani-prod-panel='traveljioo'] .vani-prod-travel-ecosystem {
    order: 4;
  width: 100%;
  }
}

@media (max-width: 767px) {
  #products [data-vani-prod-panel='traveljioo'] .vani-prod-travel-stats-grid {
    grid-template-columns: 1fr;
  }

  #products [data-vani-prod-panel='traveljioo'] .vani-prod-phone-stage {
    max-width: min(100%, calc(100vw - 2.5rem));
    margin-inline: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  #products [data-vani-prod-panel='traveljioo'] .vani-prod-travel-eco-card,
  #products [data-vani-prod-panel='traveljioo'] .vani-prod-travel-eco-more i {
    transition: none;
  }
}

/* TravelJioo — Phase 4 automatic phone demo (panel-scoped) */
#products [data-vani-prod-panel='traveljioo'] .vani-prod-travel-auto-status {
  border: 1px solid #e2e8f0;
  border-radius: 1rem;
  padding: 1rem 1.1rem;
  background: linear-gradient(180deg, #fff, #f8fafc);
  box-shadow: 0 8px 24px rgba(37, 99, 235, 0.06);
}

#products [data-vani-prod-panel='traveljioo'] .vani-prod-travel-auto-kicker {
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #2563eb;
  margin: 0 0 0.35rem;
}

#products [data-vani-prod-panel='traveljioo'] .vani-prod-travel-auto-now {
  font-size: 0.875rem;
  font-weight: 700;
  color: #0f172a;
  margin: 0 0 0.35rem;
  line-height: 1.45;
  min-height: 2.5rem;
}

#products [data-vani-prod-panel='traveljioo'] .vani-prod-travel-auto-note {
  font-size: 0.75rem;
  color: #64748b;
  margin: 0;
  line-height: 1.45;
}

#products [data-vani-prod-panel='traveljioo'] .vani-prod-tj-body {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
}

#products [data-vani-prod-panel='traveljioo'] .vani-prod-tj-stepbar {
  font-size: 0.5625rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #64748b;
  margin: 0 0 0.35rem;
  padding: 0 0.45rem;
}

#products [data-vani-prod-panel='traveljioo'] .vani-prod-tj-progress {
  height: 3px;
  border-radius: 999px;
  background: #e2e8f0;
  margin: 0 0.45rem 0.45rem;
  overflow: hidden;
}

#products [data-vani-prod-panel='traveljioo'] .vani-prod-tj-progress {
  --vani-tj-progress: 11%;
}

#products [data-vani-prod-panel='traveljioo'] .vani-prod-tj-progress::after {
  content: '';
  display: block;
  height: 100%;
  width: var(--vani-tj-progress);
  background: linear-gradient(90deg, #3b82f6, #8b5cf6);
  border-radius: inherit;
  transition: width 0.45s ease;
}

#products [data-vani-prod-panel='traveljioo'] .vani-prod-tj-view {
  padding: 0 0.45rem 0.35rem;
  flex: 1;
  min-height: 0;
}

#products [data-vani-prod-panel='traveljioo'] .vani-prod-tj-badge,
#products [data-vani-prod-panel='traveljioo'] .vani-prod-tj-title {
  font-size: 0.8125rem;
  font-weight: 800;
  color: #0f172a;
  margin: 0 0 0.5rem;
}

#products [data-vani-prod-panel='traveljioo'] .vani-prod-tj-badge {
  font-size: 0.6875rem;
  color: #2563eb;
}

#products [data-vani-prod-panel='traveljioo'] .vani-prod-tj-tiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.35rem;
  margin: 0.5rem 0;
}

#products [data-vani-prod-panel='traveljioo'] .vani-prod-tj-tiles span {
  font-size: 0.5625rem;
  font-weight: 700;
  padding: 0.35rem 0.4rem;
  border-radius: 0.45rem;
  background: #eff6ff;
  color: #1e40af;
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

#products [data-vani-prod-panel='traveljioo'] .vani-prod-tj-row {
  display: flex;
  justify-content: space-between;
  gap: 0.35rem;
  font-size: 0.625rem;
  padding: 0.4rem 0.5rem;
  border-radius: 0.45rem;
  background: #fff;
  border: 1px solid #e2e8f0;
  margin-bottom: 0.35rem;
}

#products [data-vani-prod-panel='traveljioo'] .vani-prod-tj-row strong {
  color: #0f172a;
  font-weight: 800;
}

#products [data-vani-prod-panel='traveljioo'] .vani-prod-tj-muted {
  font-size: 0.5625rem;
  color: #64748b;
  margin: 0.35rem 0 0.5rem;
  line-height: 1.4;
}

#products [data-vani-prod-panel='traveljioo'] .vani-prod-tj-list {
  margin: 0 0 0.5rem;
  padding-left: 1rem;
  font-size: 0.625rem;
  color: #334155;
  line-height: 1.45;
}

#products [data-vani-prod-panel='traveljioo'] .vani-prod-tj-mail {
  font-size: 0.625rem;
  font-weight: 700;
  padding: 0.45rem 0.5rem;
  border-radius: 0.45rem;
  margin-bottom: 0.35rem;
}

#products [data-vani-prod-panel='traveljioo'] .vani-prod-tj-mail.is-due {
  background: #fef3c7;
  color: #92400e;
}

#products [data-vani-prod-panel='traveljioo'] .vani-prod-tj-mail.is-tj-visible {
    opacity: 1;
  }

#products [data-vani-prod-panel='traveljioo'] .vani-prod-tj-mail.is-done {
  background: #ecfdf5;
  color: #047857;
}

#products [data-vani-prod-panel='traveljioo'] .vani-prod-tj-result {
  font-size: 0.625rem;
  font-weight: 700;
  color: #1d4ed8;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: 0.5rem;
  padding: 0.45rem 0.5rem;
  margin-top: auto;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.35s ease, transform 0.35s ease;
}

#products [data-vani-prod-panel='traveljioo'] .vani-prod-tj-result.is-show {
  opacity: 1;
  transform: translateY(0);
}

#products [data-vani-prod-panel='traveljioo'] .vani-prod-tj-nav-dots {
  display: flex;
  justify-content: center;
  gap: 0.25rem;
  padding: 0.35rem 0.5rem 0.45rem;
  border-top: 1px solid #e2e8f0;
  background: #fff;
}

#products [data-vani-prod-panel='traveljioo'] .vani-prod-tj-dot {
  width: 0.35rem;
  height: 0.35rem;
  border-radius: 50%;
  background: #cbd5e1;
}

#products [data-vani-prod-panel='traveljioo'] .vani-prod-tj-dot.is-on {
  background: linear-gradient(135deg, #3b82f6, #8b5cf6);
  transform: scale(1.15);
}

#products [data-vani-prod-panel='traveljioo'] .vani-prod-travel-eco-card.is-demo-active {
  border-color: rgba(129, 140, 248, 0.85);
  background: rgba(255, 255, 255, 0.14);
  box-shadow: 0 0 0 1px rgba(167, 139, 250, 0.35), 0 16px 36px rgba(59, 130, 246, 0.28);
  transform: translateY(-2px);
}

#products [data-vani-prod-panel='traveljioo'] .vani-prod-travel-eco-card.is-demo-active .vani-prod-travel-eco-title {
  color: #fff;
}

@media (prefers-reduced-motion: reduce) {
  #products [data-vani-prod-panel='traveljioo'] .vani-prod-tj-result,
  #products [data-vani-prod-panel='traveljioo'] .vani-prod-tj-progress::after,
  #products [data-vani-prod-panel='traveljioo'] .vani-prod-travel-eco-card.is-demo-active {
    transition: none;
    transform: none;
  }

  #products [data-vani-prod-panel='traveljioo'] .vani-prod-tj-result {
    opacity: 1;
  }
}

/* TravelJioo — Phase 5 synchronized demo animations (panel-scoped) */
#products [data-vani-prod-panel='traveljioo'] .vani-prod-tj-view.is-tj-enter {
  animation: vani-tj-view-in 0.38s ease-out;
}

@keyframes vani-tj-view-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

#products [data-vani-prod-panel='traveljioo'] [data-vani-tj-anim] {
  opacity: 0;
  transform: translateY(5px);
  transition: opacity 0.35s ease, transform 0.35s ease;
}

#products [data-vani-prod-panel='traveljioo'] [data-vani-tj-anim].is-tj-visible {
  opacity: 1;
  transform: translateY(0);
}

#products [data-vani-prod-panel='traveljioo'] .vani-prod-tj-search {
  font-size: 0.625rem;
  font-weight: 700;
  color: #2563eb;
  padding: 0.35rem 0.45rem;
  border-radius: 0.45rem;
  background: #eff6ff;
  margin-bottom: 0.35rem;
  opacity: 0;
}

#products [data-vani-prod-panel='traveljioo'] .vani-prod-tj-search.is-tj-visible {
  opacity: 1;
}

#products [data-vani-prod-panel='traveljioo'] .vani-prod-tj-hotel-pick.is-tj-highlight {
  border-color: #6366f1;
  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.35);
  background: #eef2ff;
}

#products [data-vani-prod-panel='traveljioo'] .vani-prod-tj-status {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.5625rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0 0 0.45rem;
  padding: 0.2rem 0.45rem;
  border-radius: 999px;
  background: #f1f5f9;
  color: #64748b;
}

#products [data-vani-prod-panel='traveljioo'] .vani-prod-tj-status .is-complete {
  color: #047857;
}

#products [data-vani-prod-panel='traveljioo'] .vani-prod-tj-status.is-tj-status-complete {
  background: #ecfdf5;
}

#products [data-vani-prod-panel='traveljioo'] .vani-prod-tj-group-banner {
  font-size: 0.625rem;
  font-weight: 700;
  color: #1e40af;
  background: #dbeafe;
  border: 1px solid #93c5fd;
  border-radius: 0.45rem;
  padding: 0.45rem 0.5rem;
  margin: 0.35rem 0;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.35s ease, transform 0.35s ease;
}

#products [data-vani-prod-panel='traveljioo'] .vani-prod-tj-group-banner.is-tj-visible {
  opacity: 1;
  transform: translateY(0);
}

#products [data-vani-prod-panel='traveljioo'] .vani-prod-tj-chart {
  display: flex;
  align-items: flex-end;
  gap: 0.35rem;
  height: 3.25rem;
  margin: 0.5rem 0 0.35rem;
  padding: 0.35rem 0.25rem 0;
  border-radius: 0.45rem;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
}

#products [data-vani-prod-panel='traveljioo'] [data-vani-tj-bar] {
  flex: 1;
  height: 0;
  max-height: 100%;
  border-radius: 0.25rem 0.25rem 0 0;
  background: linear-gradient(180deg, #818cf8, #3b82f6);
  transition: height 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

#products [data-vani-prod-panel='traveljioo'] [data-vani-tj-bar].is-tj-visible {
  height: var(--tj-bar, 50%);
}

#products [data-vani-prod-panel='traveljioo'] .vani-prod-tj-itinerary li {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

#products [data-vani-prod-panel='traveljioo'] .vani-prod-travel-eco-card.is-demo-pulse {
  animation: vani-tj-eco-pulse 1.6s ease-in-out infinite;
}

@keyframes vani-tj-eco-pulse {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(129, 140, 248, 0.35);
  }
  50% {
    box-shadow: 0 0 0 6px rgba(129, 140, 248, 0.08);
  }
}

@media (prefers-reduced-motion: reduce) {
  #products [data-vani-prod-panel='traveljioo'] .vani-prod-tj-view.is-tj-enter {
    animation: none;
  }

  #products [data-vani-prod-panel='traveljioo'] [data-vani-tj-anim],
  #products [data-vani-prod-panel='traveljioo'] [data-vani-tj-bar],
  #products [data-vani-prod-panel='traveljioo'] .vani-prod-tj-group-banner,
  #products [data-vani-prod-panel='traveljioo'] .vani-prod-tj-search {
    opacity: 1;
    transform: none;
    transition: none;
  }

  #products [data-vani-prod-panel='traveljioo'] [data-vani-tj-bar].is-tj-visible {
    height: var(--tj-bar, 50%);
  }

  #products [data-vani-prod-panel='traveljioo'] .vani-prod-travel-eco-card.is-demo-pulse {
    animation: none;
  }
}

/* TravelJioo — Phase 6 responsive showcase (panel-scoped only) */
#products [data-vani-prod-panel='traveljioo'] :is(
    .vani-prod-panel-grid,
    .vani-prod-travel-showcase,
    .vani-prod-travel-stats,
    .vani-prod-copy,
    .vani-prod-travel-copy,
    .vani-prod-hero,
    .vani-prod-travel-hero,
    .vani-prod-hero-canvas,
    .vani-prod-travel-demo-canvas,
    .vani-prod-travel-ecosystem,
    .vani-prod-travel-ecosystem-inner,
    .vani-prod-phone-stage,
    .vani-prod-phone-3d,
    .vani-prod-phone-frame,
    .vani-prod-device-inner,
    .vani-prod-tj-screen,
    .vani-prod-device-screen,
    .vani-prod-tj-body
  ) {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

#products [data-vani-prod-panel='traveljioo'] .vani-prod-travel-eco-card.is-demo-active {
  outline: 2px solid #c7d2fe;
  outline-offset: 2px;
}

#products [data-vani-prod-panel='traveljioo'] .vani-prod-travel-eco-card.is-demo-active::before {
  content: 'Phone demo';
  position: absolute;
  top: 0.65rem;
  right: 0.65rem;
  font-size: 0.5625rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #e0e7ff;
  background: rgba(99, 102, 241, 0.45);
  border: 1px solid rgba(199, 210, 254, 0.55);
  border-radius: 999px;
  padding: 0.15rem 0.45rem;
  pointer-events: none;
}

#products [data-vani-prod-panel='traveljioo'] .vani-prod-travel-eco-card {
  position: relative;
}

#products [data-vani-prod-panel='traveljioo'] .vani-prod-travel-eco-card-accent.is-demo-active::before {
  color: #eef2ff;
  background: rgba(129, 140, 248, 0.55);
}

@media (min-width: 1024px) {
  #products [data-vani-prod-panel='traveljioo'] .vani-prod-travel-stats {
    display: block;
  }

  #products [data-vani-prod-panel='traveljioo'] .vani-prod-travel-demo-canvas {
    padding: clamp(1.35rem, 2.8vw, 2.15rem);
  }

  #products [data-vani-prod-panel='traveljioo'] .vani-prod-travel-hero .vani-prod-phone-stage {
    width: 100%;
    max-width: min(100%, 28rem);
  }

  #products [data-vani-prod-panel='traveljioo'] .vani-prod-travel-eco-grid {
    gap: 1.15rem;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  #products [data-vani-prod-panel='traveljioo'] .vani-prod-travel-showcase {
    gap: clamp(1.25rem, 3vw, 2rem);
  }

  #products [data-vani-prod-panel='traveljioo'] .vani-prod-travel-stats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #products [data-vani-prod-panel='traveljioo'] .vani-prod-travel-eco-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.9rem;
  }

  #products [data-vani-prod-panel='traveljioo'] .vani-prod-travel-eco-desc {
    font-size: clamp(0.75rem, 1.6vw, 0.8125rem);
    line-height: 1.55;
  }

  #products [data-vani-prod-panel='traveljioo'] .vani-prod-travel-demo-canvas {
    padding: clamp(1rem, 2.5vw, 1.5rem);
  }

  #products [data-vani-prod-panel='traveljioo'] .vani-prod-travel-hero .vani-prod-phone-stage {
    max-width: min(100%, 21rem);
  }

  #products [data-vani-prod-panel='traveljioo'] .vani-prod-phone-3d {
    transform: rotateY(-2deg) rotateX(1deg);
  }

  #products [data-vani-prod-panel='traveljioo'] .vani-prod-phone-frame {
    max-height: min(68vh, 580px);
  }

  #products [data-vani-prod-panel='traveljioo'] .vani-prod-tj-body {
    max-height: min(16.5rem, 48vh);
  }
}

@media (max-width: 767px) {
  #products [data-vani-prod-panel='traveljioo'] .vani-prod-travel-showcase {
    gap: 1.35rem;
  }

  #products [data-vani-prod-panel='traveljioo'] .vani-prod-travel-eco-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.65rem;
  }

  #products [data-vani-prod-panel='traveljioo'] .vani-prod-travel-eco-card {
    padding: 0.75rem 0.7rem;
    gap: 0.45rem;
  }

  #products [data-vani-prod-panel='traveljioo'] .vani-prod-travel-eco-card-top {
    flex-direction: column;
    gap: 0.45rem;
  }

  #products [data-vani-prod-panel='traveljioo'] .vani-prod-travel-eco-icon {
    width: 2.15rem;
    height: 2.15rem;
    font-size: 0.85rem;
  }

  #products [data-vani-prod-panel='traveljioo'] .vani-prod-travel-eco-title {
    font-size: clamp(0.8125rem, 3.2vw, 0.9375rem);
  }

  #products [data-vani-prod-panel='traveljioo'] .vani-prod-travel-eco-desc,
  #products [data-vani-prod-panel='traveljioo'] .vani-prod-travel-eco-points li {
    font-size: clamp(0.6875rem, 2.8vw, 0.75rem);
    line-height: 1.45;
  }

  #products [data-vani-prod-panel='traveljioo'] .vani-prod-travel-eco-points {
    display: none;
  }

  #products [data-vani-prod-panel='traveljioo'] .vani-prod-travel-eco-more {
    font-size: 0.625rem;
    padding: 0.35rem 0.55rem;
  }

  #products [data-vani-prod-panel='traveljioo'] .vani-prod-travel-eco-card.is-demo-active::before {
    top: 0.45rem;
    right: 0.45rem;
    font-size: 0.5rem;
    padding: 0.1rem 0.35rem;
  }

  #products [data-vani-prod-panel='traveljioo'] .vani-prod-travel-demo-canvas {
    padding: clamp(0.65rem, 3vw, 1rem);
    border-radius: 1rem;
  }

  #products [data-vani-prod-panel='traveljioo'] .vani-prod-phone-3d {
    transform: none;
    will-change: auto;
  }

  #products [data-vani-prod-panel='traveljioo'] .vani-prod-phone-drop,
  #products [data-vani-prod-panel='traveljioo'] .vani-prod-phone-platform {
    will-change: auto;
  }

  #products [data-vani-prod-panel='traveljioo'] .vani-prod-phone-frame {
    max-height: min(72vh, 640px);
    aspect-ratio: 9 / 19;
  }

  #products [data-vani-prod-panel='traveljioo'] .vani-prod-tj-body {
    max-height: clamp(15rem, 44vh, 19rem);
    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;
  }

  #products [data-vani-prod-panel='traveljioo'] .vani-prod-tj-row {
    flex-wrap: wrap;
    font-size: clamp(0.6875rem, 2.9vw, 0.75rem);
    line-height: 1.35;
  }

  #products [data-vani-prod-panel='traveljioo'] .vani-prod-tj-row strong {
    flex: 1 1 100%;
    text-align: right;
    font-size: clamp(0.6875rem, 2.9vw, 0.75rem);
  }

  #products [data-vani-prod-panel='traveljioo'] .vani-prod-tj-muted,
  #products [data-vani-prod-panel='traveljioo'] .vani-prod-tj-result,
  #products [data-vani-prod-panel='traveljioo'] .vani-prod-tj-list,
  #products [data-vani-prod-panel='traveljioo'] .vani-prod-tj-mail,
  #products [data-vani-prod-panel='traveljioo'] .vani-prod-tj-search,
  #products [data-vani-prod-panel='traveljioo'] .vani-prod-tj-group-banner {
    font-size: clamp(0.6875rem, 2.8vw, 0.75rem);
  }

  #products [data-vani-prod-panel='traveljioo'] .vani-prod-tj-tiles span {
    font-size: clamp(0.625rem, 2.6vw, 0.6875rem);
  }

  #products [data-vani-prod-panel='traveljioo'] .vani-prod-crm-pipeline span {
    font-size: clamp(0.5625rem, 2.4vw, 0.625rem);
  }

  #products [data-vani-prod-panel='traveljioo'] .vani-prod-travel-eco-card.is-demo-pulse {
    animation: none;
  }
}

@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
  #products [data-vani-prod-panel='traveljioo'] [data-vani-tj-anim]:not(.is-tj-visible) {
    opacity: 1;
    transform: none;
  }
}

#products [data-vani-prod-panel='traveljioo'] .vani-prod-travel-eco-more:focus-visible,
#products [data-vani-prod-panel='traveljioo'] .vani-prod-travel-auto-now {
  color: #0f172a;
}

#products [data-vani-prod-panel='traveljioo'] .vani-prod-travel-eco-desc,
#products [data-vani-prod-panel='traveljioo'] .vani-prod-travel-eco-points li {
  color: #cbd5e1;
}

#products [data-vani-prod-panel='traveljioo'] .vani-prod-travel-eco-card.is-demo-active .vani-prod-travel-eco-desc {
  color: #e2e8f0;
}

/* Homepage FAQ accordion (Phase 2) */
.vani-faq__item {
  border: 1px solid rgba(96, 105, 125, 0.35);
  border-radius: 1rem;
  background: rgba(37, 46, 64, 0.65);
  backdrop-filter: blur(12px);
  overflow: hidden;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.vani-faq__item[open] {
  border-color: rgba(232, 88, 39, 0.45);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

.vani-faq__question {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  cursor: pointer;
  padding: 1rem 1.15rem;
  font-size: 0.9375rem;
  font-weight: 600;
  color: #f8fafc;
  line-height: 1.45;
}

.vani-faq__question::-webkit-details-marker {
  display: none;
}

.vani-faq__question:focus-visible {
  outline: 2px solid #e85827;
  outline-offset: -2px;
}

.vani-faq__chevron {
  flex-shrink: 0;
  font-size: 0.75rem;
  color: #e85827;
  transition: transform 0.2s ease;
}

.vani-faq__item[open] .vani-faq__chevron {
  transform: rotate(180deg);
}

.vani-faq__answer {
  padding: 0 1.15rem 1.15rem;
  font-size: 0.875rem;
  line-height: 1.65;
  color: #cbd5e1;
}

.vani-faq__answer p + p,
.vani-faq__answer p + ul {
  margin-top: 0.75rem;
}

.vani-faq__bullets {
  color: #cbd5e1;
}

@media (min-width: 640px) {
  .vani-faq__question {
    padding: 1.125rem 1.35rem;
    font-size: 1rem;
  }

  .vani-faq__answer {
    padding: 0 1.35rem 1.25rem;
    font-size: 0.9375rem;
  }
}