/* ============================================
   V2 HOMEPAGE — Custom CSS
   Tailwind handles layout/utilities; this file
   covers animations, mockup system, bento cards
   ============================================ */

/* ---- PULSE GLOW (dropdown trigger) ---- */
@keyframes pulseGlow {
  0%, 100% { box-shadow: 0 0 0 0px rgba(79, 172, 254, 0.4); }
  50% { box-shadow: 0 0 0 10px rgba(79, 172, 254, 0); }
}
.animate-pulse-glow {
  animation: pulseGlow 3s infinite;
}

/* ---- CLOUD ANIMATIONS ---- */
.cloud-blur {
  filter: blur(8px);
  opacity: 0.8;
}

@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-15px); }
}
.animate-float { animation: float 6s ease-in-out infinite; }
.animate-float-delayed { animation: float 6s ease-in-out 3s infinite; }
.animate-float-slow { animation: float 8s ease-in-out 1s infinite; }

/* ---- NAV DROPDOWN ICON OVERRIDE — blue default, original color on hover ---- */
/* Target icon containers: grid items + direct panel links (but not CI sidebar) */
.nav-dropdown-panel .grid a > div:first-child,
.nav-dropdown-panel > a > div:first-child {
  background: rgba(235, 245, 255, 0.7) !important;
  color: #4ba7ee !important;
  border: 1px solid rgba(203, 221, 243, 0.5);
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
/* Restore original colors on hover — dual selectors for grid + direct items */
.nav-dropdown-panel .grid a:hover > .bg-blue-50,
.nav-dropdown-panel > a:hover > .bg-blue-50 { background: rgb(239 246 255) !important; color: rgb(37 99 235) !important; border-color: rgb(191 219 254 / 0.5); }
.nav-dropdown-panel .grid a:hover > .bg-orange-50,
.nav-dropdown-panel > a:hover > .bg-orange-50 { background: rgb(255 247 237) !important; color: rgb(234 88 12) !important; border-color: rgb(253 186 116 / 0.5); }
.nav-dropdown-panel .grid a:hover > .bg-cyan-50,
.nav-dropdown-panel > a:hover > .bg-cyan-50 { background: rgb(236 254 255) !important; color: rgb(8 145 178) !important; border-color: rgb(165 243 252 / 0.5); }
.nav-dropdown-panel .grid a:hover > .bg-red-50,
.nav-dropdown-panel > a:hover > .bg-red-50 { background: rgb(254 242 242) !important; color: rgb(220 38 38) !important; border-color: rgb(254 202 202 / 0.5); }
.nav-dropdown-panel .grid a:hover > .bg-green-50,
.nav-dropdown-panel > a:hover > .bg-green-50 { background: rgb(240 253 244) !important; color: rgb(22 163 74) !important; border-color: rgb(187 247 208 / 0.5); }
.nav-dropdown-panel .grid a:hover > .bg-amber-50,
.nav-dropdown-panel > a:hover > .bg-amber-50 { background: rgb(255 251 235) !important; color: rgb(217 119 6) !important; border-color: rgb(253 230 138 / 0.5); }
.nav-dropdown-panel .grid a:hover > .bg-teal-50,
.nav-dropdown-panel > a:hover > .bg-teal-50 { background: rgb(240 253 250) !important; color: rgb(13 148 136) !important; border-color: rgb(153 246 228 / 0.5); }
.nav-dropdown-panel .grid a:hover > .bg-emerald-50,
.nav-dropdown-panel > a:hover > .bg-emerald-50 { background: rgb(236 253 245) !important; color: rgb(5 150 105) !important; border-color: rgb(167 243 208 / 0.5); }
.nav-dropdown-panel .grid a:hover > .bg-purple-50,
.nav-dropdown-panel > a:hover > .bg-purple-50 { background: rgb(250 245 255) !important; color: rgb(147 51 234) !important; border-color: rgb(233 213 255 / 0.5); }
.nav-dropdown-panel .grid a:hover > .bg-violet-50,
.nav-dropdown-panel > a:hover > .bg-violet-50 { background: rgb(245 243 255) !important; color: rgb(124 58 237) !important; border-color: rgb(221 214 254 / 0.5); }
.nav-dropdown-panel .grid a:hover > .bg-pink-50,
.nav-dropdown-panel > a:hover > .bg-pink-50 { background: rgb(253 242 248) !important; color: rgb(219 39 119) !important; border-color: rgb(251 207 232 / 0.5); }
.nav-dropdown-panel .grid a:hover > .bg-sky-50,
.nav-dropdown-panel > a:hover > .bg-sky-50 { background: rgb(240 249 255) !important; color: rgb(2 132 199) !important; border-color: rgb(186 230 253 / 0.5); }
.nav-dropdown-panel .grid a:hover > .bg-indigo-50,
.nav-dropdown-panel > a:hover > .bg-indigo-50 { background: rgb(238 242 255) !important; color: rgb(79 70 229) !important; border-color: rgb(199 210 254 / 0.5); }
.nav-dropdown-panel .grid a:hover > .bg-slate-100,
.nav-dropdown-panel > a:hover > .bg-slate-100 { background: rgb(241 245 249) !important; color: rgb(71 85 105) !important; border-color: rgb(203 213 225 / 0.5); }

/* ---- NAV DROPDOWN ---- */
[data-nav-dropdown] {
  position: relative;
}
.nav-dropdown-panel {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s;
  pointer-events: none;
  margin-top: 12px;
}
/* Invisible hover bridge above panel */
.nav-dropdown-panel::before {
  content: '';
  position: absolute;
  top: -20px;
  left: -10px;
  right: -10px;
  height: 24px;
}
.nav-dropdown-panel.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* ---- NAV LINK HOVER BACKGROUNDS ---- */
/* Standalone links (Pricing, Login) */
.nav-hover-link {
  padding: 0.375rem 0.625rem;
  margin: -0.375rem -0.625rem;
  border-radius: 0.5rem;
  transition: background 0.2s, color 0.2s;
}
.nav-hover-link:hover {
  background: rgba(0, 0, 0, 0.04);
}
#site-header.is-scrolled .nav-hover-link:hover {
  background: rgba(0, 0, 0, 0.05);
}
/* Dropdown triggers — highlight the button when parent is hovered */
[data-nav-dropdown] > button.nav-hover-link {
  padding: 0.375rem 0.625rem;
  margin: -0.375rem -0.625rem;
  border-radius: 0.5rem;
  transition: background 0.2s, color 0.2s;
}
[data-nav-dropdown]:hover > button.nav-hover-link {
  background: rgba(0, 0, 0, 0.04);
}
#site-header.is-scrolled [data-nav-dropdown]:hover > button.nav-hover-link {
  background: rgba(0, 0, 0, 0.05);
}

