/* ============================================
   Font Awesome Imports
   ============================================ */
@import url('../fontawesome/css/all.css');

/* ============================================
   Heading Typography Scale Overrides
   ============================================ */
.heading-style-h1 {
  font-size: 2.875rem;
}

.heading-style-h2 {
  font-size: 2.5rem;
}

@media screen and (max-width: 991px) {
  .heading-style-h1 {
    font-size: 2.5rem;
  }
  .heading-style-h2 {
    font-size: 2.25rem;
  }
}

@media screen and (max-width: 767px) {
  .heading-style-h1 {
    font-size: 2rem;
  }
  .heading-style-h2 {
    font-size: 1.75rem;
  }
}

/* ============================================
   Hero Tab Component Styles
   ============================================ */

/* Tab Link Buttons */
.hero_tab-link {
  color: var(--button--primary);
  background-color: transparent;
  border-radius: 10rem;
  flex: none;
  padding: .5rem 2rem;
  transition: all .2s;
}

.hero_tab-link:hover {
  background-color: #fffc;
}

.hero_tab-link.w--current {
  background-color: var(--base-color-brand--white);
  color: var(--base-color-brand--black);
  box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 5px 0px, rgba(0, 0, 0, 0.1) 0px 0px 1px 0px;
}

/* Component Container */
.hero-tab_component {
  margin-top: 1rem;
  margin-bottom: 2rem;
}

/* Tab Menu - Glassmorphic Bar */
.hero_tabs-menu {
  grid-column-gap: 4px;
  grid-row-gap: 4px;
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  background-color: #4ba7ee0f;
  border-radius: 10rem;
  justify-content: center;
  align-items: center;
  margin-bottom: -1.4rem;
  padding: 2px;
  font-size: 1rem;
  display: flex;
  position: relative;
  z-index: 1;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;
}

/* Tab Image */
.hero-tab_image {
  border-radius: .75rem;
  width: 100%;
  height: 100%;
}

/* Two-Column Grid Layout */
.hero_tab-wrapper {
  grid-template-rows: auto;
  grid-template-columns: 1fr 2fr;
  grid-auto-columns: 1fr;
  align-items: start;
  gap: 3rem;
  display: grid;
}

/* Left Content Column */
.hero_tab-content-left {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  padding-right: 3rem;
}

/* Icon Wrapper (hidden until FontAwesome is added) */
.hero_tab-icon-wrapper {
  display: none;
}

/* Tagline Label */
.hero_tab-tagline {
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--button--primary);
  text-transform: uppercase;
}

/* Heading */
.hero_tab-heading {
  font-size: 1.3rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--base-color-brand--black);
  margin: 0;
}

/* Features List */
.hero_tab-features {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* Feature Item Row */
.hero_tab-feature-item {
  display: flex;
  gap: 0.5rem;
  align-items: flex-start;
  line-height: 1.5;
}

/* Blue Circular Checkmark */
.hero_tab-feature-icon {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  background-color: var(--button--primary);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 600;
  margin-top: 0.2rem;
}

/* CTA Link with Arrow Animation */
.hero_tab-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--base-color-brand--black);
  font-weight: 600;
  text-decoration: none;
  transition: gap 0.2s ease;
}

.hero_tab-cta:hover {
  gap: 0.75rem;
}

.hero_tab-cta .icon-arrow {
  transition: transform 0.2s ease;
}

.hero_tab-cta:hover .icon-arrow {
  transform: translateX(4px);
}

/* Image Wrapper - Glassmorphic Background */
.hero-tab_image-wrapper {
  background-color: #fff3;
  border-radius: 1rem;
  width: 100%;
  padding: .75rem;
  overflow: hidden;
}

/* Tab Component Flex Layout */
.hero_tabs {
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

/* Tab Content Container */
.hero_tabs-content {
  width: 100%;
}

/* Webflow Tab System Overrides - Glassmorphic Container */
.section_cta .w-tab-content {
  display: block;
  position: relative;
  overflow: hidden;
  background-color: rgba(255, 255, 255, 0.4);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: 1.5rem;
  padding: 4rem 3rem 3rem;
  border: 1px solid #ebebec;
}

.section_cta .w-tab-pane {
  display: none;
  position: relative;
}

.section_cta .w--tab-active {
  display: block;
}

/* ============================================
   Tablet Breakpoint (max-width: 991px)
   ============================================ */
@media screen and (max-width: 991px) {
  .hero_tab-wrapper {
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
    grid-template-columns: 1fr;
  }

  .hero_tab-content-left {
    padding-right: 0;
    margin-bottom: 0;
    margin-top: 2rem;
    text-align: center;
    align-items: center;
    width: 100%;
    max-width: 500px;
  }

  .hero_tab-heading {
    font-size: 1.2rem;
  }

  .hero_tab-feature-item {
    text-align: left;
  }

  .hero_tabs-menu {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background-color: transparent;
    border-radius: 0;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
    padding: 0;
    box-shadow: none;
  }

  .hero_tab-link {
    background-color: var(--base-color-brand--white);
    border: 1px solid #ebebec;
    border-radius: 0.75rem;
    padding: 0.75rem 1.25rem;
    color: var(--button--primary);
  }

  .hero_tab-link.w--current {
    background-color: var(--button--primary);
    color: white;
    border-color: var(--button--primary);
  }

  .section_cta .w-tab-content {
    padding: 3rem 2rem;
  }
}

/* ============================================
   Mobile Landscape Breakpoint (max-width: 767px)
   ============================================ */
@media screen and (max-width: 767px) {
  .hero_tab-link {
    background-color: var(--base-color-brand--white);
    color: var(--button--primary);
    box-shadow: 0 1px 4px #0000000d;
  }

  .hero_tab-link.w--current {
    background-color: var(--button--primary);
    color: var(--base-color-brand--white);
  }

  .hero_tab-heading {
    font-size: 1.2rem;
  }

  .hero_tab-content-left {
    gap: 1rem;
  }

  .hero-tab_component {
    margin-top: 4rem;
  }

  .hero_tabs-menu {
    grid-column-gap: .5rem;
    grid-row-gap: .5rem;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background-color: transparent;
    flex-flow: wrap;
    margin-bottom: 1.5rem;
    padding: 0;
    gap: 0.75rem;
    z-index: 0;
    box-shadow: none;
  }

  .hero_tab-link {
    background-color: var(--base-color-brand--white);
    border: 1px solid #ebebec;
    border-radius: 0.75rem;
    padding: 0.75rem 1.25rem;
    font-size: 0.9375rem;
  }

  .hero_tab-link.w--current {
    background-color: var(--button--primary);
    color: white;
    border-color: var(--button--primary);
    box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 5px 0px, rgba(0, 0, 0, 0.1) 0px 0px 1px 0px;
  }

  .section_cta .w-tab-content {
    padding: 2rem 1.5rem;
  }
}

/* ============================================
   Mobile Portrait Breakpoint (max-width: 479px)
   ============================================ */
@media screen and (max-width: 479px) {
  .hero_tab-link {
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    color: var(--button--primary);
    background-color: #ffffff45;
    border: 1px solid #fff6;
    padding: .5rem 1.5rem;
  }

  .hero-tab_image {
    border-radius: .5rem;
  }

  .hero-tab_image-wrapper {
    border-radius: .5rem;
    padding: .25rem;
  }
}

/* ============================================
   Font Awesome Icon Overrides for Navbar
   ============================================ */

/* Feature/menu item icons */
.navbar_icon-wrapper i.fa-regular {
  font-size: 18px;
  color: #2664EC;
}

/* Dropdown chevron icons */
.dropdown-chevron i.fa-regular {
  font-size: 12px;
}

/* Navbar menu icons inside embed wrapper (Resources dropdown) */
.navbar_icon-wrapper .icon-embed-xsmall i.fa-regular {
  font-size: 18px;
  color: #2664EC;
}

/* Button arrow icon - dark color for contrast */
.button.is-white .icon-embed-xsmall i.fa-regular {
  color: #1D1D1D;
}

/* ============================================
   Font Awesome Icon Overrides for Site-wide
   ============================================ */

/* Footer social icons */
.footer_social-link i {
  font-size: 20px;
  color: currentColor;
}

/* Pricing checkmarks */
.pricing_feature-item i,
.pricing_icon i {
  font-size: 16px;
  color: #2664EC;
}

/* Before/After X icons */
.before-after_icon i,
.comparison_icon i {
  font-size: 16px;
}

/* FAQ plus/minus icons */
.faq_icon i,
.accordion_icon i {
  font-size: 14px;
  color: #0A0A0A73;
}

/* CTA arrow icons */
.icon-embed-xsmall i.fa-regular {
  font-size: 14px;
}

/* Hero tab checkmark icon styling */
.hero_tab-feature-icon i {
  font-size: 10px;
  color: white;
}

/* Icon-arrow FA styling */
.icon-arrow i {
  font-size: inherit;
  color: inherit;
}

/* Text-block icon styling (Bento, Feature, Support sections) */
.text-block i,
.text-block-2 i,
.text-block-3 i,
.text-block-4 i,
.text-block-5 i,
.text-block-7 i,
.text-block-8 i {
  font-size: inherit;
  color: inherit;
}

/* Feature item icons on feature.html and index.html Customer Intelligence section */
.feature_item-icon-wrapper i,
.feature_item-icon-wrapper .text-block-8 i {
  font-size: 24px;
  color: #4ba7ee;
}

/* ============================================
   Integration Page - Learn More Arrow Animation
   ============================================ */

/* Integration page "Learn More" link arrow animation */
.button.is-link.is-integration i.fa-regular {
  display: inline-block;
  transition: transform 0.2s ease;
  transform: translateX(0);
}

.integration-list:hover .button.is-link.is-integration i.fa-regular {
  transform: translateX(0.25rem);
}

/* ============================================
   Unified Pricing Card Styles
   ============================================ */

/* Pop animation for price and usage values */
@keyframes pricePop {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.03); }
}

#price-amount {
  font-size: 3.5rem !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  letter-spacing: -0.03em !important;
  display: inline-block !important;
  transform-origin: center center;
  transition: transform 0.2s ease, font-size 0.2s ease;
}

#price-amount.pop {
  animation: pricePop 0.3s ease;
}

.pricing_usage-value.pop {
  animation: pricePop 0.3s ease;
}

/* Main unified card container */
.pricing_unified-card {
  background-color: #fff;
  border: 1px solid var(--base-color-neutral--neutral-lighter);
  border-radius: 0.75rem;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
  padding: 2rem;
  overflow: hidden;
  position: relative;
}

/* Plan Selector Label */
.pricing_plan-selector-label {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-color--text-primary);
  opacity: 0.7;
  margin-bottom: 0.75rem;
  margin-top: 0;
}

/* Plan Selector Tabs */
.pricing_plan-selector {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-column-gap: 0.5rem;
  margin-bottom: 2rem;
  background-color: var(--base-color-neutral--neutral-lightest);
  border-radius: 10rem;
  padding: 4px;
}

.pricing_plan-tab {
  background-color: transparent;
  border: none;
  border-radius: 10rem;
  padding: 0.625rem 0.75rem;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}

.pricing_plan-tab:hover {
  background-color: rgba(0, 0, 0, 0.05);
}

.pricing_plan-tab.active {
  background-color: var(--base-color-neutral--white);
  border: 1px solid var(--base-color-neutral--neutral-lighter);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.pricing_plan-tab-label {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-color--text-primary);
}

.pricing_plan-tab.active .pricing_plan-tab-label {
  color: #4ba7ee;
}

.pricing_plan-tab-price {
  display: none;
}

/* Header Section */
.pricing_unified-header {
  display: none;
}

/* Usage Section */
.pricing_usage-section {
  margin-bottom: 2rem;
}

.pricing_usage-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-column-gap: 1rem;
}

.pricing_usage-box {
  background: var(--base-color-neutral--neutral-lightest);
  border: none;
  border-radius: 0.75rem;
  padding: 1.25rem 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  overflow: hidden;
}

/* Fill animation using ::before pseudo-element */
.pricing_usage-box::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: var(--fill-height, 20%);
  background: linear-gradient(180deg, rgba(75, 165, 235, 0.08) 0%, rgba(75, 165, 235, 0.18) 100%);
  transition: height 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  border-radius: 0 0 0.75rem 0.75rem;
  z-index: 1;
}

.pricing_usage-value {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-color--text-primary);
  margin-bottom: 0.25rem;
  z-index: 2;
  position: relative;
  order: 1;
}

.pricing_usage-label {
  font-size: 0.8125rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-color--text-secondary);
  opacity: 0.7;
  z-index: 2;
  position: relative;
  order: 2;
  margin-top: 0;
}

/* Unlimited Banner */
.pricing_unlimited-banner {
  background-color: #f0fdf4;
  border: 1px solid #6bad0d;
  border-radius: 0.5rem;
  padding: 1rem 1.5rem;
  margin-bottom: 2rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: #15803d;
}

.pricing_unlimited-banner .icon-embed-small {
  color: #6bad0d;
}

/* Feature List - Two Column Variant */
.pricing_feature-list--two-col {
  display: grid;
  grid-template-columns: 1fr 1fr !important;
  grid-column-gap: 1rem;
  grid-row-gap: 0;
}

/* Overage Notice Box - Hidden by default */
.pricing_overage-notice {
  display: none;
}

/* ============================================
   Unified Pricing Card - Responsive Styles
   ============================================ */

/* Tablet Breakpoint */
@media screen and (max-width: 991px) {
  .pricing_plan-selector {
    grid-template-columns: repeat(3, 1fr);
    grid-row-gap: 0.5rem;
  }
}

/* Mobile Landscape Breakpoint */
@media screen and (max-width: 767px) {
  .pricing_unified-card {
    padding: 1.5rem;
  }

  .pricing_plan-selector {
    grid-template-columns: repeat(2, 1fr);
    background-color: transparent;
    padding: 0;
    grid-row-gap: 0.5rem;
  }

  .pricing_plan-tab {
    border: 1px solid var(--base-color-neutral--neutral-lighter);
    background-color: #fff;
  }

  .pricing_plan-tab.active {
    border-color: var(--button--primary);
    background-color: #fff;
  }

  .pricing_usage-grid {
    grid-template-columns: 1fr;
    grid-row-gap: 1rem;
  }

  .pricing_feature-list--two-col {
    grid-template-columns: 1fr;
  }
}

/* Mobile Portrait Breakpoint */
@media screen and (max-width: 479px) {
  #price-amount {
    font-size: 2.5rem !important;
  }

  .pricing_plan-selector {
    grid-template-columns: repeat(3, 1fr);
    background-color: transparent;
    padding: 0;
    grid-row-gap: 0.5rem;
  }

  .pricing_plan-tab {
    flex-direction: row;
    justify-content: center;
    border: 1px solid var(--base-color-neutral--neutral-lighter);
    background-color: #fff;
  }

  .pricing_plan-tab.active {
    border-color: var(--button--primary);
    background-color: #fff;
  }

  .pricing_unlimited-banner {
    flex-direction: column;
    text-align: center;
  }
}

/* ============================================
   HERO TAB COLOR THEMES
   Distinct colors for each tab (Fillout-style)
   ============================================ */
:root {
  /* Forms - Blue (default/brand) */
  --tab-forms-bg-start: #f8fbfe;
  --tab-forms-bg-end: #eff7fd;
  --tab-forms-accent: #4ba7ee;
  --tab-forms-badge-bg: #dbeafe;
  --tab-forms-badge-text: #1d4ed8;

  /* Quizzes - Purple */
  --tab-quizzes-bg-start: #faf5ff;
  --tab-quizzes-bg-end: #ede9fe;
  --tab-quizzes-accent: #8b5cf6;
  --tab-quizzes-badge-bg: #ede9fe;
  --tab-quizzes-badge-text: #7c3aed;

  /* Giveaways - Amber */
  --tab-giveaways-bg-start: #fefce8;
  --tab-giveaways-bg-end: #fef3c7;
  --tab-giveaways-accent: #d97706;
  --tab-giveaways-badge-bg: #fef3c7;
  --tab-giveaways-badge-text: #b45309;

  /* Surveys - Teal */
  --tab-surveys-bg-start: #f0fdfa;
  --tab-surveys-bg-end: #ccfbf1;
  --tab-surveys-accent: #0d9488;
  --tab-surveys-badge-bg: #ccfbf1;
  --tab-surveys-badge-text: #0f766e;

  /* Instant Win - Red */
  --tab-instantwin-bg-start: #fef2f2;
  --tab-instantwin-bg-end: #fee2e2;
  --tab-instantwin-accent: #dc2626;
  --tab-instantwin-badge-bg: #fee2e2;
  --tab-instantwin-badge-text: #b91c1c;

  /* Customer Intelligence - Indigo */
  --tab-intelligence-bg-start: #eef2ff;
  --tab-intelligence-bg-end: #e0e7ff;
  --tab-intelligence-accent: #4f46e5;
  --tab-intelligence-badge-bg: #e0e7ff;
  --tab-intelligence-badge-text: #4338ca;
}

/* ============================================
   HERO ANIMATED MOCKUP SYSTEM
   Revup brand colors
   ============================================ */

/* Container */
.hero-mockup {
  position: relative;
  width: 100%;
  min-width: 320px;
  aspect-ratio: 4 / 3;
  background: linear-gradient(135deg, #f8fbfe 0%, #eff7fd 100%);
  border-radius: 0.75rem;
  overflow: hidden;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15);
}

/* Screen cycling */
.hero-mockup__screen {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  opacity: 0;
  transform: translateX(20px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
  pointer-events: none;
}

.hero-mockup__screen.is-active {
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
  z-index: 2;
}

.hero-mockup__screen.is-exiting {
  opacity: 0;
  transform: translateX(-20px);
  z-index: 1;
}

/* Special transition for magnetic slide -> profile slide */
/* Magnetic slide fades out quickly so it doesn't overlap with slide 2 */
.hero-mockup__screen.is-exiting[data-screen="intelligence-magnetic"] {
  transform: translateX(0);
  transition: opacity 0.25s ease-out;
  z-index: 1;
}

/* CRITICAL: Preserve final animation state when magnetic slide exits */
/* Without these rules, removing .is-active causes all animations to reset */
.hero-mockup__screen.is-exiting[data-screen="intelligence-magnetic"] .intel-chip {
  /* Keep chips in their final position (at center, invisible) */
  transform: translate(0, 0) scale(0);
  opacity: 0;
  animation: none;
}

.hero-mockup__screen.is-exiting[data-screen="intelligence-magnetic"] .intel-magnetic__progress-fill {
  /* Keep progress bar full */
  width: 100%;
  animation: none;
}

.hero-mockup__screen.is-exiting[data-screen="intelligence-magnetic"] .intel-magnetic__status-text--gathering {
  /* Keep "Gathering" text hidden */
  opacity: 0;
  animation: none;
}

.hero-mockup__screen.is-exiting[data-screen="intelligence-magnetic"] .intel-magnetic__status-text--complete {
  /* Keep "Data unified!" visible */
  opacity: 1;
  animation: none;
}

/* Profile building slide enters on top with slight delay */
.hero-mockup__screen[data-screen="intelligence-building"] {
  z-index: 3;
}

.hero-mockup__screen.is-active[data-screen="intelligence-building"] {
  transform: translateX(0);
  transition: opacity 0.5s ease-out 0.15s;
}

/* Keep survey-thanks in final state during exit transition */
.hero-mockup__screen.is-exiting[data-screen="survey-thanks"] .survey-email-form,
.hero-mockup__screen.is-exiting[data-screen="survey-thanks"] .survey-email-prompt {
  opacity: 0;
  max-height: 0;
  overflow: hidden;
}

.hero-mockup__screen.is-exiting[data-screen="survey-thanks"] .survey-coupon-reveal {
  opacity: 1;
  max-height: 100px;
  margin-top: 0.5rem;
}

/* Staggered entrance delays */
.anim-delay-100 { transition-delay: 100ms; animation-delay: 100ms; }
.anim-delay-200 { transition-delay: 200ms; animation-delay: 200ms; }
.anim-delay-300 { transition-delay: 300ms; animation-delay: 300ms; }
.anim-delay-400 { transition-delay: 400ms; animation-delay: 400ms; }

/* Element fade-up animation */
.anim-fade-up {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

.hero-mockup__screen.is-active .anim-fade-up {
  opacity: 1;
  transform: translateY(0);
}

/* ============================================
   MOCKUP UI COMPONENTS (Octane AI Style)
   ============================================ */

/* Main card container */
.mockup-card {
  background: white;
  border-radius: 0.75rem;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  padding: 1.5rem;
  width: 100%;
  max-width: 380px;
}

/* Card header */
.mockup-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #64748b;
}

/* Form elements */
.mockup-input {
  width: 100%;
  padding: 0.875rem 1rem;
  border: 1px solid #e5e7eb;
  border-radius: 0.5rem;
  background: #f9fafb;
  font-size: 0.875rem;
  color: #374151;
}

/* Input row for side-by-side fields */
.mockup-input-row {
  display: flex;
  gap: 0.5rem;
}

.mockup-input-row .mockup-input {
  flex: 1;
  min-width: 0;
}

.mockup-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  background: #4ba7ee;
  color: white;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  font-weight: 600;
  border: none;
  transition: background 0.2s ease, transform 0.15s ease, filter 0.15s ease;
}

.mockup-button:hover {
  background: #48c1f0;
}

/* Add field placeholder */
.mockup-add-field {
  border: 2px dashed #e5e7eb;
  border-radius: 0.5rem;
  padding: 1.5rem;
  text-align: center;
  color: #9ca3af;
  font-size: 0.875rem;
}

/* Badge component (Quiz, Giveaway, etc.) */
.mockup-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.5rem;
  background: #dbeafe;
  color: #2563eb;
  border-radius: 0.25rem;
  font-size: 0.625rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.mockup-badge--orange {
  background: #fef3c7;
  color: #d97706;
}

.mockup-badge--green {
  background: #dcfce7;
  color: #16a34a;
}

/* Radio/checkbox options (for quizzes, surveys) */
.mockup-option {
  display: flex;
  align-items: center;
  padding: 0.75rem 1rem;
  background: white;
  border: 1px solid #e5e7eb;
  border-radius: 0.5rem;
  margin-bottom: 0.5rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: #374151;
  transition: border-color 0.2s, background 0.2s, transform 0.15s;
  cursor: pointer;
}

.mockup-option:last-child {
  margin-bottom: 0;
}

.mockup-option:hover {
  border-color: #4ba7ee;
  background: #f8fafc;
}

.mockup-option.is-selected {
  border-color: #4ba7ee;
  background: #eff6ff;
  color: #1d4ed8;
  font-weight: 600;
}

.mockup-option.is-selected::before {
  content: '';
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #4ba7ee;
  margin-right: 0.75rem;
  flex-shrink: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z'/%3E%3C/svg%3E");
  background-size: 12px;
  background-repeat: no-repeat;
  background-position: center;
}

/* Quiz question text */
.mockup-question {
  font-weight: 600;
  font-size: 0.9375rem;
  color: #1f2937;
  margin-bottom: 1rem;
  line-height: 1.4;
}

/* Quiz progress indicator */
.mockup-progress-text {
  font-size: 0.75rem;
  color: #6b7280;
  margin-left: auto;
}

/* Result/success state */
.mockup-result {
  text-align: center;
  padding: 1rem;
}

.mockup-result__check {
  width: 3rem;
  height: 3rem;
  background: #dcfce7;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1rem;
  color: #16a34a;
}

/* ============================================
   CUSTOMER PROFILE CARD COMPONENT
   Shows the unified profile getting enriched
   ============================================ */

.mockup-profile {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.mockup-profile__header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid #e5e7eb;
}

.mockup-profile__avatar {
  width: 2.5rem;
  height: 2.5rem;
  background: linear-gradient(135deg, #4ba7ee 0%, #48c1f0 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: 600;
  font-size: 0.875rem;
  overflow: hidden;
}

.mockup-profile__avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mockup-profile__name {
  font-weight: 600;
  font-size: 0.9375rem;
  color: #1f2937;
}

.mockup-profile__email {
  font-size: 0.75rem;
  color: #6b7280;
}

.mockup-profile__field {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.8125rem;
}

.mockup-profile__label {
  color: #6b7280;
}

.mockup-profile__value {
  color: #1f2937;
  font-weight: 500;
}

.mockup-profile__tag {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.5rem;
  background: #dbeafe;
  color: #1d4ed8;
  border-radius: 9999px;
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.025em;
}

.mockup-profile__tag--new {
  background: #dcfce7;
  color: #16a34a;
}

.mockup-profile__tag--vip {
  background: #fef3c7;
  color: #d97706;
}

/* Divider between form data and enriched data */
.mockup-profile__divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, #e5e7eb, transparent);
  margin: 0.25rem 0;
}

/* Enriched section styling - discovered by Revup Intelligence */
.mockup-profile__enriched {
  background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
  border-radius: 0.5rem;
  padding: 0.625rem;
  margin-top: 0.125rem;
}

.mockup-profile__enriched-header {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.625rem;
  font-weight: 600;
  color: #0369a1;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.375rem;
}

.mockup-profile__enriched-header i {
  font-size: 0.5625rem;
}

/* Enriched value styling - subtle highlight */
.mockup-profile__value--enriched {
  color: #0369a1;
}

/* Email activity section */
.mockup-profile__email-activity {
  background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
  border-radius: 0.5rem;
  padding: 0.625rem;
  margin-top: 0.125rem;
}

.mockup-profile__email-activity-header {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.625rem;
  font-weight: 600;
  color: #059669;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.375rem;
}

.mockup-profile__email-activity-header i {
  font-size: 0.5625rem;
}

.mockup-profile__value--email {
  color: #059669;
}

/* Email activity nested fields - tighter spacing */
.mockup-profile__email-activity .mockup-profile__field {
  font-size: 0.75rem;
  padding: 0.125rem 0;
}

/* Enriched section nested fields - tighter spacing */
.mockup-profile__enriched .mockup-profile__field {
  font-size: 0.75rem;
  padding: 0.125rem 0;
}

/* Side-by-side insights row for Email Activity + Enriched */
.mockup-profile__insights-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
}

/* Quiz answers section header */
.mockup-profile__section-header {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.625rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #6b7280;
  margin: 0.5rem 0 0.25rem;
}

.mockup-profile__section-header i {
  font-size: 0.75rem;
  color: #4ba7ee;
}

/* Highlighted value (for quiz result) */
.mockup-profile__value--highlight {
  color: #4ba7ee;
  font-weight: 600;
}

/* Additional animation delay for quiz profile */
.anim-delay-250 { transition-delay: 250ms; animation-delay: 250ms; }

/* Additional animation delays for enriched fields */
.anim-delay-350 { transition-delay: 350ms; animation-delay: 350ms; }
.anim-delay-375 { transition-delay: 375ms; animation-delay: 375ms; }
.anim-delay-425 { transition-delay: 425ms; animation-delay: 425ms; }
.anim-delay-450 { transition-delay: 450ms; animation-delay: 450ms; }
.anim-delay-475 { transition-delay: 475ms; animation-delay: 475ms; }
.anim-delay-500 { transition-delay: 500ms; animation-delay: 500ms; }
.anim-delay-525 { transition-delay: 525ms; animation-delay: 525ms; }
.anim-delay-550 { transition-delay: 550ms; animation-delay: 550ms; }
.anim-delay-600 { transition-delay: 600ms; animation-delay: 600ms; }
.anim-delay-800 { transition-delay: 800ms; animation-delay: 800ms; }
.anim-delay-1000 { transition-delay: 1000ms; animation-delay: 1000ms; }
.anim-delay-1200 { transition-delay: 1200ms; animation-delay: 1200ms; }
.anim-delay-1500 { transition-delay: 1500ms; animation-delay: 1500ms; }

/* Data flow animation */
.mockup-data-flow {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.mockup-data-flow__dots {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.mockup-data-flow__dot {
  width: 0.5rem;
  height: 0.5rem;
  background: #4ba7ee;
  border-radius: 50%;
  animation: flowDown 1s ease-in-out infinite;
}

.mockup-data-flow__dot:nth-child(2) {
  animation-delay: 0.2s;
}

.mockup-data-flow__dot:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes flowDown {
  0%, 100% { opacity: 0.3; transform: translateY(0); }
  50% { opacity: 1; transform: translateY(4px); }
}

.mockup-data-flow__icon {
  width: 2.5rem;
  height: 2.5rem;
  background: linear-gradient(135deg, #4ba7ee 0%, #48c1f0 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
}

/* Revup logo variant */
.mockup-data-flow__icon--logo {
  background: white;
  padding: 0.25rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.mockup-data-flow__logo {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 50%;
}

/* Animated sync effect for Screen 2 form data card */
.mockup-data-flow .mockup-card {
  border: 1px solid rgba(75, 167, 238, 0.3);
  animation: syncPulse 2s ease-in-out infinite;
}

@keyframes syncPulse {
  0%, 100% {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08),
                0 0 0 0 rgba(75, 167, 238, 0);
  }
  50% {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08),
                0 0 20px 4px rgba(75, 167, 238, 0.3);
  }
}

/* ============================================
   VERTICAL DATA FLOW - Screen 2
   Form Data → Creating Profile → Syncing
   ============================================ */

.mockup-vertical-flow {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  width: 100%;
}

.mockup-vertical-flow__step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

.mockup-card--compact {
  padding: 0.75rem 1.5rem;
  max-width: none;
  border: 1px solid rgba(75, 167, 238, 0.25);
  animation: syncPulse 2s ease-in-out infinite;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.mockup-card__icon {
  color: #4ba7ee;
  font-size: 1rem;
}

.mockup-card__label {
  font-size: 0.9375rem;
  color: #1f2937;
  text-align: center;
  font-weight: 400;
  letter-spacing: -0.01em;
}

/* Connector with dots flowing downward */
.mockup-vertical-flow__connector {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 6px 0;
}

/* Dots that pulse in sequence (top to bottom) */
.mockup-vertical-flow__dot {
  width: 5px;
  height: 5px;
  background: #4ba7ee;
  border-radius: 50%;
  opacity: 0.25;
  animation: dotPulseDown 1.2s ease-in-out infinite;
}

/* Stagger: first dot pulses first, then second, then third */
.mockup-vertical-flow__dot:nth-child(1) {
  animation-delay: 0s;
}
.mockup-vertical-flow__dot:nth-child(2) {
  animation-delay: 0.2s;
}
.mockup-vertical-flow__dot:nth-child(3) {
  animation-delay: 0.4s;
}

/* Second connector staggers differently */
.mockup-vertical-flow__connector:nth-of-type(2) .mockup-vertical-flow__dot:nth-child(1) {
  animation-delay: 0.6s;
}
.mockup-vertical-flow__connector:nth-of-type(2) .mockup-vertical-flow__dot:nth-child(2) {
  animation-delay: 0.8s;
}
.mockup-vertical-flow__connector:nth-of-type(2) .mockup-vertical-flow__dot:nth-child(3) {
  animation-delay: 1s;
}

@keyframes dotPulseDown {
  0%, 100% {
    opacity: 0.25;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.3);
  }
}

.mockup-vertical-flow__icon {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.125rem;
}

/* Avatar with initials for profile creation */
.mockup-vertical-flow__avatar {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.35);
  animation: avatarPulse 2s ease-in-out infinite;
}

.mockup-vertical-flow__initials {
  color: white;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

@keyframes avatarPulse {
  0%, 100% {
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.35);
    transform: scale(1);
  }
  50% {
    box-shadow: 0 6px 20px rgba(59, 130, 246, 0.5);
    transform: scale(1.05);
  }
}

.mockup-vertical-flow__icon--revup {
  background: white;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  padding: 0.5rem;
}

.mockup-vertical-flow__icon--revup img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.mockup-vertical-flow__icon--email {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  color: white;
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3);
}

.mockup-vertical-flow__label {
  font-size: 0.8125rem;
  font-weight: 400;
  color: #374151;
  text-align: center;
  margin-top: 0.375rem;
}

/* ============================================
   HERO MOCKUP RESPONSIVE BREAKPOINTS
   ============================================ */

@media (max-width: 991px) {
  .hero-mockup {
    aspect-ratio: 4 / 4;
    max-width: 450px;
    max-height: 450px;
    margin: 0 auto;
  }
  .mockup-card {
    max-width: 340px;
    padding: 1.25rem;
  }
}

@media (max-width: 767px) {
  .hero-mockup {
    aspect-ratio: 1 / 1.1;
    max-width: 380px;
    max-height: 400px;
    margin: 0 auto;
  }
  .mockup-card {
    max-width: 300px;
    padding: 1rem;
  }
  /* Vertical flow - tablet */
  .mockup-vertical-flow__connector {
    padding: 10px 0;
  }
  .mockup-vertical-flow__icon {
    width: 2.25rem;
    height: 2.25rem;
    font-size: 1rem;
  }
  .mockup-vertical-flow__avatar {
    width: 2.25rem;
    height: 2.25rem;
  }
  .mockup-vertical-flow__initials {
    font-size: 0.875rem;
  }
  .mockup-vertical-flow__label {
    font-size: 0.75rem;
  }
}

@media (max-width: 479px) {
  .hero-mockup {
    aspect-ratio: 4 / 5.5;
    max-height: 380px;
  }
  .mockup-card {
    max-width: 280px;
    padding: 0.875rem;
  }
  .mockup-input {
    padding: 0.625rem 0.75rem;
    font-size: 0.8125rem;
  }
  /* Vertical flow - mobile */
  .mockup-vertical-flow__connector {
    padding: 8px 0;
  }
  .mockup-vertical-flow__icon {
    width: 2rem;
    height: 2rem;
    font-size: 0.875rem;
  }
  .mockup-vertical-flow__avatar {
    width: 2rem;
    height: 2rem;
  }
  .mockup-vertical-flow__initials {
    font-size: 0.75rem;
  }
  .mockup-vertical-flow__label {
    font-size: 0.6875rem;
  }
  .mockup-card--compact {
    padding: 0.5rem 1rem;
  }
  .mockup-card__icon {
    font-size: 0.875rem;
  }
  .mockup-card__label {
    font-size: 0.75rem;
  }
}

/* ============================================
   CURSOR CLICK ANIMATION - Screen 1
   ============================================ */

/* Button needs relative positioning for cursor */
.hero-mockup__screen:first-child .mockup-button {
  position: relative;
  overflow: visible;
}

/* Cursor using ::after pseudo-element */
.hero-mockup__screen:first-child .mockup-button::after {
  content: '';
  position: absolute;
  width: 20px;
  height: 20px;

  /* Standard pointer cursor SVG */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23111' stroke='%23fff' stroke-width='1.5' d='M5.5 3.21V20.8c0 .45.54.67.85.35l4.86-4.86a.5.5 0 0 1 .35-.15h6.87c.48 0 .72-.58.38-.92L6.35 2.85a.5.5 0 0 0-.85.36Z'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;

  /* Position at bottom-right of button */
  right: 10px;
  bottom: 8px;
  transform-origin: top left;

  /* Initial state: hidden and offset */
  opacity: 0;
  transform: translate(-50px, -80px);

  pointer-events: none;
  z-index: 100;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.15));
}

/* Animate when screen is active */
.hero-mockup__screen.is-active:first-child .mockup-button::after {
  animation: cursorClickSequence 3s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

/* Cursor animation keyframes - starts after typing completes (~1.5s) */
@keyframes cursorClickSequence {
  /* Phase 1: Hidden while typing (0-50%) = 0-1.5s */
  0%, 48% {
    opacity: 0;
    transform: translate(-50px, -80px) scale(1);
  }

  /* Phase 2: Fade in (50-55%) = 1.5-1.65s */
  55% {
    opacity: 1;
    transform: translate(-50px, -80px) scale(1);
  }

  /* Phase 3: Move to button (55-75%) = 1.65-2.25s */
  75% {
    opacity: 1;
    transform: translate(0, 0) scale(1);
  }

  /* Phase 4: Click press (75-80%) = 2.25-2.4s */
  80% {
    transform: translate(0, 0) scale(0.85);
  }

  /* Phase 5: Click release (80-88%) = 2.4-2.64s */
  88% {
    transform: translate(0, 0) scale(1);
  }

  /* Phase 6: Hold until screen changes */
  100% {
    opacity: 1;
    transform: translate(0, 0) scale(1);
  }
}

/* Button press effect when cursor clicks */
.hero-mockup__screen.is-active:first-child .mockup-button {
  animation: buttonPressEffect 3s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

@keyframes buttonPressEffect {
  /* Wait for cursor to arrive (0-75%) */
  0%, 75% {
    transform: scale(1);
    filter: brightness(1);
  }
  /* Press down when cursor clicks (80%) */
  80% {
    transform: scale(0.97);
    filter: brightness(1.1);
  }
  /* Release (88-100%) */
  88%, 100% {
    transform: scale(1);
    filter: brightness(1);
  }
}

/* Hide cursor on mobile (touch devices don't have cursors) */
@media (max-width: 767px) {
  .hero-mockup__screen:first-child .mockup-button::after {
    display: none;
  }
}

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  .hero-mockup__screen:first-child .mockup-button::after {
    animation: none;
    display: none;
  }
  .hero-mockup__screen.is-active:first-child .mockup-button {
    animation: none;
  }
}

/* ============================================
   FORM FIELD TYPING ANIMATION
   ============================================ */

/* Typing input - shows placeholder then types value */
.mockup-input--typing {
  position: relative;
  min-height: 2.75rem;
  display: flex;
  align-items: center;
}

/* Placeholder shown initially */
.mockup-input--typing::before {
  content: attr(data-placeholder);
  color: #9ca3af;
  font-style: normal;
}

/* Typed value - hidden initially, revealed with animation */
.mockup-input--typing::after {
  content: attr(data-value);
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  color: #374151;
  white-space: nowrap;
  overflow: hidden;
  width: 0;
  opacity: 0;
}

/* Animation sequence when screen is active */
.hero-mockup__screen.is-active .mockup-input--typing::before {
  animation: hidePlaceholder 3s ease forwards;
}

.hero-mockup__screen.is-active .mockup-input--typing::after {
  animation: typeText 3s ease forwards;
}

/* Staggered delays for each field - nth-of-type(2,3,4) because .mockup-header is div:nth-of-type(1) */
.hero-mockup__screen.is-active .mockup-input--typing:nth-of-type(2)::before,
.hero-mockup__screen.is-active .mockup-input--typing:nth-of-type(2)::after {
  animation-delay: 0s;  /* Email - first */
}

.hero-mockup__screen.is-active .mockup-input--typing:nth-of-type(3)::before,
.hero-mockup__screen.is-active .mockup-input--typing:nth-of-type(3)::after {
  animation-delay: 0.4s;  /* Name - second */
}

.hero-mockup__screen.is-active .mockup-input--typing:nth-of-type(4)::before,
.hero-mockup__screen.is-active .mockup-input--typing:nth-of-type(4)::after {
  animation-delay: 0.8s;  /* Skincare - third */
}

@keyframes hidePlaceholder {
  0%, 30% { opacity: 1; }  /* Visible for ~0.9s (30% of 3s) */
  45%, 100% { opacity: 0; }
}

@keyframes typeText {
  0%, 30% { width: 0; opacity: 0; }  /* Wait for placeholder */
  35% { width: 0; opacity: 1; }       /* Start typing */
  60%, 100% { width: 100%; opacity: 1; }
}

/* Mobile: skip typing animation, show filled values */
@media (max-width: 767px) {
  .mockup-input--typing::before {
    display: none;
  }
  .mockup-input--typing::after {
    position: static;
    transform: none;
    width: auto;
    animation: none !important;
    opacity: 1;
  }
}

/* Reduced motion: show filled values immediately */
@media (prefers-reduced-motion: reduce) {
  .mockup-input--typing::before {
    display: none;
  }
  .mockup-input--typing::after {
    animation: none !important;
    width: auto;
    opacity: 1;
  }
}

/* Fix email input centering in quiz email screen */
.mockup-result .mockup-input--typing {
  text-align: left;
}

.mockup-result .mockup-input--typing::after {
  left: 1rem;
  right: auto;
  text-align: left;
}

/* ============================================
   QUIZ OPTION CURSOR CLICK ANIMATION
   ============================================ */

.mockup-option--cursor-target {
  position: relative;
  overflow: visible;
}

/* Cursor pseudo-element for quiz screens */
[data-screen="quiz-q1"] .mockup-option--cursor-target::after,
[data-screen="quiz-q2"] .mockup-option--cursor-target::after {
  content: '';
  position: absolute;
  width: 20px;
  height: 20px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23111' stroke='%23fff' stroke-width='1.5' d='M5.5 3.21V20.8c0 .45.54.67.85.35l4.86-4.86a.5.5 0 0 1 .35-.15h6.87c.48 0 .72-.58.38-.92L6.35 2.85a.5.5 0 0 0-.85.36Z'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  right: 12px;
  top: 50%;
  transform: translateY(-50%) translate(-40px, -60px);
  opacity: 0;
  pointer-events: none;
  z-index: 100;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.15));
}