/* ---- STICKY NAV ---- */
#site-header {
  will-change: transform;
  transform: translateZ(0); /* promote to own layer */
  border-bottom: 1px solid transparent;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0);
}
#site-header.is-scrolled {
  background: rgba(255, 255, 255, 0.97);
  border-bottom: 1px solid rgba(226, 232, 240, 0.5);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

/* ---- MOBILE MENU ---- */
.mobile-menu {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease, opacity 0.3s ease;
  opacity: 0;
}
.mobile-menu.is-open {
  max-height: 100vh;
  opacity: 1;
  overflow-y: auto;
}

/* ---- CREATION DROPDOWN ---- */
#creation-dropdown {
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px) scale(0.95);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
  pointer-events: none;
}
#creation-dropdown.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.creation-option:hover .creation-option-arrow {
  opacity: 1;
  transform: translateX(0);
}
.creation-option-arrow {
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity 0.2s, transform 0.2s;
}

/* ---- CONTENT PANE SWITCHING ---- */
.content-pane {
  display: none !important;
}
.content-pane.is-active {
  display: grid !important;
  background: #ffffff;
  border: 1px solid rgba(226, 232, 240, 0.6);
  border-radius: 28px;
  padding: 48px 40px;
  margin-bottom: 24px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03), 0 8px 32px rgba(0, 0, 0, 0.04);
  animation: paneEnter 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.content-pane.is-exiting {
  display: grid !important;
  background: #ffffff;
  border: 1px solid rgba(226, 232, 240, 0.6);
  border-radius: 28px;
  padding: 48px 40px;
  margin-bottom: 24px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03), 0 8px 32px rgba(0, 0, 0, 0.04);
  animation: paneExit 0.25s cubic-bezier(0.55, 0, 1, 0.45) both;
  pointer-events: none;
}
@keyframes paneEnter {
  from {
    opacity: 0;
    transform: translateY(16px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
@keyframes paneExit {
  from {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  to {
    opacity: 0;
    transform: translateY(-8px) scale(0.98);
  }
}
@media (max-width: 640px) {
  .content-pane.is-active {
    padding: 28px 22px;
    border-radius: 22px;
  }
}

/* ---- CONTENT PANE TEXT STYLING ---- */
.content-pane h3 {
  line-height: 1.2;
  letter-spacing: -0.02em;
}
.content-pane .space-y-3 {
  display: flex;
  flex-direction: column;
  gap: 6px !important;
}
.content-pane .space-y-3 > div {
  background: #f8fafc;
  border-radius: 10px;
  padding: 10px 14px;
  border: 1px solid rgba(226, 232, 240, 0.5);
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
}
.content-pane .space-y-3 > div span {
  font-size: 0.85rem;
  color: #334155;
}
.content-pane .space-y-3 > div .mt-0\.5 {
  margin-top: 0 !important;
}
.content-pane .hero-mockup {
  width: 100%;
}
.content-pane a[class*="inline-flex"] {
  font-size: 0.9rem;
  padding: 0;
  border-radius: 0;
  background: none;
  border: none;
  transition: all 0.2s;
}
.content-pane a[class*="inline-flex"]:hover {
  background: none;
  opacity: 0.8;
}

/* ---- HERO TAB COLOR THEMES ---- */
:root {
  --tab-forms-accent: #4ba7ee;
  --tab-forms-badge-bg: #dbeafe;
  --tab-forms-badge-text: #1d4ed8;

  --tab-quizzes-accent: #8b5cf6;
  --tab-quizzes-badge-bg: #ede9fe;
  --tab-quizzes-badge-text: #7c3aed;

  --tab-giveaways-accent: #d97706;
  --tab-giveaways-badge-bg: #fef3c7;
  --tab-giveaways-badge-text: #b45309;

  --tab-surveys-accent: #0d9488;
  --tab-surveys-badge-bg: #ccfbf1;
  --tab-surveys-badge-text: #0f766e;

  --tab-instantwin-accent: #dc2626;
  --tab-instantwin-badge-bg: #fee2e2;
  --tab-instantwin-badge-text: #b91c1c;

  --tab-intelligence-accent: #4f46e5;
  --tab-intelligence-badge-bg: #e0e7ff;
  --tab-intelligence-badge-text: #4338ca;
}

/* ============================================
   HERO MOCKUP — Single-Scene System
   ============================================ */
.hero-mockup {
  position: relative;
  width: 100%;
  min-width: 280px;
  aspect-ratio: 4 / 3;
  background: linear-gradient(135deg, #f8fbfe 0%, #eff7fd 100%);
  border-radius: 1rem;
  overflow: hidden;
  box-shadow: 0 25px 50px -12px rgba(79,172,254,0.1);
}

/* ---- Scene container ---- */
.scene {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}

/* ---- Shared Mockup Components ---- */
.mockup-card {
  background: white;
  border-radius: 0.75rem;
  box-shadow: 0 4px 20px rgba(79,172,254,0.08);
  padding: 1.25rem;
  width: 100%;
  max-width: 380px;
}
.mockup-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.875rem;
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #64748b;
}
.mockup-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.25rem 0.5rem;
  border-radius: 0.375rem;
  font-size: 0.625rem;
  font-weight: 700;
}
.mockup-progress-text {
  margin-left: auto;
  font-size: 0.625rem;
  color: #9ca3af;
  font-weight: 500;
}
.mockup-question {
  font-weight: 700;
  font-size: 0.9375rem;
  color: #1f2937;
  margin-bottom: 0.75rem;
}
.mockup-input {
  background: #f3f4f6;
  border: 1.5px solid #e5e7eb;
  border-radius: 0.5rem;
  padding: 0.625rem 0.75rem;
  font-size: 0.8125rem;
  color: #9ca3af;
  min-height: 2.25rem;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.mockup-button {
  background: #4facfe;
  color: white;
  font-weight: 600;
  font-size: 0.8125rem;
  padding: 0.625rem 1rem;
  border-radius: 0.5rem;
  text-align: center;
  cursor: default;
}

/* Scene check icon */
.scene-check {
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  flex-shrink: 0;
}
.scene-check--blue { background: #dbeafe; color: #4facfe; }
.scene-check--amber { background: #fef3c7; color: #d97706; }
.scene-check--teal { background: #ccfbf1; color: #0d9488; }
.scene-check--red { background: #fee2e2; color: #dc2626; }

/* ---- NPS Scale ---- */
.nps-scale {
  display: flex;
  gap: 0.25rem;
  justify-content: center;
  margin-bottom: 0.5rem;
}
.nps-button {
  width: 1.625rem;
  height: 1.625rem;
  border-radius: 0.25rem;
  border: 1px solid #e5e7eb;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.625rem;
  font-weight: 600;
  color: #6b7280;
  cursor: default;
  transition: all 0.3s;
}
.nps-labels {
  display: flex;
  justify-content: space-between;
  font-size: 0.5625rem;
  color: #9ca3af;
}

/* ---- Spin Wheel ---- */
.spin-wheel-container {
  position: relative;
  width: 6rem;
  height: 6rem;
  margin: 0.5rem auto;
}
.spin-wheel-container--large { width: 7rem; height: 7rem; }
.spin-wheel {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: conic-gradient(
    #dc2626 0deg 60deg, #f97316 60deg 120deg, #eab308 120deg 180deg,
    #22c55e 180deg 240deg, #3b82f6 240deg 300deg, #8b5cf6 300deg 360deg
  );
  border: 3px solid #e5e7eb;
}
.spin-wheel-pointer {
  position: absolute;
  top: -6px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 10px solid #dc2626;
  z-index: 2;
}

/* ---- Coupon Code ---- */
.coupon-code {
  display: inline-block;
  padding: 0.5rem 1rem;
  border: 2px dashed #0d9488;
  border-radius: 0.5rem;
  font-weight: 700;
  font-size: 1.125rem;
  letter-spacing: 0.1em;
  color: #0d9488;
  background: #f0fdfa;
}
.coupon-code--win { background: #fef2f2; border-color: #dc2626; color: #dc2626; }

/* ---- Intelligence: Magnetic Field + Chips ---- */
.scene-intel {
  position: absolute;
  inset: 0;
}
.scene-intel__magnetic {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.intel-magnetic__field {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(79,70,229,0.1);
  animation: fieldPulse 3s ease-in-out infinite;
}
.intel-magnetic__field:nth-child(1) { width: 8rem; height: 8rem; }
.intel-magnetic__field:nth-child(2) { width: 12rem; height: 12rem; animation-delay: 1s; }
.intel-magnetic__field:nth-child(3) { width: 16rem; height: 16rem; animation-delay: 2s; }
@keyframes fieldPulse {
  0%, 100% { opacity: 0.3; transform: scale(1); }
  50% { opacity: 0.6; transform: scale(1.05); }
}
.scene-intel__center {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  z-index: 2;
}
.intel-magnetic__hub {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  background: linear-gradient(135deg, #4f46e5, #6366f1);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  box-shadow: 0 0 30px rgba(79,70,229,0.3);
}
.scene-intel__label {
  font-size: 0.75rem;
  font-weight: 600;
  color: #374151;
}
.intel-chip {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.75rem;
  background: white;
  border-radius: 999px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  font-size: 0.6875rem;
  font-weight: 600;
  color: #374151;
  z-index: 3;
}
.intel-chip__icon {
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.5625rem;
}
.intel-chip--forms { top: 15%; left: 5%; }
.intel-chip--forms .intel-chip__icon { background: #dbeafe; color: #2563eb; }
.intel-chip--quizzes { top: 10%; right: 8%; }
.intel-chip--quizzes .intel-chip__icon { background: #ede9fe; color: #7c3aed; }
.intel-chip--giveaways { bottom: 25%; left: 3%; }
.intel-chip--giveaways .intel-chip__icon { background: #fef3c7; color: #b45309; }
.intel-chip--surveys { bottom: 15%; right: 5%; }
.intel-chip--surveys .intel-chip__icon { background: #ccfbf1; color: #0f766e; }
.intel-chip--instantwin { top: 45%; left: 2%; }
.intel-chip--instantwin .intel-chip__icon { background: #fee2e2; color: #b91c1c; }

/* ============================================
   SCENE ANIMATIONS
   ============================================ */

/* ---- Shared Keyframes ---- */
@keyframes sceneIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes sceneScaleIn {
  from { opacity: 0; transform: scale(0.85); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes sceneFadeOut {
  to { opacity: 0; }
}
@keyframes typeText {
  from { max-width: 0; }
  to { max-width: 20ch; }
}

/* ---- FORMS SCENE ---- */
.scene-forms .mockup-card { opacity: 0; }
.scene-field { opacity: 0; margin-bottom: 0.5rem; }
.scene-typed {
  display: inline-block;
  max-width: 0;
  overflow: hidden;
  white-space: nowrap;
  color: #1f2937;
  font-weight: 500;
}
.scene-forms__action { position: relative; margin-top: 0.75rem; min-height: 2.75rem; }
.scene-forms__submit { opacity: 0; width: 100%; }
.scene-forms__done {
  position: absolute;
  inset: 0;
  opacity: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-weight: 600;
  color: #1f2937;
}

.anim-running .scene-forms .mockup-card { animation: sceneIn 0.4s ease-out forwards; }
.anim-running .scene-field[data-idx="1"] { animation: sceneIn 0.3s ease-out 0.3s forwards; }
.anim-running .scene-field[data-idx="1"] .scene-typed { animation: typeText 0.8s steps(15) 0.5s forwards; }
.anim-running .scene-field[data-idx="2"] { animation: sceneIn 0.3s ease-out 1.3s forwards; }
.anim-running .scene-field[data-idx="2"] .scene-typed { animation: typeText 0.8s steps(15) 1.5s forwards; }
.anim-running .scene-field[data-idx="3"] { animation: sceneIn 0.3s ease-out 2.3s forwards; }
.anim-running .scene-field[data-idx="3"] .scene-typed { animation: typeText 0.8s steps(15) 2.5s forwards; }
.anim-running .scene-forms__submit { animation: formBtnCycle 5s ease forwards; }
@keyframes formBtnCycle {
  0%, 69% { opacity: 0; transform: translateY(4px); }
  72% { opacity: 1; transform: translateY(0); }
  85% { opacity: 1; }
  88%, 100% { opacity: 0; }
}
.anim-running .scene-forms__done { animation: sceneScaleIn 0.4s cubic-bezier(0.34,1.56,0.64,1) 4.5s forwards; }

/* ---- QUIZZES SCENE ---- */
.scene-quizzes .mockup-card { opacity: 0; }
.scene-quizzes .mockup-question { opacity: 0; }
.scene-option {
  opacity: 0;
  background: #f9fafb;
  border: 1.5px solid #e5e7eb;
  border-radius: 0.5rem;
  padding: 0.625rem 0.75rem;
  font-size: 0.8125rem;
  color: #374151;
  margin-bottom: 0.375rem;
  cursor: default;
}

.anim-running .scene-quizzes .mockup-card { animation: sceneIn 0.4s ease-out forwards; }
.anim-running .scene-quizzes .mockup-question { animation: sceneIn 0.3s ease-out 0.3s forwards; }
.anim-running .scene-option[data-idx="1"] { animation: sceneIn 0.3s ease-out 0.6s forwards; }
.anim-running .scene-option[data-idx="2"]:not(.scene-option--target) { animation: sceneIn 0.3s ease-out 0.9s forwards; }
.anim-running .scene-option[data-idx="3"] { animation: sceneIn 0.3s ease-out 1.2s forwards; }
.anim-running .scene-option--target { animation: sceneIn 0.3s ease-out 0.9s forwards, quizSelect 0.4s ease-out 2.5s forwards; }
@keyframes quizSelect {
  to { border-color: #8b5cf6; background: #f5f3ff; }
}

/* ---- GIVEAWAYS SCENE ---- */
.scene-giveaways .mockup-card { opacity: 0; }
.scene-giveaway__header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  opacity: 0;
}
.scene-giveaway__counter {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.75rem;
  color: #6b7280;
  margin-top: 0.25rem;
}
.scene-giveaway__count {
  background: #4facfe;
  color: white;
  font-weight: 700;
  font-size: 0.75rem;
  padding: 0.125rem 0.5rem;
  border-radius: 0.25rem;
  display: inline-block;
  transition: transform 0.15s;
}
.scene-giveaway__divider {
  height: 1px;
  background: #f3f4f6;
  margin: 0.75rem 0;
  opacity: 0;
}
.scene-giveaway__bonus-label {
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #9ca3af;
  margin-bottom: 0.375rem;
  opacity: 0;
}
.scene-bonus {
  opacity: 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: #f9fafb;
  border: 1.5px solid #e5e7eb;
  border-radius: 0.5rem;
  padding: 0.625rem 0.75rem;
  font-size: 0.8125rem;
  color: #374151;
  margin-bottom: 0.375rem;
}
.scene-bonus__badge {
  background: #f3f4f6;
  color: #4b5563;
  font-weight: 700;
  font-size: 0.6875rem;
  padding: 0.25rem 0.5rem;
  border-radius: 0.25rem;
  min-width: 2rem;
  text-align: center;
}
.scene-bonus__badge--hl { background: #dbeafe; color: #1d4ed8; }

.anim-running .scene-giveaways .mockup-card { animation: sceneIn 0.4s ease-out forwards; }
.anim-running .scene-giveaway__header { animation: sceneIn 0.3s ease-out 0.3s forwards; }
.anim-running .scene-giveaway__divider { animation: sceneIn 0.2s ease-out 0.8s forwards; }
.anim-running .scene-giveaway__bonus-label { animation: sceneIn 0.2s ease-out 1.0s forwards; }
.anim-running .scene-bonus[data-idx="1"] { animation: sceneIn 0.3s ease-out 1.4s forwards, bonusCheck 0.3s ease-out 2.2s forwards; }
.anim-running .scene-bonus[data-idx="2"] { animation: sceneIn 0.3s ease-out 2.6s forwards, bonusCheck 0.3s ease-out 3.4s forwards; }
.anim-running .scene-bonus[data-idx="3"] { animation: sceneIn 0.3s ease-out 3.8s forwards, bonusCheck 0.3s ease-out 4.6s forwards; }
@keyframes bonusCheck {
  to { border-color: #93c5fd; background: #eff6ff; }
}

/* ---- SURVEYS SCENE ---- */
.scene-surveys .mockup-card { opacity: 0; }
.scene-survey__content { }
.scene-survey__q { opacity: 0; }
.scene-survey__nps { opacity: 0; }
.scene-survey__labels { opacity: 0; margin-bottom: 0.5rem; }
.scene-survey__thanks {
  opacity: 0;
  text-align: center;
  padding: 0.75rem 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.anim-running .scene-surveys .mockup-card { animation: sceneIn 0.4s ease-out forwards; }
.anim-running .scene-survey__q { animation: sceneIn 0.3s ease-out 0.3s forwards; }
.anim-running .scene-survey__nps { animation: sceneIn 0.3s ease-out 0.6s forwards; }
.anim-running .scene-survey__labels { animation: sceneIn 0.2s ease-out 0.8s forwards; }
.anim-running .nps-button--target { animation: npsSelect 0.3s ease-out 2.0s forwards; }
@keyframes npsSelect {
  to { background: #0d9488; border-color: #0d9488; color: white; }
}
.anim-running .scene-survey__content { animation: sceneFadeOut 0.4s ease 3.5s forwards; }
.anim-running .scene-survey__thanks { animation: sceneScaleIn 0.4s cubic-bezier(0.34,1.56,0.64,1) 3.8s forwards; }

/* ---- INSTANT WIN SCENE ---- */
.scene-instantwin .mockup-card { opacity: 0; }
.scene-iw__wheel { transition: opacity 0.3s; }
.scene-iw__winner { display: none; opacity: 0; }
.scene-iw__winner.is-visible { display: block; }

.anim-running .scene-instantwin .mockup-card { animation: sceneIn 0.4s ease-out forwards; }
.anim-running .spin-wheel { animation: spinWheel 3.5s cubic-bezier(0.17,0.67,0.12,0.99) forwards; }
@keyframes spinWheel {
  from { transform: rotate(0deg); }
  to { transform: rotate(1440deg); }
}
.anim-running .scene-iw__winner.is-visible { animation: sceneScaleIn 0.5s cubic-bezier(0.34,1.56,0.64,1) forwards; }

/* ---- INTELLIGENCE SCENE ---- */
.scene-intel__profile {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  opacity: 0;
  z-index: 5;
}
.scene-intel__profile .mockup-card { opacity: 0; }
.scene-intel__profile-header {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  margin-bottom: 0.75rem;
}
.scene-intel__tags {
  display: flex;
  gap: 0.25rem;
  flex-wrap: wrap;
  margin-top: 0.5rem;
}
.scene-intel__tag {
  padding: 0.25rem 0.625rem;
  background: #f3f4f6;
  border-radius: 999px;
  font-size: 0.625rem;
  font-weight: 600;
  color: #6b7280;
}
.scene-intel__tag--vip { background: #fef3c7; color: #b45309; }
.scene-intel__tag--value { background: #dcfce7; color: #15803d; }

.anim-running .intel-chip--forms { animation: chipConverge 2.5s ease-in forwards 0.3s; --tx: calc(50% - 5%); --ty: calc(50% - 15%); }
.anim-running .intel-chip--quizzes { animation: chipConverge 2.5s ease-in forwards 0.5s; --tx: calc(-50% + 8%); --ty: calc(50% - 10%); }
.anim-running .intel-chip--giveaways { animation: chipConverge 2.5s ease-in forwards 0.7s; --tx: calc(50% - 3%); --ty: calc(-50% + 25%); }
.anim-running .intel-chip--surveys { animation: chipConverge 2.5s ease-in forwards 0.9s; --tx: calc(-50% + 5%); --ty: calc(-50% + 15%); }
.anim-running .intel-chip--instantwin { animation: chipConverge 2.5s ease-in forwards 1.1s; --tx: calc(50% - 2%); --ty: calc(50% - 45%); }
@keyframes chipConverge {
  0% { opacity: 1; transform: translate(0, 0) scale(1); }
  70% { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--tx, 50%), var(--ty, 0)) scale(0); }
}
.anim-running .scene-intel__magnetic { animation: sceneFadeOut 0.5s ease 3.5s forwards; }
.anim-running .scene-intel__profile { animation: sceneIn 0.5s ease 4.0s forwards; }
.anim-running .scene-intel__profile .mockup-card { animation: sceneScaleIn 0.5s cubic-bezier(0.34,1.56,0.64,1) 4.2s forwards; }

/* ============================================
   INTEGRATIONS — Network Grid (from Webflow)
   ============================================ */
.w-layout-grid {
  grid-row-gap: 16px;
  grid-column-gap: 16px;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}

.home-integration_image-wrapper {
  z-index: 1;
  position: relative;
  margin-top: 1rem;
}
.home-integration_image-line {
  z-index: 0;
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
}
.home-integration_image-line.is-mobile-landscape {
  display: none;
}
.home-integration_inside-wrapper {
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1.5fr 1fr;
  grid-template-rows: auto;
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  position: relative;
}
.home-integration_inside-grid {
  display: grid;
  grid-template-rows: auto auto auto auto auto;
  grid-template-columns: 1fr 1fr 1fr;
  grid-column-gap: 2.5rem;
  grid-row-gap: 1rem;
}
.home-integration_item {
  object-fit: cover;
  border: 1px solid #d4d4d4;
  border-radius: 1rem;
  width: 76px;
  min-width: 76px;
  height: 80px;
}
.home-integration_inside-center {
  justify-content: center;
  align-items: center;
  display: flex;
}

/* Grid placement for left column */
#w-node-_05b5c5c3-f457-1de4-aaeb-cfdda416de89-f09d3b26 { grid-area: 4 / 2 / 5 / 3; }
#w-node-_11fdd0a3-7df9-8006-eeb4-be240de6e0a2-f09d3b26 { grid-area: 2 / 2 / 3 / 3; }
#w-node-_3137d648-6af5-6f1c-64a1-de769328ea8e-f09d3b26 { grid-area: 1 / 1 / 2 / 2; }
#w-node-_33713d2c-5af8-172f-8a65-1a44ae2ba8cc-f09d3b26 { grid-area: 5 / 1 / 6 / 2; }
#w-node-_9e5aaf7d-cc49-a828-f0fb-51d2dddeb7d2-f09d3b26 { grid-area: 3 / 3 / 4 / 4; }
#w-node-_0aecb95c-8abe-59cd-35d0-4d25d2e3e535-f09d3b26 { grid-area: 3 / 1 / 4 / 2; }
/* Grid placement for right column */
#w-node-_554df60d-83ae-1001-c192-1aff29652258-f09d3b26 { grid-area: 4 / 2 / 5 / 3; }
#w-node-_554df60d-83ae-1001-c192-1aff29652259-f09d3b26 { grid-area: 2 / 2 / 3 / 3; }
#w-node-_554df60d-83ae-1001-c192-1aff2965225a-f09d3b26 { grid-area: 3 / 3 / 4 / 4; }
#w-node-_554df60d-83ae-1001-c192-1aff2965225b-f09d3b26 { grid-area: 5 / 3 / 6 / 4; }
#w-node-_554df60d-83ae-1001-c192-1aff2965225c-f09d3b26 { grid-area: 1 / 3 / 2 / 4; }
#w-node-_554df60d-83ae-1001-c192-1aff2965225d-f09d3b26 { grid-area: 3 / 1 / 4 / 2; }

/* Tablet */
@media (max-width: 991px) {
  .home-integration_image-wrapper { margin-top: 0; }
  .home-integration_inside-grid { grid-column-gap: 1rem; grid-row-gap: 1rem; }
  .home-integration_item { border-radius: 0.5rem; width: 3rem; height: 3rem; }
}
/* Mobile landscape */
@media (max-width: 767px) {
  .home-integration_image-wrapper { margin-top: 2rem; }
  .home-integration_image-line { display: none; }
  .home-integration_image-line.is-mobile-landscape { display: inline-block; }
  .home-integration_inside-wrapper { grid-template-columns: 1fr 1fr; }
  .home-integration_item { width: 4rem; height: 4rem; }
  .home-integration_inside-center { justify-content: flex-start; }
  .hide-mobile-landscape { display: none; }
}
/* Small mobile */
@media (max-width: 479px) {
  .home-integration_inside-wrapper { grid-column-gap: 0; grid-row-gap: 0; }
  .home-integration_inside-grid { grid-column-gap: 0.25rem; grid-row-gap: 1rem; }
  .home-integration_item { width: 3rem; height: 3rem; }
}

/* ============================================
   LOGO BAR — Infinite Marquee
   ============================================ */
.logo-scroll-mask {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
}
.logo-scroll {
  display: flex;
  align-items: center;
  gap: 3rem;
  width: max-content;
  animation: logoScroll 40s linear infinite;
}
.logo-scroll img {
  flex-shrink: 0;
  height: 2rem;
  opacity: 0.45;
  filter: grayscale(100%);
  transition: opacity 0.3s, filter 0.3s;
}
.logo-scroll img:hover {
  opacity: 1;
  filter: grayscale(0%);
}
/* Scroll right: start off-screen left, slide to 0 (one set width) */
@keyframes logoScroll {
  from { transform: translateX(-25%); }
  to { transform: translateX(0); }
}
@media (max-width: 768px) {
  .logo-scroll { gap: 2rem; }
  .logo-scroll img { height: 1.5rem; }
}
@media (max-width: 480px) {
  .logo-scroll { gap: 1.5rem; }
  .logo-scroll img { height: 1.25rem; }
}

/* ============================================
   BENTO GRID ANIMATIONS
   ============================================ */

/* -- Momentum Card -- */
.momentum-action {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.625rem;
  border-radius: 0.5rem;
  border: 1px solid #e5e7eb;
  font-size: 0.75rem;
  color: #374151;
  transition: all 0.3s ease;
}
.momentum-action__check {
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  border: 1.5px solid #d1d5db;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.5rem;
  color: transparent;
  transition: all 0.3s ease;
  flex-shrink: 0;
}
.momentum-action__label { flex: 1; }
.momentum-action__badge {
  font-weight: 700;
  font-size: 0.6875rem;
  color: #9ca3af;
  transition: color 0.3s;
}
.momentum-action--complete {
  background: #eff6ff;
  border-color: #93c5fd;
}
.momentum-action--complete .momentum-action__check {
  background: #4facfe;
  border-color: #4facfe;
  color: white;
}
.momentum-action--complete .momentum-action__badge { color: #4facfe; }

.momentum-card__total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem 0.625rem;
  margin-bottom: 0.5rem;
}
.momentum-card__total-label { font-size: 0.75rem; color: #6b7280; }
.momentum-card__total-value {
  font-size: 1.5rem;
  font-weight: 800;
  color: #4facfe;
}
.momentum-card__actions {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}
.momentum-card--resetting { opacity: 0.3; transition: opacity 0.5s; }

/* -- Speed Gauge -- */
.speed-gauge {
  position: relative;
  width: 7rem;
  height: 7rem;
  margin: 0 auto 0.75rem;
}
.speed-gauge__svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.speed-gauge__track {
  fill: none;
  stroke: #e5e7eb;
  stroke-width: 6;
}
.speed-gauge__ring {
  fill: none;
  stroke: #4facfe;
  stroke-width: 6;
  stroke-linecap: round;
  stroke-dasharray: 283;
  stroke-dashoffset: 283;
  transition: stroke-dashoffset 1.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.speed-card--active .speed-gauge__ring {
  stroke-dashoffset: 0;
}
.speed-gauge__content {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.125rem;
}
.speed-gauge__value { font-size: 1.5rem; font-weight: 800; color: #1f2937; }
.speed-gauge__unit { font-size: 0.875rem; font-weight: 600; color: #6b7280; }

.speed-metrics {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
}
.speed-metric__label { font-size: 0.625rem; color: #9ca3af; }
.speed-metric__value { font-size: 0.75rem; font-weight: 700; color: #1f2937; }
.speed-badge {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.625rem;
  background: #eff6ff;
  border-radius: 999px;
  font-size: 0.6875rem;
  font-weight: 600;
  color: #4facfe;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.3s, transform 0.3s;
}
.speed-card--active .speed-badge {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 1.2s;
}

/* -- Revenue Card -- */
.revenue-streams {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}
.revenue-stream {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  opacity: 0;
  transform: translateX(-10px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}
.revenue-card--active .revenue-stream { opacity: 1; transform: translateX(0); }
.revenue-card--active .revenue-stream:nth-child(1) { transition-delay: 0.1s; }
.revenue-card--active .revenue-stream:nth-child(2) { transition-delay: 0.3s; }
.revenue-card--active .revenue-stream:nth-child(3) { transition-delay: 0.5s; }

.revenue-stream__dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  flex-shrink: 0;
}
[data-stream="entries"] .revenue-stream__dot { background: #4facfe; }
[data-stream="purchases"] .revenue-stream__dot { background: #22c55e; }
[data-stream="referrals"] .revenue-stream__dot { background: #8b5cf6; }

.revenue-stream__label { font-size: 0.75rem; color: #6b7280; flex: 1; }
.revenue-stream__value { font-size: 0.75rem; font-weight: 700; color: #1f2937; }

.revenue-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 0.5rem;
  border-top: 1px solid #f3f4f6;
}
.revenue-total__label { font-size: 0.75rem; color: #6b7280; }
.revenue-total__value { font-size: 1.25rem; font-weight: 800; color: #22c55e; }

/* -- Communication Card -- */
.communication-timeline {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.communication-message {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.625rem;
  background: #f9fafb;
  border-radius: 0.5rem;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}
.communication-card--active .communication-message { opacity: 1; transform: translateY(0); }
.communication-card--active .communication-message:nth-child(1) { transition-delay: 0.1s; }
.communication-card--active .communication-message:nth-child(2) { transition-delay: 0.5s; }
.communication-card--active .communication-message:nth-child(3) { transition-delay: 0.9s; }

.communication-message__icon {
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  background: #e5e7eb;
  color: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.5rem;
  transition: all 0.3s;
  flex-shrink: 0;
}
.communication-message--complete .communication-message__icon {
  background: #dcfce7;
  color: #16a34a;
}
.communication-message__text { flex: 1; font-size: 0.75rem; color: #374151; }
.communication-message__channel {
  font-size: 0.625rem;
  font-weight: 600;
  color: #9ca3af;
  padding: 0.125rem 0.375rem;
  background: #f3f4f6;
  border-radius: 0.25rem;
}

/* -- Expertise Card -- */
.expertise-counter {
  text-align: center;
  margin-bottom: 0.75rem;
}
.expertise-counter__value { font-size: 2.5rem; font-weight: 800; color: #1f2937; }
.expertise-counter__plus { font-size: 1.5rem; font-weight: 800; color: #4facfe; }
.expertise-counter__label { display: block; font-size: 0.75rem; color: #6b7280; }

.expertise-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  justify-content: center;
}
.expertise-badge {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.375rem 0.75rem;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 999px;
  font-size: 0.6875rem;
  font-weight: 600;
  color: #374151;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.expertise-card--active .expertise-badge { opacity: 1; transform: translateY(0); }
.expertise-card--active [data-badge="1"] { transition-delay: 0.3s; }
.expertise-card--active [data-badge="2"] { transition-delay: 0.6s; }
.expertise-card--active [data-badge="3"] { transition-delay: 0.9s; }

/* ============================================
   CUSTOMER INTELLIGENCE - Large Profile Build
   ============================================ */
.unified-profile-large-wrapper {
  perspective: 1000px;
}
.unified-profile-large {
  background: white;
  border-radius: 1rem;
  padding: 1.25rem;
  box-shadow: 0 8px 30px rgba(79,172,254,0.1);
  border: 1px solid #e5e7eb;
}
.unified-profile-large__badge-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}
.unified-profile-large__check {
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  background: #dcfce7;
  color: #16a34a;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.5rem;
}
.unified-profile-large__title {
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #6b7280;
}
.unified-profile-large__header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
}
.unified-profile-large__avatar {
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  overflow: hidden;
}
.unified-profile-large__avatar img { width: 100%; height: 100%; object-fit: cover; }
.unified-profile-large__name { font-weight: 700; font-size: 1rem; color: #1f2937; }
.unified-profile-large__contact { font-size: 0.75rem; color: #6b7280; }
.unified-profile-large__phone-flag { font-size: 0.875rem; }

.unified-profile-large__sources {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.625rem;
  margin-bottom: 0.75rem;
}
.unified-profile-large__source {
  padding: 0.625rem;
  background: #f9fafb;
  border-radius: 0.5rem;
  border: 1px solid #f3f4f6;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}
.profile-build--active .unified-profile-large__source { opacity: 1; transform: translateY(0); }
.profile-build--active [data-source="1"] { transition-delay: 0.3s; }
.profile-build--active [data-source="2"] { transition-delay: 0.5s; }
.profile-build--active [data-source="3"] { transition-delay: 0.7s; }
.profile-build--active [data-source="4"] { transition-delay: 0.9s; }

.unified-profile-large__source-header {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.625rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.375rem;
}
.unified-profile-large__source-header--forms { color: #2563eb; }
.unified-profile-large__source-header--quizzes { color: #7c3aed; }
.unified-profile-large__source-header--giveaways { color: #d97706; }
.unified-profile-large__source-header--surveys { color: #0d9488; }

.unified-profile-large__source-data {
  display: flex;
  justify-content: space-between;
  padding: 0.125rem 0;
}
.unified-profile-large__data-label { font-size: 0.625rem; color: #9ca3af; }
.unified-profile-large__data-value { font-size: 0.625rem; font-weight: 600; color: #374151; }
.unified-profile-large__data-value--highlight { color: #8b5cf6; }
.unified-profile-large__data-value--giveaway { color: #d97706; }
.unified-profile-large__data-value--survey { color: #0d9488; }

.unified-profile-large__instant-win {
  padding: 0.625rem;
  background: #fef2f2;
  border-radius: 0.5rem;
  border: 1px solid #fee2e2;
  margin-bottom: 0.75rem;
  opacity: 0;
  transition: opacity 0.4s ease;
  transition-delay: 1.1s;
}
.profile-build--active .unified-profile-large__instant-win { opacity: 1; }

.unified-profile-large__instant-win-header {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.625rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #dc2626;
  margin-bottom: 0.25rem;
}
.unified-profile-large__instant-win-row {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  font-size: 0.625rem;
  font-weight: 600;
  color: #374151;
}
.unified-profile-large__instant-win-item { display: flex; align-items: center; gap: 0.25rem; }
.unified-profile-large__coupon {
  padding: 0.125rem 0.5rem;
  background: white;
  border: 1px dashed #dc2626;
  border-radius: 0.25rem;
  font-size: 0.625rem;
  font-weight: 700;
  color: #dc2626;
  letter-spacing: 0.05em;
}

.unified-profile-large__enrichment {
  padding: 0.625rem;
  background: #eff6ff;
  border-radius: 0.5rem;
  border: 1px solid #dbeafe;
  margin-bottom: 0.75rem;
  opacity: 0;
  transition: opacity 0.4s ease;
  transition-delay: 1.3s;
}
.profile-build--active .unified-profile-large__enrichment { opacity: 1; }

.unified-profile-large__enrichment-header {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.625rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #4facfe;
  margin-bottom: 0.25rem;
}
.unified-profile-large__enrichment-row {
  display: flex;
  gap: 1rem;
  font-size: 0.6875rem;
  color: #374151;
}
.unified-profile-large__tags {
  display: flex;
  gap: 0.375rem;
  flex-wrap: wrap;
  opacity: 0;
  transition: opacity 0.4s ease;
  transition-delay: 1.5s;
}
.profile-build--active .unified-profile-large__tags { opacity: 1; }

.unified-profile-large__tag {
  padding: 0.25rem 0.625rem;
  background: #f3f4f6;
  border-radius: 999px;
  font-size: 0.625rem;
  font-weight: 600;
  color: #6b7280;
}
.unified-profile-large__tag--vip { background: #fef3c7; color: #b45309; }
.unified-profile-large__tag--value { background: #dcfce7; color: #15803d; }

/* ============================================
   BENTO CARD HOVER POLISH
   ============================================ */
.bento-card {
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}
.bento-card:hover {
  box-shadow: 0 8px 30px rgba(79,172,254,0.08);
  transform: translateY(-2px);
}

/* ============================================
   FAQ ACCORDION
   ============================================ */
.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease, padding 0.3s ease;
}
.faq-item.is-open .faq-answer {
  max-height: 200px;
  padding-bottom: 1rem;
}
.faq-item.is-open .faq-icon {
  transform: rotate(45deg);
}
.faq-icon {
  transition: transform 0.3s ease;
}
.faq-item {
  transition: box-shadow 0.2s ease;
}
.faq-item:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,0.04);
}
.faq-question {
  cursor: pointer;
}

/* ============================================
   RESPONSIVE ADJUSTMENTS

/* ============================================
   RESPONSIVE ADJUSTMENTS
   ============================================ */

/* --- Tablet (≤1024px) --- */
@media (max-width: 1024px) {
  .hero-mockup {
    min-width: 240px;
  }
}

/* --- Small tablet / large phone (≤768px) --- */
@media (max-width: 768px) {
  .hero-mockup {
    min-width: 260px;
  }
  .scene { padding: 1rem; }
  .mockup-card { padding: 1rem; max-width: 300px; }
  .unified-profile-large__sources { grid-template-columns: 1fr; }
  .nps-scale { gap: 0.125rem; }
  .nps-button { width: 1.375rem; height: 1.375rem; font-size: 0.5rem; }
  .intel-chip { font-size: 0.5625rem; padding: 0.25rem 0.5rem; }

  /* Tighten section padding on mobile */
  .v2-section-pad { padding-top: 3.5rem; padding-bottom: 3.5rem; }

}

/* --- Phone (≤640px) --- */
@media (max-width: 640px) {

  /* Hero mockup taller on phone for better card display */
  .hero-mockup {
    aspect-ratio: 3 / 4;
    min-height: 320px;
  }

  /* Tighter section spacing on small screens */
  .v2-section-pad { padding-top: 3rem; padding-bottom: 3rem; }
}

/* --- Small phone (≤480px) --- */
@media (max-width: 480px) {
  .hero-mockup {
    min-width: 100%;
    aspect-ratio: auto;
    min-height: 300px;
  }
  .scene { padding: 0.75rem; }
  .mockup-card { max-width: 100%; }
}


/* ============================================
   EASTER EGGS — Ambient Sky Interactions
   ============================================ */

/* --- Flying birds --- */
.easter-bird {
  position: absolute;
  pointer-events: none;
  z-index: 5;
}
.easter-bird--right {
  animation: birdFlyRight var(--speed) linear forwards;
}
.easter-bird--left {
  animation: birdFlyLeft var(--speed) linear forwards;
}
.easter-bird__wave {
  animation: birdWave var(--wave) ease-in-out infinite;
}

@keyframes birdFlyRight {
  0%   { transform: translateX(-30px); opacity: 0; }
  4%   { opacity: 1; }
  88%  { opacity: 1; }
  100% { transform: translateX(100vw); opacity: 0; }
}
@keyframes birdFlyLeft {
  0%   { transform: translateX(100vw); opacity: 0; }
  4%   { opacity: 1; }
  88%  { opacity: 1; }
  100% { transform: translateX(-30px); opacity: 0; }
}
@keyframes birdWave {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(var(--wy)); }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .logo-scroll { animation: none; }
  .cloud-blur { animation: none; }
  .easter-bird,
  .easter-balloon { display: none !important; }
}