/* Animate cursor when screen is active */
.hero-mockup__screen.is-active[data-screen="quiz-q1"] .mockup-option--cursor-target::after,
.hero-mockup__screen.is-active[data-screen="quiz-q2"] .mockup-option--cursor-target::after {
  animation: quizCursorClick 3s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

@keyframes quizCursorClick {
  0%, 38% { opacity: 0; transform: translateY(-50%) translate(-40px, -60px) scale(1); }
  48% { opacity: 1; transform: translateY(-50%) translate(-40px, -60px) scale(1); }
  70% { opacity: 1; transform: translateY(-50%) translate(0, 0) scale(1); }
  78% { transform: translateY(-50%) translate(0, 0) scale(0.85); }
  85%, 100% { opacity: 1; transform: translateY(-50%) translate(0, 0) scale(1); }
}

/* Option selection animation */
.hero-mockup__screen.is-active[data-screen="quiz-q1"] .mockup-option--cursor-target,
.hero-mockup__screen.is-active[data-screen="quiz-q2"] .mockup-option--cursor-target {
  animation: quizOptionSelect 3s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

@keyframes quizOptionSelect {
  0%, 75% { border-color: #e5e7eb; background: white; transform: scale(1); }
  78% { transform: scale(0.98); }
  85%, 100% { border-color: #4ba7ee; background: #eff6ff; transform: scale(1); }
}

/* Hide cursor on mobile - show pre-selected instead */
@media (max-width: 767px) {
  [data-screen="quiz-q1"] .mockup-option--cursor-target::after,
  [data-screen="quiz-q2"] .mockup-option--cursor-target::after { display: none; }
  .hero-mockup__screen[data-screen="quiz-q1"] .mockup-option--cursor-target,
  .hero-mockup__screen[data-screen="quiz-q2"] .mockup-option--cursor-target {
    border-color: #4ba7ee; background: #eff6ff; animation: none;
  }
}

/* Respect reduced motion preference for quiz cursor */
@media (prefers-reduced-motion: reduce) {
  [data-screen="quiz-q1"] .mockup-option--cursor-target::after,
  [data-screen="quiz-q2"] .mockup-option--cursor-target::after { display: none; }
  .hero-mockup__screen.is-active[data-screen="quiz-q1"] .mockup-option--cursor-target,
  .hero-mockup__screen.is-active[data-screen="quiz-q2"] .mockup-option--cursor-target {
    animation: none;
    border-color: #4ba7ee;
    background: #eff6ff;
  }
}

/* ============================================
   QUIZ RESULTS + VERTICAL FLOW LAYOUT
   ============================================ */

.mockup-quiz-result-flow {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  width: 100%;
  padding: 0.5rem 0;
}

.mockup-card--result-compact {
  padding: 0.875rem 1.25rem;
  max-width: 220px;
  border: 1px solid rgba(75, 167, 238, 0.25);
  animation: syncPulse 2s ease-in-out infinite;
}

.mockup-result-mini {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.mockup-result-mini__icon {
  width: 2.25rem;
  height: 2.25rem;
  background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #16a34a;
  font-size: 0.875rem;
  flex-shrink: 0;
}

.mockup-result-mini__content { text-align: left; }

.mockup-result-mini__label {
  font-size: 0.625rem;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.125rem;
}

.mockup-result-mini__title {
  font-weight: 700;
  font-size: 0.9375rem;
  color: #1f2937;
}

/* Responsive - Quiz result flow */
@media (max-width: 767px) {
  .mockup-card--result-compact { max-width: 200px; padding: 0.75rem 1rem; }
  .mockup-result-mini__icon { width: 2rem; height: 2rem; font-size: 0.75rem; }
  .mockup-result-mini__title { font-size: 0.8125rem; }
}

@media (max-width: 479px) {
  .mockup-card--result-compact { max-width: 180px; padding: 0.625rem 0.875rem; }
  .mockup-result-mini__icon { width: 1.75rem; height: 1.75rem; }
  .mockup-result-mini__title { font-size: 0.75rem; }
}

/* ============================================
   GIVEAWAYS TAB ANIMATIONS
   ============================================ */

/* Gift badge in header */
.mockup-badge--gift {
  background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
  color: #dc2626;
}

/* Entry badge for bonus options */
.mockup-entry-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.25rem;
  padding: 0.25rem 0.5rem;
  background: #f3f4f6;
  color: #374151;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 700;
  margin-right: 0.75rem;
}

.mockup-entry-badge--highlight {
  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
  color: #d97706;
}

/* Bonus option layout */
.mockup-option--bonus {
  display: flex;
  align-items: center;
}

/* Entry total display */
.mockup-entry-total {
  font-size: 2rem;
  font-weight: 700;
  color: #f97316;
  margin-bottom: 0.5rem;
}

/* Gift icon result check */
.mockup-result__check--gift {
  background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
  color: #dc2626;
}

/* Giveaway button styling */
.mockup-button--giveaway {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

/* Cursor click animation for giveaway entry screen */
[data-screen="giveaway-entry"] .mockup-button--giveaway {
  position: relative;
  overflow: visible;
}

[data-screen="giveaway-entry"] .mockup-button--giveaway::after {
  content: '';
  position: absolute;
  width: 20px;
  height: 20px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23111' stroke='%23fff' stroke-width='1.5' d='M5.5 3.21V20.8c0 .45.54.67.85.35l4.86-4.86a.5.5 0 0 1 .35-.15h6.87c.48 0 .72-.58.38-.92L6.35 2.85a.5.5 0 0 0-.85.36Z'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  right: 10px;
  bottom: 8px;
  transform-origin: top left;
  opacity: 0;
  transform: translate(-50px, -80px);
  pointer-events: none;
  z-index: 100;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.15));
}

.hero-mockup__screen.is-active[data-screen="giveaway-entry"] .mockup-button--giveaway::after {
  animation: giveawayEntryCursor 4s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

.hero-mockup__screen.is-active[data-screen="giveaway-entry"] .mockup-button--giveaway {
  animation: giveawayEntryButton 4s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

/* Giveaway entry cursor animation (4s for email + phone typing) */
@keyframes giveawayEntryCursor {
  0%, 70% { opacity: 0; transform: translate(-50px, -80px) scale(1); }
  75% { opacity: 1; transform: translate(-50px, -80px) scale(1); }
  88% { opacity: 1; transform: translate(0, 0) scale(1); }
  92% { transform: translate(0, 0) scale(0.85); }
  96%, 100% { opacity: 1; transform: translate(0, 0) scale(1); }
}

@keyframes giveawayEntryButton {
  0%, 88% { transform: scale(1); filter: brightness(1); }
  92% { transform: scale(0.97); filter: brightness(1.1); }
  96%, 100% { transform: scale(1); filter: brightness(1); }
}

/* Bonus entries cursor animation */
[data-screen="giveaway-bonus"] .mockup-option--cursor-target {
  position: relative;
  overflow: visible;
}

[data-screen="giveaway-bonus"] .mockup-option--cursor-target::after {
  content: '';
  position: absolute;
  width: 20px;
  height: 20px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23111' stroke='%23fff' stroke-width='1.5' d='M5.5 3.21V20.8c0 .45.54.67.85.35l4.86-4.86a.5.5 0 0 1 .35-.15h6.87c.48 0 .72-.58.38-.92L6.35 2.85a.5.5 0 0 0-.85.36Z'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  right: 12px;
  top: 50%;
  transform: translateY(-50%) translate(-40px, -60px);
  opacity: 0;
  pointer-events: none;
  z-index: 100;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.15));
}

.hero-mockup__screen.is-active[data-screen="giveaway-bonus"] .mockup-option--cursor-target::after {
  animation: quizCursorClick 3s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

.hero-mockup__screen.is-active[data-screen="giveaway-bonus"] .mockup-option--cursor-target {
  animation: quizOptionSelect 3s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

/* Mobile: hide cursor, show pre-selected state */
@media (max-width: 767px) {
  [data-screen="giveaway-entry"] .mockup-button--giveaway::after { display: none; }
  [data-screen="giveaway-bonus"] .mockup-option--cursor-target::after { display: none; }
  .hero-mockup__screen[data-screen="giveaway-bonus"] .mockup-option--cursor-target {
    border-color: #4ba7ee;
    background: #eff6ff;
    animation: none;
  }
  .mockup-entry-total { font-size: 1.5rem; }
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  [data-screen="giveaway-entry"] .mockup-button--giveaway::after,
  [data-screen="giveaway-bonus"] .mockup-option--cursor-target::after { display: none; }
  .hero-mockup__screen.is-active[data-screen="giveaway-bonus"] .mockup-option--cursor-target {
    animation: none;
    border-color: #4ba7ee;
    background: #eff6ff;
  }
}

/* ============================================
   GIVEAWAY PHONE INPUT WITH FLAG
   ============================================ */

.mockup-input--phone {
  position: relative;
  padding-left: 2.5rem !important;
}

.mockup-input__flag {
  position: absolute;
  left: 0.625rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.875rem;
  z-index: 1;
  line-height: 1;
}

/* Phone input typed text needs to clear the flag */
.mockup-input--phone::after {
  left: 2.5rem;
}

/* ============================================
   GIVEAWAY COMBINED CONFIRMATION + BONUS
   ============================================ */

.mockup-confirmation-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

.mockup-confirmation-header .mockup-result__check {
  width: 2.5rem;
  height: 2.5rem;
  font-size: 1rem;
  flex-shrink: 0;
}

.mockup-confirmation-text {
  text-align: center;
}

.mockup-entry-count-badge {
  font-size: 0.8125rem;
  color: #6b7280;
  margin-top: 0.125rem;
}

.mockup-entry-count-number {
  font-weight: 700;
  color: var(--tab-giveaways-accent, #d97706);
  font-size: 1.125rem;
  display: inline-block;
}

/* New "Your Entries [1]" display format */
.mockup-entry-count-display {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 0.25rem;
  font-size: 0.875rem;
  color: #6b7280;
}

.mockup-entry-count-box {
  background: white;
  border: 1px solid #e5e7eb;
  border-radius: 4px;
  padding: 0.125rem 0.5rem;
  font-weight: 600;
  color: #374151;
  min-width: 1.5rem;
  text-align: center;
  transition: transform 0.3s ease;
}

.mockup-bonus-section {
  text-align: left;
}

.mockup-bonus-header {
  font-size: 0.6875rem;
  font-weight: 600;
  color: #374151;
  margin-bottom: 0.5rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Entry count animation after cursor click */
.hero-mockup__screen.is-active[data-screen="giveaway-combined"] .mockup-entry-count-number {
  animation: entryCountPulse 4s ease-out forwards;
}

@keyframes entryCountPulse {
  0%, 70% { transform: scale(1); }
  75% { transform: scale(1.3); }
  80% { transform: scale(1); }
  100% { transform: scale(1); }
}

/* Cursor animation for combined screen - targeting newsletter */
[data-screen="giveaway-combined"] .mockup-option--cursor-target {
  position: relative;
  overflow: visible;
}

[data-screen="giveaway-combined"] .mockup-option--cursor-target::after {
  content: '';
  position: absolute;
  width: 18px;
  height: 18px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23111' stroke='%23fff' stroke-width='1.5' d='M5.5 3.21V20.8c0 .45.54.67.85.35l4.86-4.86a.5.5 0 0 1 .35-.15h6.87c.48 0 .72-.58.38-.92L6.35 2.85a.5.5 0 0 0-.85.36Z'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  right: 10px;
  top: 50%;
  transform: translateY(-50%) translate(-30px, -50px);
  opacity: 0;
  pointer-events: none;
  z-index: 100;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.15));
}

.hero-mockup__screen.is-active[data-screen="giveaway-combined"] .mockup-option--cursor-target::after {
  animation: giveawayCombinedCursor 4s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

.hero-mockup__screen.is-active[data-screen="giveaway-combined"] .mockup-option--cursor-target {
  animation: giveawayCombinedSelect 4s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

@keyframes giveawayCombinedCursor {
  0%, 40% { opacity: 0; transform: translateY(-50%) translate(-30px, -50px); }
  50% { opacity: 1; transform: translateY(-50%) translate(-30px, -50px); }
  65% { opacity: 1; transform: translateY(-50%) translate(0, 0); }
  70% { transform: translateY(-50%) translate(0, 0) scale(0.85); }
  75%, 100% { opacity: 1; transform: translateY(-50%) translate(0, 0) scale(1); }
}

@keyframes giveawayCombinedSelect {
  0%, 65% { border-color: #e5e7eb; background: white; }
  70% { border-color: var(--tab-giveaways-accent, #d97706); background: rgba(217, 119, 6, 0.08); }
  100% { border-color: var(--tab-giveaways-accent, #d97706); background: rgba(217, 119, 6, 0.05); }
}

/* ============================================
   GIVEAWAY BRANCHING SYNC FLOW
   ============================================ */

.mockup-giveaway-sync-flow {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  padding: 0.5rem 0;
  width: 100%;
}

.mockup-vertical-flow__step--branching {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 0;
  width: 100%;
  justify-content: center;
}

.mockup-vertical-flow__main-action {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.375rem;
}

.mockup-vertical-flow__branch {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
}

.mockup-horizontal-flow__connector {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 3px;
  padding: 0 6px;
  margin-top: 1.125rem;
}

.mockup-horizontal-flow__connector .mockup-vertical-flow__dot {
  animation: dotPulseRight 1.2s ease-in-out infinite;
}

.mockup-horizontal-flow__connector .mockup-vertical-flow__dot:nth-child(1) { animation-delay: 0.6s; }
.mockup-horizontal-flow__connector .mockup-vertical-flow__dot:nth-child(2) { animation-delay: 0.8s; }
.mockup-horizontal-flow__connector .mockup-vertical-flow__dot:nth-child(3) { animation-delay: 1s; }

@keyframes dotPulseRight {
  0%, 100% { opacity: 0.25; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.3); }
}

.mockup-vertical-flow__branch-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}

.mockup-vertical-flow__branch-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
}

.mockup-vertical-flow__connector--branch {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 4px 0;
}

.mockup-vertical-flow__connector--branch .mockup-vertical-flow__dot {
  width: 5px;
  height: 5px;
  background: #4ba7ee;
  border-radius: 50%;
  opacity: 0.25;
  animation: dotPulseDown 1.2s ease-in-out infinite;
}

.mockup-vertical-flow__connector--branch .mockup-vertical-flow__dot:nth-child(1) { animation-delay: 1.2s; }
.mockup-vertical-flow__connector--branch .mockup-vertical-flow__dot:nth-child(2) { animation-delay: 1.4s; }
.mockup-vertical-flow__connector--branch .mockup-vertical-flow__dot:nth-child(3) { animation-delay: 1.6s; }

/* SMS icon (purple gradient) */
.mockup-vertical-flow__icon--sms {
  background: linear-gradient(135deg, #a78bfa 0%, #8b5cf6 100%);
  color: white;
  box-shadow: 0 2px 8px rgba(139, 92, 246, 0.3);
}

/* Email + SMS row layout */
.mockup-sync-row {
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 1.5rem;
  width: 100%;
}

.mockup-sync-row__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.375rem;
}

/* Sequential animation for giveaway sync flow */
[data-screen="giveaway-sync"] .giveaway-sync-step-1 {
  opacity: 0;
  transform: translateY(10px);
}

[data-screen="giveaway-sync"] .giveaway-sync-step-2 {
  opacity: 0;
  transform: translateY(10px);
}

[data-screen="giveaway-sync"] .giveaway-sync-step-3 {
  opacity: 0;
  transform: translateY(10px);
}

[data-screen="giveaway-sync"] .giveaway-sync-step-4 {
  opacity: 0;
  transform: translateY(10px);
}

/* Animate steps when screen is active */
.hero-mockup__screen.is-active[data-screen="giveaway-sync"] .giveaway-sync-step-1 {
  animation: giveawaySyncFadeIn 0.5s ease forwards;
  animation-delay: 0ms;
}

.hero-mockup__screen.is-active[data-screen="giveaway-sync"] .giveaway-sync-step-2 {
  animation: giveawaySyncFadeIn 0.5s ease forwards;
  animation-delay: 800ms;
}

.hero-mockup__screen.is-active[data-screen="giveaway-sync"] .giveaway-sync-step-3 {
  animation: giveawaySyncFadeIn 0.5s ease forwards;
  animation-delay: 1600ms;
}

.hero-mockup__screen.is-active[data-screen="giveaway-sync"] .giveaway-sync-step-4 {
  animation: giveawaySyncFadeIn 0.5s ease forwards;
  animation-delay: 2400ms;
}

@keyframes giveawaySyncFadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Sequential animation for instant win sync flow */
[data-screen="instantwin-sync"] .giveaway-sync-step-1 {
  opacity: 0;
  transform: translateY(10px);
}

[data-screen="instantwin-sync"] .giveaway-sync-step-2 {
  opacity: 0;
  transform: translateY(10px);
}

[data-screen="instantwin-sync"] .giveaway-sync-step-3 {
  opacity: 0;
  transform: translateY(10px);
}

[data-screen="instantwin-sync"] .giveaway-sync-step-4 {
  opacity: 0;
  transform: translateY(10px);
}

/* Animate steps when screen is active */
.hero-mockup__screen.is-active[data-screen="instantwin-sync"] .giveaway-sync-step-1 {
  animation: giveawaySyncFadeIn 0.5s ease forwards;
  animation-delay: 0ms;
}

.hero-mockup__screen.is-active[data-screen="instantwin-sync"] .giveaway-sync-step-2 {
  animation: giveawaySyncFadeIn 0.5s ease forwards;
  animation-delay: 800ms;
}

.hero-mockup__screen.is-active[data-screen="instantwin-sync"] .giveaway-sync-step-3 {
  animation: giveawaySyncFadeIn 0.5s ease forwards;
  animation-delay: 1600ms;
}

.hero-mockup__screen.is-active[data-screen="instantwin-sync"] .giveaway-sync-step-4 {
  animation: giveawaySyncFadeIn 0.5s ease forwards;
  animation-delay: 2400ms;
}

/* ============================================
   GIVEAWAY PROFILE ADDITIONS
   ============================================ */

.mockup-profile__phone {
  font-size: 0.6875rem;
  color: #6b7280;
  margin-top: 0.125rem;
}

.mockup-profile__value--sms {
  color: #059669;
  font-weight: 500;
}

.mockup-profile__value--giveaway {
  color: var(--tab-giveaways-accent, #d97706);
  font-weight: 600;
}

.mockup-profile__tag--giveaway {
  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
  color: #92400e;
}

/* Survey profile value styles */
.mockup-profile__value--survey {
  color: var(--tab-surveys-accent, #0d9488);
  font-weight: 600;
}

.mockup-profile__value--coupon {
  color: #059669;
  font-weight: 500;
}

/* Instant Win profile value styles */
.mockup-profile__value--instantwin {
  color: var(--tab-instantwin-accent, #dc2626);
  font-weight: 600;
}

.mockup-profile__section-header {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.6875rem;
  font-weight: 600;
  color: #6b7280;
  margin: 0.625rem 0 0.375rem 0;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.mockup-profile__section-header i {
  color: var(--tab-giveaways-accent, #d97706);
}

/* Responsive adjustments for branching flow */
@media (max-width: 767px) {
  .mockup-vertical-flow__step--branching {
    flex-direction: column;
    align-items: center;
  }

  .mockup-vertical-flow__branch {
    flex-direction: column;
    align-items: center;
    margin-top: 0.5rem;
  }

  .mockup-horizontal-flow__connector {
    flex-direction: column;
    padding: 4px 0;
    margin-top: 0;
  }

  /* Hide cursor on mobile for combined screen */
  [data-screen="giveaway-combined"] .mockup-option--cursor-target::after { display: none; }
  .hero-mockup__screen.is-active[data-screen="giveaway-combined"] .mockup-option--cursor-target {
    animation: none;
    border-color: var(--tab-giveaways-accent, #d97706);
    background: rgba(217, 119, 6, 0.05);
  }

  /* Giveaway profile mobile - hide tags to fit content */
  [data-screen="giveaway-profile"] .mockup-profile__tag {
    display: none;
  }
}

/* ============================================
   TAB-SPECIFIC COLOR OVERRIDES
   Each tab gets its own background + accent colors
   ============================================ */

/* Forms Tab (Tab 1) - Blue (default/brand) */
[data-w-tab="Tab 1"] .hero-mockup {
  background: linear-gradient(135deg, var(--tab-forms-bg-start) 0%, var(--tab-forms-bg-end) 100%);
}
[data-w-tab="Tab 1"] .mockup-badge {
  background: var(--tab-forms-badge-bg);
  color: var(--tab-forms-badge-text);
}
[data-w-tab="Tab 1"] .mockup-button {
  background: var(--tab-forms-accent);
}
[data-w-tab="Tab 1"] .mockup-option.is-selected {
  border-color: var(--tab-forms-accent);
  background: rgba(75, 167, 238, 0.05);
}

/* Quizzes Tab (Tab 2) - Purple */
[data-w-tab="Tab 2"] .hero-mockup {
  background: linear-gradient(135deg, var(--tab-quizzes-bg-start) 0%, var(--tab-quizzes-bg-end) 100%);
}
[data-w-tab="Tab 2"] .mockup-badge {
  background: var(--tab-quizzes-badge-bg);
  color: var(--tab-quizzes-badge-text);
}
[data-w-tab="Tab 2"] .mockup-button {
  background: var(--tab-quizzes-accent);
}
[data-w-tab="Tab 2"] .mockup-option.is-selected {
  border-color: var(--tab-quizzes-accent);
  background: rgba(139, 92, 246, 0.05);
}
[data-w-tab="Tab 2"] .hero_tab-tagline {
  color: var(--tab-quizzes-accent);
}
[data-w-tab="Tab 2"] .hero_tab-feature-icon {
  background-color: var(--tab-quizzes-accent);
}
/* Purple cursor animation for quiz selections */
[data-w-tab="Tab 2"] .hero-mockup__screen.is-active .mockup-option--cursor-target {
  border-color: var(--tab-quizzes-accent);
  background: rgba(139, 92, 246, 0.05);
}

/* Giveaways Tab (Tab 3) - Amber */
[data-w-tab="Tab 3"] .hero-mockup {
  background: linear-gradient(135deg, var(--tab-giveaways-bg-start) 0%, var(--tab-giveaways-bg-end) 100%);
}
[data-w-tab="Tab 3"] .mockup-badge {
  background: var(--tab-giveaways-badge-bg);
  color: var(--tab-giveaways-badge-text);
}
[data-w-tab="Tab 3"] .mockup-button,
[data-w-tab="Tab 3"] .mockup-button--giveaway {
  background: var(--tab-giveaways-accent);
}
[data-w-tab="Tab 3"] .mockup-entry-badge {
  background: var(--tab-giveaways-badge-bg);
  color: var(--tab-giveaways-badge-text);
}
[data-w-tab="Tab 3"] .hero_tab-tagline {
  color: var(--tab-giveaways-accent);
}
[data-w-tab="Tab 3"] .hero_tab-feature-icon {
  background-color: var(--tab-giveaways-accent);
}
/* Highlight badge starts light yellow, turns dark after cursor click */
[data-w-tab="Tab 3"] .mockup-entry-badge--highlight {
  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
  color: #d97706;
}

/* Animate badge to dark after cursor click (at 70% of 4s = 2.8s) */
.hero-mockup__screen.is-active[data-screen="giveaway-combined"] .mockup-option--cursor-target .mockup-entry-badge--highlight {
  animation: giveawayBadgeHighlight 4s ease forwards;
}

@keyframes giveawayBadgeHighlight {
  0%, 68% {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    color: #d97706;
  }
  72%, 100% {
    background: var(--tab-giveaways-accent, #d97706);
    color: white;
  }
}

[data-w-tab="Tab 3"] .mockup-option.is-selected,
[data-w-tab="Tab 3"] .hero-mockup__screen.is-active .mockup-option--cursor-target {
  border-color: var(--tab-giveaways-accent);
  background: rgba(217, 119, 6, 0.05);
}
[data-w-tab="Tab 3"] .mockup-result__check--gift {
  background: var(--tab-giveaways-badge-bg);
  color: var(--tab-giveaways-accent);
}
[data-w-tab="Tab 3"] .mockup-entry-total {
  color: var(--tab-giveaways-accent);
}

/* Surveys Tab (Tab 4) - Teal */
[data-w-tab="Tab 4"] .hero-mockup {
  background: linear-gradient(135deg, var(--tab-surveys-bg-start) 0%, var(--tab-surveys-bg-end) 100%);
}
[data-w-tab="Tab 4"] .mockup-badge {
  background: var(--tab-surveys-badge-bg);
  color: var(--tab-surveys-badge-text);
}
[data-w-tab="Tab 4"] .mockup-button {
  background: var(--tab-surveys-accent);
}
[data-w-tab="Tab 4"] .mockup-option.is-selected {
  border-color: var(--tab-surveys-accent);
  background: rgba(13, 148, 136, 0.05);
}

/* Instant Win Tab (Tab 5) - Rose */
[data-w-tab="Tab 5"] .hero-mockup {
  background: linear-gradient(135deg, var(--tab-instantwin-bg-start) 0%, var(--tab-instantwin-bg-end) 100%);
}
[data-w-tab="Tab 5"] .mockup-badge {
  background: var(--tab-instantwin-badge-bg);
  color: var(--tab-instantwin-badge-text);
}
[data-w-tab="Tab 5"] .mockup-button {
  background: var(--tab-instantwin-accent);
}
[data-w-tab="Tab 5"] .mockup-option.is-selected {
  border-color: var(--tab-instantwin-accent);
  background: rgba(220, 38, 38, 0.05);
}

/* Customer Intelligence Tab (Tab 6) - Indigo */
[data-w-tab="Tab 6"] .hero-mockup {
  background: linear-gradient(135deg, var(--tab-intelligence-bg-start) 0%, var(--tab-intelligence-bg-end) 100%);
}
[data-w-tab="Tab 6"] .mockup-badge {
  background: var(--tab-intelligence-badge-bg);
  color: var(--tab-intelligence-badge-text);
}
[data-w-tab="Tab 6"] .mockup-button {
  background: var(--tab-intelligence-accent);
}
[data-w-tab="Tab 6"] .mockup-option.is-selected {
  border-color: var(--tab-intelligence-accent);
  background: rgba(79, 70, 229, 0.05);
}

/* Surveys Tab (Tab 4) - Tagline & Feature Icons */
[data-w-tab="Tab 4"] .hero_tab-tagline {
  color: var(--tab-surveys-accent);
}
[data-w-tab="Tab 4"] .hero_tab-feature-icon {
  background-color: var(--tab-surveys-accent);
}

/* Instant Win Tab (Tab 5) - Tagline & Feature Icons */
[data-w-tab="Tab 5"] .hero_tab-tagline {
  color: var(--tab-instantwin-accent);
}
[data-w-tab="Tab 5"] .hero_tab-feature-icon {
  background-color: var(--tab-instantwin-accent);
}

/* Customer Intelligence Tab (Tab 6) - Tagline & Feature Icons */
[data-w-tab="Tab 6"] .hero_tab-tagline {
  color: var(--tab-intelligence-accent);
}
[data-w-tab="Tab 6"] .hero_tab-feature-icon {
  background-color: var(--tab-intelligence-accent);
}

/* ============================================
   SURVEYS TAB COMPONENTS (Tab 4)
   NPS Scale, Follow-up Form
   ============================================ */

/* NPS Scale Container */
.nps-scale {
  display: flex;
  gap: 3px;
  justify-content: center;
  margin-bottom: 0.5rem;
}

.nps-button {
  width: 24px;
  height: 24px;
  border: 1px solid #e5e7eb;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 500;
  color: #6b7280;
  background: white;
  transition: all 0.2s ease;
}

.nps-button.is-selected {
  background: var(--tab-surveys-accent);
  color: white;
  border-color: var(--tab-surveys-accent);
}

/* NPS cursor target - styles applied via animation, not statically */

/* NPS scale labels */
.nps-labels {
  display: flex;
  justify-content: space-between;
  font-size: 9px;
  color: #9ca3af;
  margin-top: 4px;
}

/* Survey radio options */
.survey-radio-options {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.survey-radio-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: white;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  font-size: 0.875rem;
  color: #374151;
  transition: all 0.2s ease;
}

/* Note: cursor-target styles applied via animation, not statically */

.survey-radio {
  width: 18px;
  height: 18px;
  border: 2px solid #d1d5db;
  border-radius: 50%;
  flex-shrink: 0;
  position: relative;
}

.survey-radio--selected {
  border-color: var(--tab-surveys-accent);
}

.survey-radio--selected::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 8px;
  height: 8px;
  background: var(--tab-surveys-accent);
  border-radius: 50%;
}

/* Survey follow-up textarea */
.mockup-textarea {
  width: 100%;
  min-height: 50px;
  padding: 0.625rem;
  border: 1px solid #e5e7eb;
  border-radius: 0.5rem;
  background: #f9fafb;
  font-size: 0.75rem;
  color: #374151;
  resize: none;
  font-family: inherit;
}

/* Survey result icon (gift) */
.mockup-result__check--survey {
  background: #ccfbf1;
  color: var(--tab-surveys-accent);
}

/* Survey button styling */
.mockup-button--survey {
  background: var(--tab-surveys-accent);
  color: white;
  border: none;
}

.mockup-button--survey:hover {
  background: #0f766e;
}

/* Survey email form layout */
.survey-email-form {
  width: 100%;
  max-width: 220px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
}

.survey-email-form .mockup-input {
  width: 100%;
  box-sizing: border-box;
}

.survey-email-form .mockup-input--typing {
  min-height: 2.75rem;
}

.survey-email-form .mockup-input--typing::before {
  display: block;
  min-width: 100px;
}

.survey-email-form .mockup-button {
  width: 100%;
  box-sizing: border-box;
}

/* Survey thanks screen - tighter layout */
[data-screen="survey-thanks"] .mockup-card {
  padding: 1.5rem;
}

[data-screen="survey-thanks"] .mockup-result {
  padding: 0;
}

[data-screen="survey-thanks"] .mockup-result__check {
  margin-bottom: 0.75rem;
}

/* Survey email form - fades out and collapses after submit */
.hero-mockup__screen.is-active[data-screen="survey-thanks"] .survey-email-form {
  animation: surveyFormFadeOut 5s ease forwards;
}

.hero-mockup__screen.is-active[data-screen="survey-thanks"] .survey-email-prompt {
  animation: surveyPromptFadeOut 5s ease forwards;
}

@keyframes surveyFormFadeOut {
  0%, 55% { opacity: 1; max-height: 120px; margin-bottom: 0; }
  70%, 100% { opacity: 0; max-height: 0; margin-bottom: 0; overflow: hidden; pointer-events: none; }
}

@keyframes surveyPromptFadeOut {
  0%, 55% { opacity: 1; max-height: 30px; margin-bottom: 0.75rem; }
  70%, 100% { opacity: 0; max-height: 0; margin-bottom: 0; overflow: hidden; }
}

/* Survey coupon reveal animation */
.survey-coupon-reveal {
  opacity: 0;
  text-align: center;
  max-height: 0;
  overflow: hidden;
}

.hero-mockup__screen.is-active[data-screen="survey-thanks"] .survey-coupon-reveal {
  animation: surveyRevealCoupon 5s ease forwards;
}

@keyframes surveyRevealCoupon {
  0%, 60% { opacity: 0; max-height: 0; }
  75%, 100% { opacity: 1; max-height: 100px; margin-top: 0.5rem; }
}

/* ============================================
   SURVEY CURSOR ANIMATIONS
   Screen 1: Click TikTok option
   Screen 2: Click NPS 9, type, click Submit
   ============================================ */

/* Screen 1: How did you hear about us - cursor clicks TikTok */
[data-screen="survey-source"] .survey-radio-option--cursor-target {
  position: relative;
  overflow: visible;
}

[data-screen="survey-source"] .survey-radio-option--cursor-target::after {
  content: '';
  position: absolute;
  width: 18px;
  height: 18px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23111' stroke='%23fff' stroke-width='1.5' d='M5.5 3.21V20.8c0 .45.54.67.85.35l4.86-4.86a.5.5 0 0 1 .35-.15h6.87c.48 0 .72-.58.38-.92L6.35 2.85a.5.5 0 0 0-.85.36Z'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0;
  pointer-events: none;
  z-index: 10;
}

.hero-mockup__screen.is-active[data-screen="survey-source"] .survey-radio-option--cursor-target::after {
  animation: surveyCursorClick 4s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

.hero-mockup__screen.is-active[data-screen="survey-source"] .survey-radio-option--cursor-target {
  animation: surveyOptionSelect 4s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

.hero-mockup__screen.is-active[data-screen="survey-source"] .survey-radio-option--cursor-target .survey-radio {
  animation: surveyRadioSelect 4s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

@keyframes surveyCursorClick {
  0%, 45% { opacity: 0; transform: translateY(-50%) translate(-30px, -40px); }
  55% { opacity: 1; transform: translateY(-50%) translate(0, 0); }
  70% { transform: translateY(-50%) translate(0, 2px) scale(0.95); }
  75%, 100% { opacity: 1; transform: translateY(-50%) translate(0, 0); }
}

@keyframes surveyOptionSelect {
  0%, 68% { border-color: #e5e7eb; background: white; }
  72%, 100% { border-color: var(--tab-surveys-accent); background: rgba(13, 148, 136, 0.05); }
}

@keyframes surveyRadioSelect {
  0%, 68% {
    border-color: #d1d5db;
    box-shadow: none;
  }
  72%, 100% {
    border-color: var(--tab-surveys-accent);
    box-shadow: inset 0 0 0 4px var(--tab-surveys-accent);
  }
}

/* Screen 2: NPS + feedback - cursor clicks 9, then Submit */
[data-screen="survey-nps-combined"] .nps-button--cursor-target {
  position: relative;
  overflow: visible;
}

[data-screen="survey-nps-combined"] .nps-button--cursor-target::after {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23111' stroke='%23fff' stroke-width='1.5' d='M5.5 3.21V20.8c0 .45.54.67.85.35l4.86-4.86a.5.5 0 0 1 .35-.15h6.87c.48 0 .72-.58.38-.92L6.35 2.85a.5.5 0 0 0-.85.36Z'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  left: 50%;
  bottom: -12px;
  transform: translateX(-50%);
  opacity: 0;
  pointer-events: none;
  z-index: 10;
}

.hero-mockup__screen.is-active[data-screen="survey-nps-combined"] .nps-button--cursor-target::after {
  animation: npsCursorClick 6s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

.hero-mockup__screen.is-active[data-screen="survey-nps-combined"] .nps-button--cursor-target {
  animation: npsButtonSelect 6s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

@keyframes npsCursorClick {
  0%, 8% { opacity: 0; transform: translateX(-50%) translate(-20px, -30px); }
  15% { opacity: 1; transform: translateX(-50%) translate(0, 0); }
  20% { transform: translateX(-50%) translate(0, 2px) scale(0.95); }
  25%, 30% { opacity: 1; transform: translateX(-50%) translate(0, 0); }
  35%, 100% { opacity: 0; }
}

@keyframes npsButtonSelect {
  0%, 18% { background: white; color: #6b7280; border-color: #e5e7eb; }
  22%, 100% { background: var(--tab-surveys-accent); color: white; border-color: var(--tab-surveys-accent); }
}

/* Delay typing animation until after NPS is clicked */
.hero-mockup__screen.is-active[data-screen="survey-nps-combined"] .mockup-input--typing::before {
  animation: hidePlaceholderDelayed 6s ease forwards;
}

.hero-mockup__screen.is-active[data-screen="survey-nps-combined"] .mockup-input--typing::after {
  animation: typeTextDelayed 6s ease forwards;
}

@keyframes hidePlaceholderDelayed {
  0%, 28% { opacity: 1; }  /* Wait for NPS click (~1.7s) then show placeholder */
  38%, 100% { opacity: 0; }
}

@keyframes typeTextDelayed {
  0%, 28% { width: 0; opacity: 0; }  /* Wait for NPS click */
  32% { width: 0; opacity: 1; }       /* Start typing at ~1.9s */
  50%, 100% { width: 100%; opacity: 1; }  /* Finish by ~3s */
}

/* Submit button cursor animation */
[data-screen="survey-nps-combined"] .mockup-button--cursor-target {
  position: relative;
  overflow: visible;
}

[data-screen="survey-nps-combined"] .mockup-button--cursor-target::after {
  content: '';
  position: absolute;
  width: 18px;
  height: 18px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23111' stroke='%23fff' stroke-width='1.5' d='M5.5 3.21V20.8c0 .45.54.67.85.35l4.86-4.86a.5.5 0 0 1 .35-.15h6.87c.48 0 .72-.58.38-.92L6.35 2.85a.5.5 0 0 0-.85.36Z'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0;
  pointer-events: none;
  z-index: 10;
}

.hero-mockup__screen.is-active[data-screen="survey-nps-combined"] .mockup-button--cursor-target::after {
  animation: submitCursorClick 6s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

.hero-mockup__screen.is-active[data-screen="survey-nps-combined"] .mockup-button--cursor-target {
  animation: submitButtonClick 6s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

@keyframes submitCursorClick {
  0%, 55% { opacity: 0; transform: translateY(-50%) translate(-40px, -30px); }
  65% { opacity: 1; transform: translateY(-50%) translate(0, 0); }
  72% { transform: translateY(-50%) translate(0, 2px) scale(0.95); }
  78%, 100% { opacity: 1; transform: translateY(-50%) translate(0, 0); }
}

@keyframes submitButtonClick {
  0%, 70% { transform: scale(1); }
  75% { transform: scale(0.97); }
  80%, 100% { transform: scale(1); }
}

/* Mobile: hide cursors, show pre-selected state */
@media (max-width: 767px) {
  [data-screen="survey-source"] .survey-radio-option--cursor-target::after,
  [data-screen="survey-nps-combined"] .nps-button--cursor-target::after,
  [data-screen="survey-nps-combined"] .mockup-button--cursor-target::after {
    display: none;
  }
  .hero-mockup__screen[data-screen="survey-source"] .survey-radio-option--cursor-target {
    border-color: var(--tab-surveys-accent);
    background: rgba(13, 148, 136, 0.05);
    animation: none;
  }
  .hero-mockup__screen[data-screen="survey-source"] .survey-radio-option--cursor-target .survey-radio {
    border-color: var(--tab-surveys-accent);
    box-shadow: inset 0 0 0 4px var(--tab-surveys-accent);
    animation: none;
  }
  .hero-mockup__screen[data-screen="survey-nps-combined"] .nps-button--cursor-target {
    background: var(--tab-surveys-accent);
    color: white;
    border-color: var(--tab-surveys-accent);
    animation: none;
  }
}

/* Reduced motion: disable cursor animations */
@media (prefers-reduced-motion: reduce) {
  [data-screen="survey-source"] .survey-radio-option--cursor-target::after,
  [data-screen="survey-nps-combined"] .nps-button--cursor-target::after,
  [data-screen="survey-nps-combined"] .mockup-button--cursor-target::after {
    display: none;
  }
  .hero-mockup__screen.is-active[data-screen="survey-source"] .survey-radio-option--cursor-target,
  .hero-mockup__screen.is-active[data-screen="survey-nps-combined"] .nps-button--cursor-target {
    animation: none;
  }
}

/* ============================================
   INSTANT WIN TAB COMPONENTS (Tab 5)
   Spin Wheel, Prize Display
   ============================================ */

/* Spin wheel container */
.spin-wheel-container {
  position: relative;
  width: 90px;
  height: 90px;
  margin: 0 auto 0.75rem;
}

/* Spin wheel */
.spin-wheel {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: conic-gradient(
    #f87171 0deg 45deg,
    #fef2f2 45deg 90deg,
    #f87171 90deg 135deg,
    #fef2f2 135deg 180deg,
    #f87171 180deg 225deg,
    #fef2f2 225deg 270deg,
    #f87171 270deg 315deg,
    #fef2f2 315deg 360deg
  );
  position: relative;
  box-shadow: 0 4px 12px rgba(220, 38, 38, 0.2);
  border: 3px solid #dc2626;
}

/* Wheel center */
.spin-wheel::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 26px;
  height: 26px;
  background: linear-gradient(135deg, #fff 0%, #fee2e2 100%);
  border-radius: 50%;
  border: 2px solid #dc2626;
  box-shadow: 0 2px 6px rgba(220, 38, 38, 0.25);
}

/* Wheel pointer */
.spin-wheel-pointer {
  position: absolute;
  top: -6px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 12px solid var(--tab-instantwin-accent);
  z-index: 2;
}

/* Spinning animation */
.spin-wheel.is-spinning {
  animation: spinWheel 0.4s linear infinite;
}

@keyframes spinWheel {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Larger wheel variant */
.spin-wheel-container--large {
  width: 120px;
  height: 120px;
}

.spin-wheel-container--large .spin-wheel::after {
  width: 32px;
  height: 32px;
}

.spin-wheel-container--large + div {
  margin-top: 0.25rem;
}

/* Spinning and landing animation - only starts when screen is active */
.spin-wheel.is-spinning-landing {
  /* Animation only triggers when parent screen is active */
}

.hero-mockup__screen.is-active .spin-wheel.is-spinning-landing {
  animation: spinWheelLanding 2.8s cubic-bezier(0.17, 0.67, 0.12, 0.99) forwards;
}

@keyframes spinWheelLanding {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(1462deg); } /* Lands on rose segment (winner) */
}

/* Instant Win form typing animation - specific order */
/* Email field types first */
.hero-mockup__screen.is-active[data-screen="instantwin-form"] .mockup-card > .mockup-input--typing::before {
  animation: hidePlaceholder 2s ease forwards;
  animation-delay: 0.3s;
}
.hero-mockup__screen.is-active[data-screen="instantwin-form"] .mockup-card > .mockup-input--typing::after {
  animation: typeText 2s ease forwards;
  animation-delay: 0.3s;
}

/* Name fields type second (inside .mockup-input-row) */
.hero-mockup__screen.is-active[data-screen="instantwin-form"] .mockup-input-row .mockup-input--typing::before {
  animation: hidePlaceholder 1.5s ease forwards;
  animation-delay: 1.5s;
}
.hero-mockup__screen.is-active[data-screen="instantwin-form"] .mockup-input-row .mockup-input--typing::after {
  animation: typeText 1.5s ease forwards;
  animation-delay: 1.5s;
}

/* Instant Win form cursor click on submit button */
[data-screen="instantwin-form"] .mockup-button--cursor-target {
  position: relative;
}

[data-screen="instantwin-form"] .mockup-button--cursor-target::after {
  content: '';
  position: absolute;
  width: 20px;
  height: 20px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M4 0l16 12.279-6.951 1.17 4.325 8.817-3.596 1.734-4.35-8.879-5.428 4.702z'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  filter: drop-shadow(1px 1px 1px rgba(0,0,0,0.3));
  opacity: 0;
  pointer-events: none;
  z-index: 10;
}

/* Instant Win form - cursor click animation (matches Forms tab pattern) */
[data-screen="instantwin-form"] .mockup-button--cursor-target {
  position: relative;
  overflow: visible;
}

[data-screen="instantwin-form"] .mockup-button--cursor-target::after {
  content: '';
  position: absolute;
  width: 20px;
  height: 20px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23111' stroke='%23fff' stroke-width='1.5' d='M5.5 3.21V20.8c0 .45.54.67.85.35l4.86-4.86a.5.5 0 0 1 .35-.15h6.87c.48 0 .72-.58.38-.92L6.35 2.85a.5.5 0 0 0-.85.36Z'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  right: 20px;
  bottom: 10px;
  transform-origin: top left;
  opacity: 0;
  transform: translate(-50px, -80px);
  pointer-events: none;
  z-index: 100;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.15));
}

/* Cursor animation - 4s total, cursor appears after typing (~3s) */
.hero-mockup__screen.is-active[data-screen="instantwin-form"] .mockup-button--cursor-target::after {
  animation: instantwinCursorClick 4s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

/* Button press animation - synced with cursor */
.hero-mockup__screen.is-active[data-screen="instantwin-form"] .mockup-button--cursor-target {
  animation: instantwinButtonClick 4s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

@keyframes instantwinCursorClick {
  /* Phase 1: Hidden while typing (0-70%) = 0-2.8s */
  0%, 68% {
    opacity: 0;
    transform: translate(-50px, -80px) scale(1);
  }
  /* Phase 2: Fade in (70-75%) */
  75% {
    opacity: 1;
    transform: translate(-50px, -80px) scale(1);
  }
  /* Phase 3: Move to button (75-88%) */
  88% {
    opacity: 1;
    transform: translate(0, 0) scale(1);
  }
  /* Phase 4: Click press (88-92%) */
  92% {
    transform: translate(0, 0) scale(0.85);
  }
  /* Phase 5: Click release (92-96%) */
  96% {
    transform: translate(0, 0) scale(1);
  }
  /* Phase 6: Hold */
  100% {
    opacity: 1;
    transform: translate(0, 0) scale(1);
  }
}

@keyframes instantwinButtonClick {
  /* Wait for cursor to arrive (0-88%) */
  0%, 88% {
    transform: scale(1);
    filter: brightness(1);
  }
  /* Press down when cursor clicks (92%) */
  92% {
    transform: scale(0.97);
    filter: brightness(1.1);
  }
  /* Release (96-100%) */
  96%, 100% {
    transform: scale(1);
    filter: brightness(1);
  }
}

/* Instant Win spin-reveal screen animations */
.instantwin-wheel-section {
  opacity: 1;
  transition: opacity 0.4s ease;
}

.instantwin-winner-section {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  opacity: 0;
  pointer-events: none;
}

/* Animate wheel out and winner in when screen is active */
.hero-mockup__screen.is-active[data-screen="instantwin-spin-reveal"] .instantwin-wheel-section {
  animation: wheelFadeOut 0.5s ease forwards;
  animation-delay: 3200ms;
}

.hero-mockup__screen.is-active[data-screen="instantwin-spin-reveal"] .instantwin-winner-section {
  animation: winnerFadeIn 0.5s ease forwards;
  animation-delay: 3400ms;
}

@keyframes wheelFadeOut {
  0% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes winnerFadeIn {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.9);
  }
  100% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

/* Winner celebration */
.winner-celebration {
  font-size: 2rem;
  margin-bottom: 0.5rem;
}

/* Coupon code display */
.coupon-code {
  display: inline-block;
  padding: 0.375rem 0.75rem;
  background: #f3f4f6;
  border: 1px dashed #d1d5db;
  border-radius: 0.375rem;
  font-family: monospace;
  font-size: 0.875rem;
  font-weight: 600;
  color: #374151;
  letter-spacing: 0.05em;
}

.coupon-code--survey {
  background: #ccfbf1;
  border-color: var(--tab-surveys-accent);
  color: #0f766e;
}

/* Instant win coupon code */
.coupon-code--win {
  background: #fee2e2;
  border-color: var(--tab-instantwin-accent);
  color: #991b1b;
}

/* Instant win result icon */
.mockup-result__check--win {
  background: #fee2e2;
  color: var(--tab-instantwin-accent);
}

/* Instant win winner text styles */
.instantwin-winner-label {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--tab-instantwin-accent);
  margin-bottom: 0.375rem;
}

.instantwin-prize-name {
  font-size: 1.125rem;
  font-weight: 700;
  color: #1f2937;
  margin-bottom: 0.75rem;
}

/* ============================================
   CUSTOMER INTELLIGENCE TAB COMPONENTS (Tab 6)
   Skeleton Loading, Profile Building
   ============================================ */

/* Skeleton pulse animation */
@keyframes skeletonPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

.skeleton-pulse {
  animation: skeletonPulse 1.5s ease-in-out infinite;
}

/* Skeleton elements */
.skeleton-avatar {
  width: 40px;
  height: 40px;
  background: #e5e7eb;
  border-radius: 50%;
}

.skeleton-line {
  height: 10px;
  background: #e5e7eb;
  border-radius: 4px;
}

.skeleton-line--short {
  width: 60px;
}

.skeleton-line--medium {
  width: 100px;
}

/* Profile header */
.profile-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.profile-avatar {
  width: 40px;
  height: 40px;
  background: #dbeafe;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--tab-intelligence-accent);
  font-weight: 600;
  font-size: 0.875rem;
}

.profile-info {
  flex: 1;
}

.profile-name {
  font-weight: 600;
  font-size: 0.875rem;
  color: #1f2937;
  margin-bottom: 2px;
}

.profile-email {
  font-size: 0.6875rem;
  color: #6b7280;
}

/* Profile progress bar */
.profile-progress {
  height: 6px;
  background: #e5e7eb;
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 0.5rem;
}

.profile-progress__bar {
  height: 100%;
  background: linear-gradient(90deg, var(--tab-intelligence-accent), #818cf8);
  border-radius: 3px;
  transition: width 0.8s ease-out;
}

/* Profile tags */
.profile-tags {
  display: flex;
  gap: 0.375rem;
  flex-wrap: wrap;
}

.profile-tag {
  padding: 0.25rem 0.5rem;
  background: #f3f4f6;
  border-radius: 0.25rem;
  font-size: 0.6875rem;
  color: #4b5563;
  font-weight: 500;
}

.profile-tag--vip {
  background: var(--tab-intelligence-badge-bg);
  color: var(--tab-intelligence-badge-text);
}

/* Profile insights */
.profile-insights {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.profile-insight {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.75rem;
  color: #374151;
}

.profile-insight__icon {
  width: 18px;
  height: 18px;
  background: #f3f4f6;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #6b7280;
  font-size: 0.625rem;
}

/* Intelligence result check */
.mockup-result__check--intelligence {
  background: #e0e7ff;
  color: var(--tab-intelligence-accent);
}

/* ============================================
   CUSTOMER INTELLIGENCE - MAGNETIC ATTRACTION
   Data chips scatter then converge toward profile center
   ============================================ */

/* Custom easing variables */
:root {
  --ease-magnetic: cubic-bezier(0.25, 0.1, 0.25, 1);
  --ease-magnetic-in: cubic-bezier(0.55, 0.085, 0.68, 0.53);
  --ease-bounce-out: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Container for magnetic animation */
.intel-magnetic {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Central profile silhouette - the "magnet" */
.intel-magnetic__center {
  position: relative;
  width: 140px;
  height: 140px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 10;
}

/* Pulsing attraction field rings - only animate when screen active */
.intel-magnetic__field {
  position: absolute;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  border: 2px solid var(--tab-intelligence-accent);
  opacity: 0;
}

/* Start pulse animation when screen is active */
.hero-mockup__screen.is-active .intel-magnetic__field {
  animation: magneticFieldPulse 2s ease-out infinite;
}

.hero-mockup__screen.is-active .intel-magnetic__field:nth-child(2) {
  animation-delay: 0.6s;
}

.hero-mockup__screen.is-active .intel-magnetic__field:nth-child(3) {
  animation-delay: 1.2s;
}

@keyframes magneticFieldPulse {
  0% {
    transform: scale(0.5);
    opacity: 0.6;
  }
  100% {
    transform: scale(1.8);
    opacity: 0;
  }
}

/* Central hub circle */
.intel-magnetic__hub {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--tab-intelligence-accent) 0%, #6366f1 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 1.5rem;
  box-shadow: 0 8px 32px rgba(79, 70, 229, 0.35);
  z-index: 5;
}

/* Hub label */
.intel-magnetic__label {
  position: absolute;
  bottom: 10px;
  font-size: 0.5625rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--tab-intelligence-accent);
  text-transform: uppercase;
  background: rgba(224, 231, 255, 0.9);
  padding: 4px 10px;
  border-radius: 10px;
}

/* Data chips - start at scattered positions, animate when screen is active */
.intel-chip {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  background: white;
  border-radius: 8px;
  font-size: 0.625rem;
  font-weight: 600;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  z-index: 15;
  /* Starting positions via custom properties */
  --start-x: 0px;
  --start-y: 0px;
  /* Start visible at scattered positions */
  opacity: 1;
  transform: translate(var(--start-x), var(--start-y)) scale(1);
  /* No animation by default - waits for screen active */
}

/* Only animate when screen is active */
.hero-mockup__screen.is-active .intel-chip {
  animation: chipMagneticPull 1.8s var(--ease-magnetic) forwards;
}

/* Chip icons */
.intel-chip__icon {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.625rem;
  flex-shrink: 0;
}

/* Chip color variations - positions and colors */
.intel-chip--forms {
  --start-x: -100px;
  --start-y: -90px;
}
.intel-chip--forms .intel-chip__icon {
  background: #dbeafe;
  color: #4ba7ee;
}

.intel-chip--quizzes {
  --start-x: 110px;
  --start-y: -70px;
}
.intel-chip--quizzes .intel-chip__icon {
  background: #ede9fe;
  color: #8b5cf6;
}

.intel-chip--giveaways {
  --start-x: -120px;
  --start-y: 40px;
}
.intel-chip--giveaways .intel-chip__icon {
  background: #fef3c7;
  color: #f59e0b;
}

.intel-chip--surveys {
  --start-x: 95px;
  --start-y: 80px;
}
.intel-chip--surveys .intel-chip__icon {
  background: #d1fae5;
  color: #10b981;
}

.intel-chip--instantwin {
  --start-x: -30px;
  --start-y: 100px;
}
.intel-chip--instantwin .intel-chip__icon {
  background: #fce7f3;
  color: #ec4899;
}

/* Staggered animation delays - only when screen is active */
.hero-mockup__screen.is-active .intel-chip--forms { animation-delay: 0.2s; }
.hero-mockup__screen.is-active .intel-chip--quizzes { animation-delay: 0.5s; }
.hero-mockup__screen.is-active .intel-chip--giveaways { animation-delay: 0.8s; }
.hero-mockup__screen.is-active .intel-chip--surveys { animation-delay: 1.1s; }
.hero-mockup__screen.is-active .intel-chip--instantwin { animation-delay: 1.4s; }

/* Magnetic pull animation - chips move toward center and shrink */
@keyframes chipMagneticPull {
  0% {
    transform: translate(var(--start-x), var(--start-y)) scale(1);
    opacity: 1;
  }
  30% {
    transform: translate(calc(var(--start-x) * 0.6), calc(var(--start-y) * 0.6)) scale(1);
    opacity: 1;
  }
  60% {
    transform: translate(calc(var(--start-x) * 0.15), calc(var(--start-y) * 0.15)) scale(0.85);
    opacity: 1;
  }
  80% {
    transform: translate(0, 0) scale(0.6);
    opacity: 0.9;
  }
  100% {
    transform: translate(0, 0) scale(0.4);
    opacity: 0.7;
  }
}

/* Arrival flash effect on hub */
.intel-magnetic__hub::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: white;
  opacity: 0;
  animation: hubFlash 0.3s ease-out forwards;
  animation-delay: 1.6s;
}

@keyframes hubFlash {
  0% { opacity: 0; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(1.2); }
  100% { opacity: 0; transform: scale(1.5); }
}

/* Progress indicator that fills as chips arrive */
.intel-magnetic__progress {
  position: absolute;
  bottom: -20px;
  width: 100px;
  height: 4px;
  background: rgba(79, 70, 229, 0.1);
  border-radius: 2px;
  overflow: hidden;
}

.intel-magnetic__progress-fill {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--tab-intelligence-accent), #818cf8);
  border-radius: 2px;
}

/* Animate progress when screen is active */
.hero-mockup__screen.is-active .intel-magnetic__progress-fill {
  animation: progressGrow 2.5s ease-out 0.3s forwards;
}

@keyframes progressGrow {
  0% { width: 0; }
  100% { width: 100%; }
}

/* Status text below */
.intel-magnetic__status {
  position: absolute;
  bottom: -40px;
  font-size: 0.625rem;
  color: #6b7280;
  white-space: nowrap;
  text-align: center;
  width: 140px;
  left: 50%;
  transform: translateX(-50%);
}

.intel-magnetic__status-text {
  opacity: 0;
}

/* "Gathering" text: fades in, then fades out before "Data unified!" appears */
.hero-mockup__screen.is-active .intel-magnetic__status-text--gathering {
  animation: statusGathering 2.8s ease-out forwards;
  animation-delay: 0.2s;
}

/* "Data unified!" text: fades in after gathering fades out */
.intel-magnetic__status-text--complete {
  position: absolute;
  left: 0;
  right: 0;
  text-align: center;
  color: #16a34a;
  font-weight: 600;
}

.hero-mockup__screen.is-active .intel-magnetic__status-text--complete {
  animation: statusFadeComplete 0.4s ease-out forwards;
  animation-delay: 2.6s;
}

/* Gathering: fade in, hold, then fade out */
@keyframes statusGathering {
  0% { opacity: 0; transform: translateY(5px); }
  15% { opacity: 1; transform: translateY(0); }
  80% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(0); }
}

/* Fade in for "Data unified!" - no transform to preserve centering */
@keyframes statusFadeComplete {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Reduced motion - show static state */
@media (prefers-reduced-motion: reduce) {
  .intel-magnetic__field,
  .intel-chip,
  .intel-magnetic__hub::after,
  .intel-magnetic__progress-fill,
  .intel-magnetic__status-text {
    animation: none;
  }

  .intel-magnetic__field {
    opacity: 0.2;
    transform: scale(1.2);
  }

  .intel-chip {
    opacity: 1;
    transform: translate(var(--start-x), var(--start-y)) scale(1);
  }

  .intel-magnetic__progress-fill {
    width: 100%;
  }

  .intel-magnetic__status-text--gathering {
    opacity: 0;
  }

  .intel-magnetic__status-text--complete {
    opacity: 1;
  }
}

/* ============================================
   CUSTOMER INTELLIGENCE - ANIMATED DATA CONVERGENCE
   Shows data flowing from all sources into Revup Intelligence
   ============================================ */

/* ============================================================
   CUSTOMER INTELLIGENCE - PURE SVG DATA CONVERGENCE
   All elements in single SVG = guaranteed coordinate alignment
   ============================================================ */

/* Main SVG container - fills the mockup screen */
.intel-converge-svg {
  width: 100%;
  height: 280px;
  display: block;
}

/* Pulsing rings animation around center hub */
.intel-svg-ring {
  transform-origin: 200px 145px;
}

.intel-svg-ring--outer {
  animation: svgRingPulse 2.5s ease-out infinite;
}

.intel-svg-ring--inner {
  animation: svgRingPulse 2.5s ease-out infinite 0.6s;
}

@keyframes svgRingPulse {
  0% {
    transform: scale(1);
    opacity: 0.4;
  }
  100% {
    transform: scale(1.6);
    opacity: 0;
  }
}

/* Icon groups fade in on load */
.intel-svg-icon {
  animation: svgIconFadeIn 0.5s ease-out both;
}

.intel-svg-icon:nth-of-type(1) { animation-delay: 0.1s; }
.intel-svg-icon:nth-of-type(2) { animation-delay: 0.2s; }
.intel-svg-icon:nth-of-type(3) { animation-delay: 0.3s; }
.intel-svg-icon:nth-of-type(4) { animation-delay: 0.4s; }
.intel-svg-icon:nth-of-type(5) { animation-delay: 0.5s; }

@keyframes svgIconFadeIn {
  from {
    opacity: 0;
    transform: scale(0.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Screen 2: Building Profile with Data Blocks */
.intel-build {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.intel-build__header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid #f3f4f6;
}

.intel-build__blocks {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.intel-block {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 0.6875rem;
  font-weight: 500;
  background: #f9fafb;
  border-left: 3px solid;
}

.intel-block i {
  font-size: 0.75rem;
}

.intel-block--forms { border-left-color: #4ba7ee; }
.intel-block--forms i { color: #4ba7ee; }

.intel-block--quizzes { border-left-color: #8b5cf6; }
.intel-block--quizzes i { color: #8b5cf6; }

.intel-block--giveaways { border-left-color: #f59e0b; }
.intel-block--giveaways i { color: #f59e0b; }

.intel-block--surveys { border-left-color: #10b981; }
.intel-block--surveys i { color: #10b981; }

.intel-block--instantwin { border-left-color: #ec4899; }
.intel-block--instantwin i { color: #ec4899; }

/* Slide-in animations */
@keyframes slideInLeft {
  from { opacity: 0; transform: translateX(-20px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes slideInRight {
  from { opacity: 0; transform: translateX(20px); }
  to { opacity: 1; transform: translateX(0); }
}

.anim-slide-in-left {
  opacity: 0;
  animation: slideInLeft 0.5s ease-out forwards;
}

.anim-slide-in-right {
  opacity: 0;
  animation: slideInRight 0.5s ease-out forwards;
}

.intel-build__progress {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 0.25rem;
}

.intel-progress-bar {
  height: 6px;
  background: #e5e7eb;
  border-radius: 3px;
  overflow: hidden;
}

.intel-progress-fill {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, #4ba7ee, #8b5cf6);
  border-radius: 3px;
  animation: progressFill 2s ease-out 1.2s forwards;
}

@keyframes progressFill {
  to { width: 100%; }
}

.intel-progress-label {
  font-size: 0.625rem;
  color: #16a34a;
  font-weight: 600;
  opacity: 0;
  animation: fadeIn 0.3s ease-out 3s forwards;
}

@keyframes fadeIn {
  to { opacity: 1; }
}

/* Screen 3: Unified Profile - Complete View */
.intel-unified {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

.intel-unified__header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid #f3f4f6;
}

.intel-unified__avatar {
  position: relative;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
}

.intel-unified__avatar-img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid white;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.intel-unified__badge {
  position: absolute;
  bottom: -2px;
  right: -2px;
  width: 18px;
  height: 18px;
  background: linear-gradient(135deg, #f59e0b, #fbbf24);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 0.5rem;
  border: 2px solid white;
}

.intel-unified__contact {
  flex: 1;
}

.intel-unified__name {
  font-weight: 600;
  font-size: 0.9375rem;
  color: #1f2937;
  margin-bottom: 2px;
}

.intel-unified__details {
  font-size: 0.625rem;
  color: #6b7280;
}

.intel-unified__location {
  font-size: 0.625rem;
  color: #9ca3af;
  margin-top: 2px;
}

.intel-unified__location i {
  margin-right: 2px;
}

.intel-unified__data {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.intel-data-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.intel-data-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.intel-data-label {
  font-size: 0.5625rem;
  color: #9ca3af;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.intel-data-value {
  font-size: 0.75rem;
  font-weight: 500;
  color: #374151;
}

.intel-data-value--highlight {
  color: #8b5cf6;
}

.intel-data-value--green {
  color: #16a34a;
  font-weight: 600;
}

.intel-unified__tags {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  padding-top: 0.375rem;
  border-top: 1px solid #f3f4f6;
}

.intel-tag {
  padding: 3px 8px;
  background: #f3f4f6;
  border-radius: 10rem;
  font-size: 0.625rem;
  color: #4b5563;
  font-weight: 500;
}

.intel-tag--vip {
  background: linear-gradient(135deg, #fef3c7, #fde68a);
  color: #92400e;
}

.intel-tag--vip i {
  margin-right: 3px;
  font-size: 0.5rem;
}

/* Screen 4: Actionable Intelligence */
.intel-actions {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

.intel-actions__header {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid #f3f4f6;
}

.intel-action-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.intel-action {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  background: #f9fafb;
  border-radius: 8px;
  transition: background 0.2s ease;
}

.intel-action:hover {
  background: #f3f4f6;
}

.intel-action__icon {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  flex-shrink: 0;
}

.intel-action__icon--email {
  background: #dbeafe;
  color: #2563eb;
}

.intel-action__icon--segment {
  background: #dcfce7;
  color: #16a34a;
}

.intel-action__icon--remind {
  background: #fef3c7;
  color: #d97706;
}

.intel-action__content {
  flex: 1;
  min-width: 0;
}

.intel-action__title {
  font-size: 0.75rem;
  font-weight: 600;
  color: #1f2937;
  margin-bottom: 2px;
}

.intel-action__reason {
  font-size: 0.625rem;
  color: #6b7280;
}

.intel-action__cta {
  width: 24px;
  height: 24px;
  background: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #4ba7ee;
  font-size: 0.625rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  flex-shrink: 0;
}

/* ============================================
   RESPONSIVE STYLES FOR NEW TABS (4, 5, 6)
   ============================================ */

@media (max-width: 767px) {
  /* NPS scale - smaller buttons on mobile */
  .nps-scale {
    gap: 2px;
  }
  .nps-button {
    width: 20px;
    height: 20px;
    font-size: 8px;
  }
  .nps-labels {
    font-size: 8px;
  }

  /* Survey radio options - smaller on mobile */
  .survey-radio-options {
    gap: 4px;
  }
  .survey-radio-option {
    padding: 5px 8px;
    font-size: 0.6875rem;
  }
  .survey-radio {
    width: 12px;
    height: 12px;
  }
  .survey-radio--selected::after {
    width: 5px;
    height: 5px;
  }

  /* Spin wheel - smaller on mobile */
  .spin-wheel-container {
    width: 70px;
    height: 70px;
  }
  .spin-wheel-container--large {
    width: 100px;
    height: 100px;
  }
  .spin-wheel-pointer {
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 9px solid var(--tab-instantwin-accent);
  }
  .spin-wheel::after {
    width: 18px;
    height: 18px;
  }
  .spin-wheel-container--large .spin-wheel::after {
    width: 26px;
    height: 26px;
  }
  .winner-celebration {
    font-size: 1.5rem;
  }
  .coupon-code {
    font-size: 0.75rem;
    padding: 0.25rem 0.5rem;
  }

  /* Profile components - smaller on mobile */
  .profile-avatar,
  .skeleton-avatar {
    width: 32px;
    height: 32px;
    font-size: 0.75rem;
  }
  .profile-name {
    font-size: 0.8125rem;
  }
  .profile-email {
    font-size: 0.625rem;
  }
  .profile-tag {
    font-size: 0.625rem;
    padding: 0.1875rem 0.375rem;
  }
  .profile-insight {
    font-size: 0.6875rem;
  }
  .profile-insight__icon {
    width: 16px;
    height: 16px;
    font-size: 0.5625rem;
  }
}

@media (max-width: 479px) {
  /* NPS scale - even smaller on small mobile */
  .nps-scale {
    gap: 1px;
  }
  .nps-button {
    width: 18px;
    height: 18px;
    font-size: 7px;
  }

  /* Spin wheel - smaller on small mobile */
  .spin-wheel-container {
    width: 60px;
    height: 60px;
    margin-bottom: 0.5rem;
  }
  .spin-wheel-container--large {
    width: 85px;
    height: 85px;
  }

  /* Hide some profile insights on very small screens */
  .profile-insights .profile-insight:nth-child(3) {
    display: none;
  }
}

/* ============================================
   VARIANT 1: MEET SARAH INTRODUCTION CARD
   ============================================ */

.sarah-intro {
  max-width: 600px;
  margin: 2rem auto 0;
  padding: 0 1rem;
  opacity: 0;
  transform: translateY(20px);
  animation: sarah-intro-enter 0.6s ease-out 0.8s forwards;
}

@keyframes sarah-intro-enter {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.sarah-intro__card {
  display: flex;
  align-items: center;
  gap: 1rem;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(75, 167, 238, 0.2);
  border-radius: 1rem;
  padding: 1rem 1.25rem;
  box-shadow: 0 4px 20px rgba(75, 167, 238, 0.1);
  position: relative;
}

.sarah-intro__avatar {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  border: 2px solid #4ba7ee;
  box-shadow: 0 0 0 3px rgba(75, 167, 238, 0.2);
}

.sarah-intro__avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sarah-intro__content {
  flex: 1;
}

.sarah-intro__label {
  font-size: 0.625rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #4ba7ee;
  margin-bottom: 0.25rem;
}

.sarah-intro__text {
  font-size: 0.875rem;
  line-height: 1.5;
  color: #374151;
}

.sarah-intro__dismiss {
  background: none;
  border: none;
  color: #9ca3af;
  cursor: pointer;
  padding: 0.5rem;
  transition: color 0.2s;
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
}

.sarah-intro__dismiss:hover {
  color: #6b7280;
}

.sarah-intro.is-dismissed {
  display: none;
}

@media (max-width: 767px) {
  .sarah-intro__card {
    flex-direction: column;
    text-align: center;
    padding: 1.5rem 1.25rem 1.25rem;
  }
  .sarah-intro__dismiss {
    top: 0.5rem;
    right: 0.5rem;
  }
}

/* ============================================
   VARIANT 2: JOURNEY TIMELINE PROGRESS BAR
   ============================================ */

.journey-timeline {
  position: relative;
  max-width: 850px;
  margin: 0 auto 1.5rem;
  padding: 1.5rem 1rem;
}

.journey-timeline__track {
  position: absolute;
  top: calc(50% - 0.5rem);
  left: 3rem;
  right: 3rem;
  height: 4px;
  background: #e5e7eb;
  border-radius: 2px;
}

.journey-timeline__progress {
  position: absolute;
  top: calc(50% - 0.5rem);
  left: 3rem;
  height: 4px;
  background: linear-gradient(90deg, #4ba7ee, #10b981);
  border-radius: 2px;
  width: 0%;
  transition: width 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.journey-timeline__nodes {
  display: flex;
  justify-content: space-between;
  position: relative;
  z-index: 2;
  padding: 0 0.5rem;
}

.journey-timeline__node {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  transition: transform 0.2s;
}

.journey-timeline__node:hover {
  transform: scale(1.05);
}

.journey-timeline__node-icon {
  width: 2.25rem;
  height: 2.25rem;
  background: white;
  border: 2px solid #e5e7eb;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.875rem;
  color: #9ca3af;
  transition: all 0.3s ease;
}

.journey-timeline__node.is-active .journey-timeline__node-icon {
  background: #4ba7ee;
  border-color: #4ba7ee;
  color: white;
  box-shadow: 0 0 0 4px rgba(75, 167, 238, 0.2);
}

.journey-timeline__node.is-visited:not(.is-active) .journey-timeline__node-icon {
  background: #10b981;
  border-color: #10b981;
  color: white;
}

.journey-timeline__node-label {
  font-size: 0.625rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: #9ca3af;
  transition: color 0.3s;
  white-space: nowrap;
}

.journey-timeline__node.is-active .journey-timeline__node-label,
.journey-timeline__node.is-visited .journey-timeline__node-label {
  color: #1f2937;
}

.journey-timeline__avatar {
  position: absolute;
  top: calc(50% - 0.5rem);
  left: 3rem;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid white;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  transform: translateY(-50%) translateX(-50%);
  transition: left 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
  z-index: 3;
}

.journey-timeline__avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 991px) {
  .journey-timeline {
    display: none;
  }
}

/* ============================================
   VARIANT 3: PERSISTENT PROFILE SIDEBAR
   ============================================ */

.sarah-sidebar {
  position: fixed;
  right: 1.5rem;
  top: 50%;
  transform: translateY(-50%);
  z-index: 100;
  width: 260px;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.sarah-sidebar.is-collapsed {
  transform: translateY(-50%) translateX(calc(100% - 50px));
}

.sarah-sidebar__card {
  background: white;
  border-radius: 1rem;
  padding: 1.25rem;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.12);
  border: 1px solid #e5e7eb;
}

.sarah-sidebar__header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid #e5e7eb;
  margin-bottom: 1rem;
}

.sarah-sidebar__avatar {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
}

.sarah-sidebar__avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sarah-sidebar__name {
  font-weight: 600;
  font-size: 0.9375rem;
  color: #1f2937;
}

.sarah-sidebar__email {
  font-size: 0.75rem;
  color: #6b7280;
}

.sarah-sidebar__label {
  font-size: 0.625rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #9ca3af;
  margin-bottom: 0.75rem;
}

.sarah-sidebar__data {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 1rem;
  min-height: 60px;
}

.sarah-sidebar__data-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.8125rem;
  padding: 0.5rem 0.625rem;
  background: #f9fafb;
  border-radius: 0.5rem;
  opacity: 0;
  transform: translateX(20px);
  animation: sidebar-data-enter 0.4s ease-out forwards;
}

@keyframes sidebar-data-enter {
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.sarah-sidebar__data-label {
  color: #6b7280;
}

.sarah-sidebar__data-value {
  font-weight: 600;
  color: #1f2937;
  transition: color 0.3s;
}

.sarah-sidebar__data-value--new {
  color: #10b981;
}

.sarah-sidebar__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  margin-bottom: 1rem;
}

.sarah-sidebar__tag {
  padding: 0.25rem 0.5rem;
  background: #dbeafe;
  color: #2563eb;
  border-radius: 9999px;
  font-size: 0.6875rem;
  font-weight: 600;
  opacity: 0;
  transform: scale(0.8);
  animation: sidebar-tag-enter 0.3s ease-out forwards;
}

@keyframes sidebar-tag-enter {
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.sarah-sidebar__toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.5rem;
  background: #f3f4f6;
  border: none;
  border-radius: 0.5rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: #6b7280;
  cursor: pointer;
  transition: background 0.2s;
}

.sarah-sidebar__toggle:hover {
  background: #e5e7eb;
}

.sarah-sidebar__toggle i {
  transition: transform 0.3s;
}

.sarah-sidebar.is-collapsed .sarah-sidebar__toggle i {
  transform: rotate(-90deg);
}

@media (max-width: 1280px) {
  .sarah-sidebar {
    display: none;
  }
}

/* ============================================
   VARIANT 4: STORYTELLING CAPTIONS + BADGES
   ============================================ */

/* Tab Badges */
.hero_tab-link {
  position: relative;
}

.tab-badge {
  position: absolute;
  top: -6px;
  right: -6px;
  padding: 0.125rem 0.375rem;
  background: #10b981;
  color: white;
  font-size: 0.5rem;
  font-weight: 700;
  border-radius: 9999px;
  opacity: 0;
  transform: scale(0);
  transition: opacity 0.3s, transform 0.3s;
  white-space: nowrap;
  pointer-events: none;
}

.tab-badge.is-visible {
  opacity: 1;
  transform: scale(1);
}

/* Badge color variants */
.tab-badge--forms { background: #4ba7ee; }
.tab-badge--quizzes { background: #8b5cf6; }
.tab-badge--giveaways { background: #d97706; }
.tab-badge--surveys { background: #0d9488; }
.tab-badge--instantwin { background: #dc2626; }
.tab-badge--intelligence { background: #4f46e5; }

/* Story Caption */
.story-caption {
  max-width: 550px;
  margin: 0 auto;
  padding: 0.75rem 1rem;
  text-align: center;
  min-height: 3.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.story-caption__text {
  font-size: 0.875rem;
  color: #374151;
  line-height: 1.6;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.story-caption__text.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.story-caption__text strong {
  color: #4ba7ee;
}

@media (max-width: 991px) {
  .tab-badge {
    position: static;
    margin-left: 0.375rem;
    display: inline-flex;
    vertical-align: middle;
  }
}

@media (max-width: 767px) {
  .tab-badge {
    display: none;
  }
  .story-caption {
    min-height: 4rem;
  }
  .story-caption__text {
    font-size: 0.8125rem;
  }
}

/* ============================================
   VARIANT 5: STORY MODE AUTO-PLAY TOUR
   ============================================ */

/* Trigger Button */
.story-mode-trigger {
  text-align: center;
  margin-top: 1.5rem;
}

.story-mode-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1.5rem;
  background: linear-gradient(135deg, #4ba7ee 0%, #2563eb 100%);
  color: white;
  border: none;
  border-radius: 10rem;
  font-size: 0.9375rem;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
  box-shadow: 0 4px 15px rgba(75, 167, 238, 0.3);
}

.story-mode-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(75, 167, 238, 0.4);
}

.story-mode-btn i {
  font-size: 1rem;
}

/* Overlay */
.story-mode-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s, visibility 0.3s;
}

.story-mode-overlay.is-active {
  opacity: 1;
  visibility: visible;
}

/* Controls */
.story-mode-controls {
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
}

.story-mode-skip {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 1rem;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 0.5rem;
  color: white;
  font-size: 0.875rem;
  cursor: pointer;
  transition: background 0.2s;
}

.story-mode-skip:hover {
  background: rgba(255, 255, 255, 0.2);
}

/* Tooltip */
.story-mode-tooltip {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  width: 90%;
  max-width: 500px;
  background: white;
  border-radius: 1rem;
  padding: 1.5rem;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
  opacity: 0;
  transition: opacity 0.4s, transform 0.4s;
}

.story-mode-overlay.is-active .story-mode-tooltip {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.story-mode-tooltip__step {
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #4ba7ee;
  margin-bottom: 0.5rem;
}

.story-mode-tooltip__text {
  font-size: 1rem;
  line-height: 1.6;
  color: #1f2937;
  margin-bottom: 1rem;
}

.story-mode-tooltip__progress {
  height: 4px;
  background: #e5e7eb;
  border-radius: 2px;
  overflow: hidden;
}

.story-mode-tooltip__progress-bar {
  height: 100%;
  background: linear-gradient(90deg, #4ba7ee, #10b981);
  border-radius: 2px;
  width: 0%;
  transition: width 0.3s linear;
}

/* Spotlight effect - raise hero section above overlay */
body.story-mode-active .hero-tab_component {
  position: relative;
  z-index: 1001;
}

body.story-mode-active .hero_tabs-menu {
  position: relative;
  z-index: 1002;
}

@media (max-width: 767px) {
  .story-mode-tooltip {
    bottom: 1rem;
    padding: 1rem;
  }
  .story-mode-tooltip__text {
    font-size: 0.875rem;
  }
  .story-mode-btn {
    font-size: 0.875rem;
    padding: 0.625rem 1.25rem;
  }
}

/* ============================================
   VARIANT 6: HERO SECTION MODAL OVERLAY
   ============================================ */

.hero-modal-overlay {
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 50;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  opacity: 1;
  transition: opacity 0.5s ease, visibility 0.5s ease;
  border-radius: 1rem;
}

.hero-modal-overlay.is-dismissed {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* Development toggle - remove this class to enable the modal */
.hero-modal-overlay.hero-modal--disabled {
  display: none !important;
}

/* Container that holds the modal - needs relative positioning */
.hero-tab_component {
  position: relative;
}

/* Pause all animations while modal is visible */
.hero-tab_component.animations-paused .hero-mockup__screen,
.hero-tab_component.animations-paused .hero-mockup__screen *,
.hero-tab_component.animations-paused .anim-fade-up,
.hero-tab_component.animations-paused .mockup-input--typing::before,
.hero-tab_component.animations-paused .mockup-input--typing::after,
.hero-tab_component.animations-paused .mockup-button::after,
.hero-tab_component.animations-paused .mockup-option--cursor-target::after,
.hero-tab_component.animations-paused [class*="anim-"] {
  animation-play-state: paused !important;
  -webkit-animation-play-state: paused !important;
}

.hero-modal__content {
  max-width: 500px;
  text-align: center;
  animation: hero-modal-enter 0.6s ease-out;
}

@keyframes hero-modal-enter {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.hero-modal__avatar {
  width: 5rem;
  height: 5rem;
  border-radius: 50%;
  overflow: hidden;
  margin: 0 auto 1.25rem;
  border: 3px solid #4ba7ee;
  box-shadow: 0 0 0 6px rgba(75, 167, 238, 0.15), 0 8px 24px rgba(0, 0, 0, 0.1);
}

.hero-modal__avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-modal__label {
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #4ba7ee;
  margin-bottom: 0.75rem;
}

.hero-modal__title {
  font-size: 1.5rem;
  font-weight: 700;
  color: #1f2937;
  margin-bottom: 0.75rem;
  line-height: 1.3;
}

.hero-modal__text {
  font-size: 1rem;
  color: #4b5563;
  line-height: 1.6;
  margin-bottom: 1.5rem;
}

.hero-modal__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.875rem 1.75rem;
  background: linear-gradient(135deg, #4ba7ee 0%, #2563eb 100%);
  color: white;
  border: none;
  border-radius: 10rem;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
  box-shadow: 0 4px 15px rgba(75, 167, 238, 0.35);
}

.hero-modal__cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(75, 167, 238, 0.45);
}

.hero-modal__cta i {
  font-size: 0.875rem;
  transition: transform 0.2s;
}

.hero-modal__cta:hover i {
  transform: translateX(3px);
}


/* Tablet adjustments */
@media (max-width: 991px) {
  .hero-modal__title {
    font-size: 1.25rem;
  }
  .hero-modal__text {
    font-size: 0.9375rem;
  }
  .hero-modal__avatar {
    width: 4rem;
    height: 4rem;
  }
}

/* Mobile adjustments */
@media (max-width: 767px) {
  .hero-modal-overlay {
    padding: 1.5rem 1rem;
  }
  .hero-modal__title {
    font-size: 1.125rem;
  }
  .hero-modal__text {
    font-size: 0.875rem;
  }
  .hero-modal__cta {
    font-size: 0.9375rem;
    padding: 0.75rem 1.5rem;
  }
}

/* Next Tab Highlight - Clean Indicator Design */
.hero_tab-link.highlight-next {
  position: relative;
  color: #4ba7ee;
  background-color: rgba(75, 167, 238, 0.08);
  animation: tabHintFadeIn 0.4s ease-out forwards;
}

/* Small chevron indicator */
.hero_tab-link.highlight-next::before {
  content: '›';
  position: absolute;
  left: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.125rem;
  font-weight: 600;
  color: #4ba7ee;
  opacity: 0;
  animation: chevronSlideIn 0.5s ease-out 0.2s forwards;
}

@keyframes tabHintFadeIn {
  from {
    background-color: rgba(75, 167, 238, 0);
  }
  to {
    background-color: rgba(75, 167, 238, 0.08);
  }
}

@keyframes chevronSlideIn {
  from {
    opacity: 0;
    transform: translateY(-50%) translateX(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
  }
}


/* ============================================
   VARIANT 7: ENHANCED HERO MODAL (Brand-Aligned)
   ============================================
   Design direction: Polished & Elevated
   - Light frosted glass (brand-appropriate)
   - Primary Blue #4ba7ee accents
   - Inter/Lato fonts only
   - Animated glow ring on avatar
   - Staggered entrance animations
   - Decorative label lines
   ============================================ */

/* V7 Overlay - enhanced frosted glass */
.hero-modal-v7 {
  background: rgba(255, 255, 255, 0.97);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* V7 Content container */
.hero-modal__content--v7 {
  max-width: 460px;
  text-align: center;
  animation: v7-content-enter 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes v7-content-enter {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Avatar stack with animated glow ring */
.hero-modal__avatar-stack {
  position: relative;
  width: 6rem;
  height: 6rem;
  margin: 0 auto 1.5rem;
}

.hero-modal__avatar-glow {
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    #4ba7ee,
    #48c1f0,
    #4ba7ee,
    #48c1f0,
    #4ba7ee
  );
  animation: v7-glow-spin 4s linear infinite;
  opacity: 0.7;
}

@keyframes v7-glow-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.hero-modal__avatar--v7 {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  overflow: hidden;
  border: 4px solid white;
  box-shadow: 0 8px 32px rgba(75, 167, 238, 0.25);
  animation: v7-avatar-enter 0.6s ease-out 0.15s both;
}

@keyframes v7-avatar-enter {
  from {
    opacity: 0;
    transform: scale(0.85);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Label row with decorative lines */
.hero-modal__label-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
  animation: v7-label-enter 0.5s ease-out 0.25s both;
}

@keyframes v7-label-enter {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.hero-modal__label-line {
  width: 2rem;
  height: 1px;
  background: linear-gradient(90deg, transparent, #4ba7ee, transparent);
  transform: translateY(-4px);
}

.hero-modal__label--v7 {
  font-family: 'Inter', -apple-system, sans-serif;
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #4ba7ee;
}

/* V7 Title - two-line treatment */
.hero-modal__title--v7 {
  font-family: 'Lato', -apple-system, sans-serif;
  font-size: 1.75rem;
  font-weight: 700;
  color: #1d1d1d;
  line-height: 1.3;
  margin-bottom: 1rem;
  animation: v7-title-enter 0.6s ease-out 0.35s both;
}

@keyframes v7-title-enter {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.hero-modal__title-highlight {
  display: block;
  font-size: 1.25rem;
  color: #4b5563;
  font-weight: 400;
}

/* V7 Text */
.hero-modal__text--v7 {
  font-family: 'Inter', -apple-system, sans-serif;
  font-size: 1rem;
  font-weight: 400;
  color: #4b5563;
  line-height: 1.65;
  margin-bottom: 1.75rem;
  max-width: 360px;
  margin-left: auto;
  margin-right: auto;
  animation: v7-text-enter 0.6s ease-out 0.45s both;
}

@keyframes v7-text-enter {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* V7 CTA - brand gradient pill */
.hero-modal__cta--v7 {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.875rem 1.75rem;
  background: linear-gradient(135deg, #4ba7ee 0%, #48c1f0 100%);
  color: white;
  border: none;
  border-radius: 10rem;
  font-family: 'Inter', -apple-system, sans-serif;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 4px 20px rgba(75, 167, 238, 0.35);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  animation: v7-cta-enter 0.6s ease-out 0.55s both;
}

@keyframes v7-cta-enter {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.hero-modal__cta--v7:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(75, 167, 238, 0.45);
}

.hero-modal__cta--v7 i {
  font-size: 0.875rem;
  transition: transform 0.2s ease;
}

.hero-modal__cta--v7:hover i {
  transform: translateX(3px);
}

/* Tablet adjustments */
@media (max-width: 991px) {
  .hero-modal__avatar-stack {
    width: 5rem;
    height: 5rem;
  }
  .hero-modal__title--v7 {
    font-size: 1.5rem;
  }
  .hero-modal__text--v7 {
    font-size: 0.9375rem;
  }
}

/* Mobile adjustments */
@media (max-width: 767px) {
  .hero-modal__avatar-stack {
    width: 4.5rem;
    height: 4.5rem;
    margin-bottom: 1.25rem;
  }
  .hero-modal__label-line {
    width: 1.5rem;
  }
  .hero-modal__title--v7 {
    font-size: 1.25rem;
  }
  .hero-modal__text--v7 {
    font-size: 0.875rem;
    margin-bottom: 1.5rem;
  }
  .hero-modal__cta--v7 {
    font-size: 0.9375rem;
    padding: 0.75rem 1.5rem;
  }
}

/* ============================================
   UNIFIED PROFILE - CUSTOMER INTELLIGENCE TAB
   Comprehensive view of all collected data
   ============================================ */

/* Card variant for unified profile - slightly tighter */
.mockup-card--unified {
  padding: 1rem;
}

/* Profile header with photo */
.unified-profile__header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding-bottom: 0.625rem;
  border-bottom: 1px solid #e5e7eb;
  margin-bottom: 0.625rem;
}

.unified-profile__avatar {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.unified-profile__avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.unified-profile__info {
  display: flex;
  flex-direction: column;
  gap: 0.0625rem;
}

.unified-profile__name {
  font-weight: 600;
  font-size: 0.9375rem;
  color: #1f2937;
}

.unified-profile__contact {
  font-size: 0.625rem;
  color: #6b7280;
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.unified-profile__phone-flag {
  font-size: 0.6875rem;
}

/* Data Sources 2x2 Grid */
.unified-profile__sources {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.375rem;
  margin-bottom: 0.375rem;
}

.unified-profile__source {
  background: #f9fafb;
  border-radius: 0.375rem;
  padding: 0.375rem;
}

.unified-profile__source-header {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.5rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.25rem;
}

/* Source header color variations */
.unified-profile__source-header--forms {
  color: #4ba7ee;
}
.unified-profile__source-header--forms i {
  color: #4ba7ee;
}

.unified-profile__source-header--quizzes {
  color: #8b5cf6;
}
.unified-profile__source-header--quizzes i {
  color: #8b5cf6;
}

.unified-profile__source-header--giveaways {
  color: #d97706;
}
.unified-profile__source-header--giveaways i {
  color: #d97706;
}

.unified-profile__source-header--surveys {
  color: #0d9488;
}
.unified-profile__source-header--surveys i {
  color: #0d9488;
}

.unified-profile__source-header--instantwin {
  color: #ec4899;
}
.unified-profile__source-header--instantwin i {
  color: #ec4899;
}

.unified-profile__source-data {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.625rem;
  padding: 0.0625rem 0;
}

.unified-profile__data-label {
  color: #9ca3af;
}

.unified-profile__data-value {
  color: #1f2937;
  font-weight: 500;
}

.unified-profile__data-value--highlight {
  color: #8b5cf6;
  font-weight: 600;
}

.unified-profile__data-value--giveaway {
  color: #d97706;
  font-weight: 600;
}

.unified-profile__data-value--survey {
  color: #0d9488;
  font-weight: 600;
}

/* Instant Win Section (full width) */
.unified-profile__instant-win {
  background: linear-gradient(135deg, #fdf2f8 0%, #fce7f3 100%);
  border-radius: 0.375rem;
  padding: 0.375rem;
  margin-bottom: 0.375rem;
}

.unified-profile__instant-win-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.625rem;
}

.unified-profile__instant-win-item {
  display: flex;
  align-items: center;
  gap: 0.1875rem;
  color: #1f2937;
}

.unified-profile__coupon {
  margin-left: auto;
  padding: 0.125rem 0.3125rem;
  border-radius: 0.1875rem;
  font-size: 0.5625rem;
  font-weight: 600;
  font-family: monospace;
}

.unified-profile__coupon--pending {
  background: #fef3c7;
  color: #92400e;
}

.unified-profile__coupon--redeemed {
  background: #dcfce7;
  color: #166534;
}

/* Enrichment Bar */
.unified-profile__enrichment {
  background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
  border-radius: 0.375rem;
  padding: 0.375rem;
  margin-bottom: 0.375rem;
}

.unified-profile__enrichment-header {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.5rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #0369a1;
  margin-bottom: 0.1875rem;
}

.unified-profile__enrichment-row {
  display: flex;
  justify-content: space-between;
  font-size: 0.625rem;
  color: #0369a1;
}

/* Tags */
.unified-profile__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.1875rem;
}

.unified-profile__tag {
  padding: 0.125rem 0.3125rem;
  background: #e5e7eb;
  color: #4b5563;
  border-radius: 9999px;
  font-size: 0.5rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.025em;
}

.unified-profile__tag--vip {
  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
  color: #92400e;
}

.unified-profile__tag--value {
  background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%);
  color: #166534;
}

/* ============================================
   INTELLIGENT ACTIONS - AI-POWERED NEXT STEPS
   ============================================ */

.intel-actions {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.intel-action {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4375rem;
  background: #f9fafb;
  border-radius: 0.375rem;
  border: 1px solid #e5e7eb;
}

.intel-action__icon {
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 0.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.6875rem;
  flex-shrink: 0;
}

.intel-action__icon--email {
  background: #dbeafe;
  color: #2563eb;
}

.intel-action__icon--coupon {
  background: #fef3c7;
  color: #d97706;
}

.intel-action__icon--segment {
  background: #ede9fe;
  color: #7c3aed;
}

.intel-action__content {
  flex: 1;
  min-width: 0;
}

.intel-action__title {
  font-size: 0.6875rem;
  font-weight: 600;
  color: #1f2937;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.intel-action__reason {
  font-size: 0.5625rem;
  color: #6b7280;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.intel-action__status {
  width: 1.125rem;
  height: 1.125rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.5625rem;
  flex-shrink: 0;
}

.intel-action__status--ready {
  background: #dbeafe;
  color: #2563eb;
}

.intel-action__status--scheduled {
  background: #fef3c7;
  color: #d97706;
}

.intel-action__status--done {
  background: #dcfce7;
  color: #16a34a;
}

/* Mini Profile for Actions Screen */
.intel-mini-profile {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding-bottom: 0.5rem;
  margin-bottom: 0.5rem;
  border-bottom: 1px solid #e5e7eb;
}

.intel-mini-profile__avatar {
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  overflow: hidden;
}

.intel-mini-profile__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.intel-mini-profile__info {
  display: flex;
  flex-direction: column;
}

.intel-mini-profile__name {
  font-size: 0.75rem;
  font-weight: 600;
  color: #1f2937;
}

.intel-mini-profile__status {
  font-size: 0.5625rem;
  color: #16a34a;
  font-weight: 500;
}

/* ============================================
   RESPONSIVE - UNIFIED PROFILE
   ============================================ */

@media (max-width: 479px) {
  .mockup-card--unified {
    padding: 0.75rem;
  }
  
  .unified-profile__avatar {
    width: 2.25rem;
    height: 2.25rem;
  }
  
  .unified-profile__name {
    font-size: 0.8125rem;
  }
  
  .unified-profile__sources {
    gap: 0.25rem;
  }
  
  .unified-profile__source {
    padding: 0.25rem;
  }
  
  .unified-profile__source-header {
    font-size: 0.4375rem;
  }
  
  .unified-profile__source-data {
    font-size: 0.5625rem;
  }
  
  .unified-profile__instant-win-row {
    font-size: 0.5625rem;
    gap: 0.375rem;
  }
  
  .intel-action {
    padding: 0.3125rem;
  }
  
  .intel-action__icon {
    width: 1.25rem;
    height: 1.25rem;
    font-size: 0.5625rem;
  }
  
  .intel-action__title {
    font-size: 0.625rem;
  }
  
  .intel-action__reason {
    font-size: 0.5rem;
  }
}

/* ============================================
   MOMENTUM BENTO CARD - Turn Participation Section
   Side-by-side layout with animated bonus actions
   ============================================ */

/* Layout variant for momentum card */
.bento_card--momentum {
  flex-direction: row;
  align-items: stretch;
}

.bento_card--momentum .bento_card-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 2.5rem;
}

.bento_card--momentum .bento_card-content-top {
  margin-bottom: 1.5rem;
}

/* Momentum animation wrapper */
.momentum-animation-wrapper {
  flex: 0 0 380px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  border-left: 1px solid #e5e7eb;
}

/* Momentum Card */
.momentum-card {
  width: 100%;
  max-width: 320px;
  background: #ffffff;
  border-radius: 0.75rem;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.05);
  overflow: hidden;
}

.momentum-card__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1.25rem;
  background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
  border-bottom: 1px solid #e0f2fe;
}

.momentum-card__header-title {
  font-size: 0.875rem;
  font-weight: 600;
  color: #0369a1;
  text-transform: uppercase;
  letter-spacing: 0.025em;
}

.momentum-card__counter {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.75rem;
  background: var(--button--primary, #4ba7ee);
  color: white;
  border-radius: 9999px;
  font-size: 0.8125rem;
  font-weight: 600;
}

.momentum-card__counter-value {
  min-width: 1.5rem;
  text-align: center;
  transition: transform 0.3s ease;
}

.momentum-card__counter-value.is-incrementing {
  animation: counterPop 0.3s ease;
}

@keyframes counterPop {
  0% { transform: scale(1); }
  50% { transform: scale(1.3); }
  100% { transform: scale(1); }
}

.momentum-card__counter-label {
  font-size: 0.6875rem;
  opacity: 0.9;
}

/* Actions List */
.momentum-card__actions {
  padding: 0.75rem 0;
}

.momentum-action {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.625rem 1.25rem;
  transition: background-color 0.3s ease;
}

.momentum-action.is-completing {
  background-color: #f0fdf4;
}

.momentum-action__check {
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  border: 2px solid #d1d5db;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.625rem;
  color: transparent;
  transition: all 0.3s ease;
  flex-shrink: 0;
}

.momentum-action--complete .momentum-action__check {
  background: #16a34a;
  border-color: #16a34a;
  color: white;
}

.momentum-action__check i {
  opacity: 0;
  transform: scale(0);
  transition: all 0.3s ease;
}

.momentum-action--complete .momentum-action__check i {
  opacity: 1;
  transform: scale(1);
}

.momentum-action__label {
  flex: 1;
  font-size: 0.8125rem;
  color: #374151;
  font-weight: 500;
}

.momentum-action--complete .momentum-action__label {
  color: #1f2937;
}

.momentum-action__badge {
  padding: 0.1875rem 0.5rem;
  background: #f3f4f6;
  color: #6b7280;
  border-radius: 9999px;
  font-size: 0.6875rem;
  font-weight: 600;
  transition: all 0.3s ease;
}

.momentum-action--complete .momentum-action__badge {
  background: #dcfce7;
  color: #16a34a;
}

.momentum-action.is-completing .momentum-action__badge {
  animation: badgePulse 0.5s ease;
}

@keyframes badgePulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.15); background: #bbf7d0; }
  100% { transform: scale(1); }
}

/* Total Section */
.momentum-card__total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.875rem 1.25rem;
  background: #f9fafb;
  border-top: 1px solid #e5e7eb;
}

.momentum-card__total--top {
  border-top: none;
  border-bottom: 1px solid #e5e7eb;
  border-radius: 0.75rem 0.75rem 0 0;
}

.momentum-card__total-label {
  font-size: 0.75rem;
  color: #6b7280;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.momentum-card__total-value {
  font-size: 1.5rem;
  font-weight: 700;
  color: #1f2937;
  transition: transform 0.3s ease;
}

.momentum-card__total-value.is-incrementing {
  animation: counterPop 0.3s ease;
}

/* Tags below text */
.momentum-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.momentum-tag {
  padding: 0.5rem 1rem;
  background: #f3f4f6;
  color: #374151;
  border-radius: 9999px;
  font-size: 0.875rem;
  font-weight: 500;
  border: 1px solid #e5e7eb;
  transition: all 0.2s ease;
}

.momentum-tag:hover {
  background: #e5e7eb;
}

/* Resetting state for animation loop */
.momentum-card--resetting {
  opacity: 0.3;
  transition: opacity 0.4s ease;
}

.momentum-card--resetting .momentum-action {
  transition: none;
}

/* ============================================
   MOMENTUM CARD - RESPONSIVE
   ============================================ */

@media (max-width: 991px) {
  .bento_card--momentum {
    flex-direction: row;
  }
  
  .momentum-animation-wrapper {
    flex: 0 0 300px;
    padding: 1.5rem;
  }
  
  .momentum-card {
    max-width: 260px;
  }
  
  .momentum-card__header {
    padding: 0.75rem 1rem;
  }
  
  .momentum-action {
    padding: 0.5rem 1rem;
    gap: 0.5rem;
  }
  
  .momentum-action__label {
    font-size: 0.75rem;
  }
}

@media (max-width: 767px) {
  .bento_card--momentum {
    flex-direction: column;
  }
  
  .momentum-animation-wrapper {
    flex: none;
    width: 100%;
    padding: 1.5rem;
    border-left: none;
    border-top: 1px solid #e5e7eb;
  }
  
  .momentum-card {
    max-width: 100%;
  }
  
  .bento_card--momentum .bento_card-content {
    padding: 1.5rem;
  }
  
  .momentum-tags {
    justify-content: flex-start;
  }
  
  .momentum-tag {
    padding: 0.375rem 0.75rem;
    font-size: 0.8125rem;
  }
}

/* ============================================
   SPEED BENTO CARD - Built for Speed Section
   Circular gauge with AI badge animation
   ============================================ */

/* Layout variant for speed card */
.bento_card--speed {
  flex-direction: column;
}

.bento_card--speed .bento_card-content {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: 2rem;
  flex: 1;
}

/* Speed animation wrapper */
.speed-animation-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  background: #f8fafc;
  border-top: 1px solid #e5e7eb;
  min-height: 310px;
}

/* Speed Card Container */
.speed-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
}

/* Circular Gauge */
.speed-gauge {
  position: relative;
  width: 135px;
  height: 135px;
}

.speed-gauge__svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.speed-gauge__track {
  fill: none;
  stroke: #e5e7eb;
  stroke-width: 8;
}

.speed-gauge__ring {
  fill: none;
  stroke: var(--button--primary, #4ba7ee);
  stroke-width: 8;
  stroke-linecap: round;
  stroke-dasharray: 283; /* 2 * PI * 45 */
  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;
}

/* Gauge center content */
.speed-gauge__content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: baseline;
  gap: 2px;
}

.speed-gauge__value {
  font-size: 2.25rem;
  font-weight: 700;
  color: #1f2937;
  line-height: 1;
}

.speed-gauge__unit {
  font-size: 1.125rem;
  font-weight: 600;
  color: #6b7280;
}

/* Metrics section */
.speed-metrics {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
}

.speed-metric {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
}

.speed-metric__label {
  font-size: 0.75rem;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 500;
}

.speed-metric__value {
  font-size: 1.125rem;
  font-weight: 700;
  color: #1f2937;
}

/* AI Ready Badge */
.speed-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: 9999px;
  font-size: 0.875rem;
  font-weight: 600;
  color: #1e40af;
  opacity: 0;
  transform: scale(0.8);
  transition: opacity 0.4s ease-out, transform 0.4s ease-out;
}

.speed-badge i {
  color: #4ba7ee;
}

.speed-card--active .speed-badge {
  opacity: 1;
  transform: scale(1);
}

/* Removed pulse animation for cleaner look */


/* ============================================
   SPEED CARD - RESPONSIVE
   ============================================ */

@media (max-width: 991px) {
  .speed-gauge {
    width: 110px;
    height: 110px;
  }

  .speed-gauge__value {
    font-size: 1.875rem;
  }

  .speed-gauge__unit {
    font-size: 1rem;
  }
}

@media (max-width: 767px) {
  .speed-animation-wrapper {
    padding: 1.5rem;
  }

  .bento_card--speed .bento_card-content {
    padding: 1.5rem;
  }
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  .speed-gauge__ring {
    stroke-dashoffset: 0;
    transition: none;
  }

  .speed-badge {
    opacity: 1;
    transform: scale(1);
    transition: none;
  }

  .speed-badge--pulsing {
    animation: none;
  }
}

/* ============================================
   REVENUE BENTO CARD - Know What Drives Revenue
   Data streams converging to revenue total
   ============================================ */

/* Layout variant for revenue card */
.bento_card--revenue {
  flex-direction: column;
}

.bento_card--revenue .bento_card-content {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: 2rem;
  flex: 1;
}

/* Revenue animation wrapper */
.revenue-animation-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  background: #f8fafc;
  border-top: 1px solid #e5e7eb;
  min-height: 310px;
}

/* Revenue Card Container */
.revenue-card {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  width: 100%;
  max-width: 240px;
}

/* Data Streams */
.revenue-streams {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.revenue-stream {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.625rem 0.875rem;
  background: #ffffff;
  border-radius: 0.5rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  opacity: 0;
  transform: translateX(-20px);
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

.revenue-card--active .revenue-stream {
  opacity: 1;
  transform: translateX(0);
}

/* Staggered appearance */
.revenue-card--active .revenue-stream[data-stream="entries"] {
  transition-delay: 0s;
}

.revenue-card--active .revenue-stream[data-stream="purchases"] {
  transition-delay: 0.15s;
}

.revenue-card--active .revenue-stream[data-stream="referrals"] {
  transition-delay: 0.3s;
}

.revenue-stream__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.revenue-stream[data-stream="entries"] .revenue-stream__dot {
  background: #4ba7ee;
}

.revenue-stream[data-stream="purchases"] .revenue-stream__dot {
  background: rgba(75, 167, 238, 0.7);
}

.revenue-stream[data-stream="referrals"] .revenue-stream__dot {
  background: rgba(75, 167, 238, 0.4);
}

.revenue-stream__label {
  flex: 1;
  font-size: 0.8125rem;
  font-weight: 500;
  color: #374151;
}

.revenue-stream__value {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #1f2937;
}

/* Revenue Total */
.revenue-total {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.375rem;
  padding: 1rem;
  background: linear-gradient(135deg, #4ba7ee 0%, #2563eb 100%);
  border-radius: 0.75rem;
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
  transition-delay: 0.5s;
}

.revenue-card--active .revenue-total {
  opacity: 1;
  transform: scale(1);
}

.revenue-total__label {
  font-size: 0.6875rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.8);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.revenue-total__value {
  font-size: 1.75rem;
  font-weight: 700;
  color: #ffffff;
}


/* ============================================
   REVENUE CARD - RESPONSIVE
   ============================================ */

@media (max-width: 767px) {
  .revenue-animation-wrapper {
    padding: 1.5rem;
  }

  .bento_card--revenue .bento_card-content {
    padding: 1.5rem;
  }
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  .revenue-stream {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .revenue-total {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ============================================
   COMMUNICATION BENTO CARD - Communication Section
   Message timeline with staggered appearance
   ============================================ */

/* Layout variant for communication card */
.bento_card--communication {
  flex-direction: column;
}

.bento_card--communication .bento_card-content {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: 2rem;
  flex: 1;
}

/* Communication animation wrapper */
.communication-animation-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  background: #f8fafc;
  border-top: 1px solid #e5e7eb;
  min-height: 310px;
}

/* Communication Card Container */
.communication-card {
  width: 100%;
  max-width: 240px;
}

/* Message Timeline */
.communication-timeline {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  position: relative;
}

/* Connecting line */
.communication-timeline::before {
  content: '';
  position: absolute;
  left: 14px;
  top: 24px;
  bottom: 24px;
  width: 2px;
  background: rgba(0, 0, 0, 0.1);
}

.communication-message {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  background: #ffffff;
  border-radius: 0.5rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.4s ease-out, transform 0.4s ease-out;
  position: relative;
  z-index: 1;
}

.communication-card--active .communication-message {
  opacity: 1;
  transform: translateY(0);
}

/* Staggered appearance */
.communication-card--active .communication-message[data-message="1"] {
  transition-delay: 0s;
}

.communication-card--active .communication-message[data-message="2"] {
  transition-delay: 0.4s;
}

.communication-card--active .communication-message[data-message="3"] {
  transition-delay: 0.8s;
}

.communication-message__icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #eff6ff;
  color: #4ba7ee;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  flex-shrink: 0;
  opacity: 0;
  transform: scale(0);
  transition: opacity 0.3s ease-out, transform 0.3s ease-out;
}

.communication-message--complete .communication-message__icon {
  opacity: 1;
  transform: scale(1);
}

.communication-message__text {
  flex: 1;
  font-size: 0.8125rem;
  font-weight: 500;
  color: #374151;
}

.communication-message__channel {
  font-size: 0.6875rem;
  font-weight: 600;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 0.25rem 0.5rem;
  background: #f3f4f6;
  border-radius: 4px;
}


/* ============================================
   COMMUNICATION CARD - RESPONSIVE
   ============================================ */

@media (max-width: 767px) {
  .communication-animation-wrapper {
    padding: 1.5rem;
  }

  .bento_card--communication .bento_card-content {
    padding: 1.5rem;
  }
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  .communication-message {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .communication-message__icon {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ============================================
   EXPERTISE BENTO CARD - Designed by Experts
   Experience counter with credential badges
   ============================================ */

/* Layout variant for expertise card */
.bento_card--expertise {
  flex-direction: column;
}

.bento_card--expertise .bento_card-content {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: 2rem;
  flex: 1;
}

/* Expertise animation wrapper */
.expertise-animation-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  background: #f8fafc;
  border-top: 1px solid #e5e7eb;
  min-height: 310px;
}

/* Expertise Card Container */
.expertise-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  width: 100%;
  max-width: 240px;
}

/* Experience Counter */
.expertise-counter {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
}

.expertise-counter__value {
  font-size: 3.5rem;
  font-weight: 800;
  color: #4ba7ee;
  line-height: 1;
  display: inline;
}

.expertise-counter__plus {
  font-size: 2rem;
  font-weight: 700;
  color: #4ba7ee;
  opacity: 0;
  transform: scale(0);
  transition: opacity 0.3s ease-out, transform 0.3s ease-out;
  transition-delay: 1.2s;
  display: inline;
}

.expertise-card--active .expertise-counter__plus {
  opacity: 1;
  transform: scale(1);
}

.expertise-counter__label {
  font-size: 0.875rem;
  font-weight: 500;
  color: #374151;
  margin-top: 0.25rem;
}

/* Credential Badges */
.expertise-badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
}

.expertise-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.5rem 0.875rem;
  background: #ffffff;
  border: 1px solid #bfdbfe;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 600;
  color: #1e40af;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  opacity: 0;
  transform: translateY(10px) scale(0.9);
  transition: opacity 0.4s ease-out, transform 0.4s ease-out;
}

.expertise-badge i {
  font-size: 0.75rem;
  color: #4ba7ee;
}

.expertise-card--active .expertise-badge {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* Staggered badge appearance */
.expertise-card--active .expertise-badge[data-badge="1"] {
  transition-delay: 0.8s;
}

.expertise-card--active .expertise-badge[data-badge="2"] {
  transition-delay: 1s;
}

.expertise-card--active .expertise-badge[data-badge="3"] {
  transition-delay: 1.2s;
}


/* ============================================
   EXPERTISE CARD - RESPONSIVE
   ============================================ */

@media (max-width: 767px) {
  .expertise-animation-wrapper {
    padding: 1.5rem;
  }

  .bento_card--expertise .bento_card-content {
    padding: 1.5rem;
  }
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  .expertise-badge {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .expertise-counter__plus {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* =============================================
   LARGE UNIFIED PROFILE - Customer Intelligence Section
   Based on hero's Unified Profile card, scaled up 1.6x
   ============================================= */

/* Wrapper for the large unified profile */
.unified-profile-large-wrapper {
  width: 100%;
}

/* Main card container */
.unified-profile-large {
  background: #fff;
  border-radius: 1rem;
  padding: 1.5rem;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
}

/* Card header badge */
.unified-profile-large__badge-row {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  margin-bottom: 1.25rem;
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity 0.4s ease-out, transform 0.4s ease-out;
}

.unified-profile-large--active .unified-profile-large__badge-row {
  opacity: 1;
  transform: translateY(0);
}

.unified-profile-large__check {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  background: #dcfce7;
  border-radius: 0.375rem;
  color: #16a34a;
  font-size: 0.875rem;
}

.unified-profile-large__title {
  font-size: 1rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #1f2937;
}

/* Profile header with photo */
.unified-profile-large__header {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid #e5e7eb;
  margin-bottom: 1.25rem;
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity 0.4s ease-out, transform 0.4s ease-out;
  transition-delay: 0.15s;
}

.unified-profile-large--active .unified-profile-large__header {
  opacity: 1;
  transform: translateY(0);
}

.unified-profile-large__avatar {
  width: 5rem;
  height: 5rem;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.unified-profile-large__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.unified-profile-large__info {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.unified-profile-large__name {
  font-weight: 600;
  font-size: 1.5rem;
  color: #1f2937;
}

.unified-profile-large__contact {
  font-size: 1rem;
  color: #6b7280;
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.unified-profile-large__phone-flag {
  font-size: 1rem;
}

/* Data Sources 2x2 Grid */
.unified-profile-large__sources {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.unified-profile-large__source {
  background: #f9fafb;
  border-radius: 0.625rem;
  padding: 0.875rem;
  opacity: 0;
  transform: scale(0.95);
  transition: opacity 0.4s ease-out, transform 0.4s ease-out;
}

.unified-profile-large--active .unified-profile-large__source[data-source="1"] {
  opacity: 1;
  transform: scale(1);
  transition-delay: 0.3s;
}

.unified-profile-large--active .unified-profile-large__source[data-source="2"] {
  opacity: 1;
  transform: scale(1);
  transition-delay: 0.45s;
}

.unified-profile-large--active .unified-profile-large__source[data-source="3"] {
  opacity: 1;
  transform: scale(1);
  transition-delay: 0.6s;
}

.unified-profile-large--active .unified-profile-large__source[data-source="4"] {
  opacity: 1;
  transform: scale(1);
  transition-delay: 0.75s;
}

.unified-profile-large__source-header {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.5rem;
}

/* Source header color variations */
.unified-profile-large__source-header--forms {
  color: #4ba7ee;
}

.unified-profile-large__source-header--quizzes {
  color: #8b5cf6;
}

.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;
  align-items: center;
  font-size: 0.9375rem;
  padding: 0.25rem 0;
}

.unified-profile-large__data-label {
  color: #9ca3af;
}

.unified-profile-large__data-value {
  color: #1f2937;
  font-weight: 500;
}

.unified-profile-large__data-value--highlight {
  color: #8b5cf6;
  font-weight: 600;
}

.unified-profile-large__data-value--giveaway {
  color: #d97706;
  font-weight: 600;
}

.unified-profile-large__data-value--survey {
  color: #0d9488;
  font-weight: 600;
}

/* Instant Win Section (full width) */
.unified-profile-large__instant-win {
  background: linear-gradient(135deg, #fdf2f8 0%, #fce7f3 100%);
  border-radius: 0.625rem;
  padding: 0.875rem;
  margin-bottom: 0.75rem;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.4s ease-out, transform 0.4s ease-out;
  transition-delay: 0.9s;
}

.unified-profile-large--active .unified-profile-large__instant-win {
  opacity: 1;
  transform: translateY(0);
}

.unified-profile-large__instant-win-header {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #ec4899;
  margin-bottom: 0.5rem;
}

.unified-profile-large__instant-win-row {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  font-size: 0.9375rem;
}

.unified-profile-large__instant-win-item {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  color: #1f2937;
}

.unified-profile-large__coupon {
  margin-left: auto;
  padding: 0.375rem 0.625rem;
  border-radius: 0.375rem;
  font-size: 0.8125rem;
  font-weight: 600;
  font-family: 'JetBrains Mono', monospace;
  background: #fef3c7;
  color: #92400e;
}

/* Enrichment Bar */
.unified-profile-large__enrichment {
  background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
  border-radius: 0.625rem;
  padding: 0.875rem;
  margin-bottom: 0.75rem;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.4s ease-out, transform 0.4s ease-out;
  transition-delay: 1.05s;
}

.unified-profile-large--active .unified-profile-large__enrichment {
  opacity: 1;
  transform: translateY(0);
}

.unified-profile-large__enrichment-header {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #0369a1;
  margin-bottom: 0.375rem;
}

.unified-profile-large__enrichment-row {
  display: flex;
  justify-content: space-between;
  font-size: 0.9375rem;
  color: #0369a1;
}

.unified-profile-large__enrichment-row strong {
  font-weight: 600;
}

/* Tags */
.unified-profile-large__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.4s ease-out, transform 0.4s ease-out;
  transition-delay: 1.2s;
}

.unified-profile-large--active .unified-profile-large__tags {
  opacity: 1;
  transform: translateY(0);
}

.unified-profile-large__tag {
  padding: 0.375rem 0.75rem;
  background: #e5e7eb;
  color: #4b5563;
  border-radius: 9999px;
  font-size: 0.8125rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.025em;
}

.unified-profile-large__tag--vip {
  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
  color: #92400e;
}

.unified-profile-large__tag--value {
  background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%);
  color: #166534;
}

/* =============================================
   CONCEPT VARIATIONS
   ============================================= */

/* Concept A: Standard animated build-up (default) */
/* Uses the base unified-profile-large styles above */

/* Concept B: Sections slide in from sides */
.unified-profile-large--slide-in .unified-profile-large__source[data-source="1"],
.unified-profile-large--slide-in .unified-profile-large__source[data-source="3"] {
  transform: translateX(-20px);
}

.unified-profile-large--slide-in .unified-profile-large__source[data-source="2"],
.unified-profile-large--slide-in .unified-profile-large__source[data-source="4"] {
  transform: translateX(20px);
}

.unified-profile-large--slide-in.unified-profile-large--active .unified-profile-large__source {
  transform: translateX(0);
}

/* Concept C: Pulse highlights on values */
.unified-profile-large--pulse .unified-profile-large__data-value,
.unified-profile-large--pulse .unified-profile-large__enrichment-row strong {
  position: relative;
}

.unified-profile-large--pulse.unified-profile-large--active .unified-profile-large__data-value::after {
  content: '';
  position: absolute;
  inset: -4px -8px;
  background: currentColor;
  opacity: 0;
  border-radius: 4px;
  animation: pulse-highlight 2s ease-in-out infinite;
  animation-delay: inherit;
}

@keyframes pulse-highlight {
  0%, 100% { opacity: 0; }
  50% { opacity: 0.1; }
}

/* =============================================
   Responsive Styles for Large Unified Profile
   ============================================= */

@media (max-width: 767px) {
  .unified-profile-large {
    padding: 1.25rem;
  }

  .unified-profile-large__avatar {
    width: 4rem;
    height: 4rem;
  }

  .unified-profile-large__name {
    font-size: 1.25rem;
  }

  .unified-profile-large__contact {
    font-size: 0.875rem;
  }

  .unified-profile-large__sources {
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }

  .unified-profile-large__source {
    padding: 0.75rem;
  }

  .unified-profile-large__source-header {
    font-size: 0.6875rem;
  }

  .unified-profile-large__source-data {
    font-size: 0.875rem;
  }

  .unified-profile-large__instant-win-row {
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  .unified-profile-large__coupon {
    margin-left: 0;
  }

  .unified-profile-large__enrichment-row {
    font-size: 0.875rem;
  }

  .unified-profile-large__tag {
    font-size: 0.75rem;
    padding: 0.25rem 0.5rem;
  }
}

/* =============================================
   Reduced Motion for Unified Profile
   ============================================= */

@media (prefers-reduced-motion: reduce) {
  .unified-profile-large__badge-row,
  .unified-profile-large__header,
  .unified-profile-large__source,
  .unified-profile-large__instant-win,
  .unified-profile-large__enrichment,
  .unified-profile-large__tags {
    opacity: 1;
    transform: none;
    transition: none;
  }
}