/* ==========================================================================
   LUXURY HOLD-TO-REQUEST CTA BUTTON
   ========================================================================== */

   .sb-luxury-hero-cta {
    --transition-spring: 0.35s cubic-bezier(0.23, 1, 0.32, 1);
    --hold-progress: 0%;
    
    appearance: none;
    outline: none;
    min-width: 230px;
    height: 56px;
    padding: 0 30px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    white-space: nowrap;
    
    font-family: 'Satoshi', sans-serif;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: #F8FBFF;
    
    background: linear-gradient(180deg,
      rgba(255, 255, 255, 0.08) 0%,
      rgba(255, 255, 255, 0.02) 14%,
      rgba(30, 48, 120, 0.96) 15%,
      rgba(43, 74, 192, 0.98) 55%,
      rgba(26, 50, 153, 1.00) 100%
    );
    border: 1px solid rgba(212, 168, 67, 0.26);
    box-shadow: 
      0 10px 30px rgba(17, 25, 60, 0.34),
      0 4px 12px rgba(65, 105, 232, 0.24),
      inset 0 1px 0 rgba(255, 255, 255, 0.18),
      inset 0 -1px 0 rgba(0, 0, 0, 0.20);
      
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    
    transition: transform var(--transition-spring), box-shadow var(--transition-spring), border-color var(--transition-spring), background var(--transition-spring);
    user-select: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
  }
  
  /* LIGHT MODE BASE OVERRIDE */
  html.light-theme .sb-luxury-hero-cta {
    background: linear-gradient(180deg,
      rgba(255, 255, 255, 0.22) 0%,
      rgba(43, 74, 192, 0.96) 22%,
      rgba(26, 50, 153, 1.00) 100%
    );
  }
  
  /* TOP SHEEN */
  .sb-luxury-hero-cta::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 35%;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.30) 0%, rgba(255, 255, 255, 0.10) 35%, transparent 100%);
    opacity: 0.20;
    pointer-events: none;
    z-index: 1;
  }
  
  /* GOLD INNER RING */
  .sb-luxury-hero-cta::after {
    content: '';
    position: absolute;
    top: 1px;
    left: 1px;
    right: 1px;
    bottom: 1px;
    border-radius: inherit;
    border: 1px solid rgba(212, 168, 67, 0.14);
    pointer-events: none;
    z-index: 2;
  }
  
  /* PROGRESS OVERLAY (Internal Energy) */
  .sb-luxury-cta-progress {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at center, rgba(255,255,255,0.16) 0%, transparent 70%);
    opacity: 0;
    transform: scale(0);
    transition: opacity 0.2s ease, transform 0.1s linear;
    pointer-events: none;
    z-index: 0;
  }
  .sb-luxury-hero-cta.is-holding .sb-luxury-cta-progress {
    opacity: 1;
    /* transform scale will be driven by JS */
  }
  
  /* TEXT AND ICON Z-INDEX (Above overlays) */
  .sb-luxury-cta-content {
    position: relative;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    pointer-events: none;
  }
  
  /* SVG ICON STYLES */
  .sb-luxury-cta-icon {
    width: 16px;
    height: 16px;
    stroke: rgba(248, 251, 255, 0.88);
    stroke-width: 1.6;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform var(--transition-spring), stroke var(--transition-spring);
  }
  
  /* KEYFRAMES FOR ICON PULSE */
  @keyframes sb-icon-pulse {
    0% { transform: scale(1); opacity: 0.8; }
    50% { transform: scale(1.1); opacity: 1; }
    100% { transform: scale(1); opacity: 0.8; }
  }
  
  @keyframes sb-gold-bloom {
    0% { box-shadow: 0 0 0 rgba(212, 168, 67, 0); }
    50% { box-shadow: 0 0 60px rgba(212, 168, 67, 0.6); }
    100% { box-shadow: 0 0 38px rgba(212, 168, 67, 0.34); }
  }
  
  /* ==========================================================================
     INTERACTION STATES
     ========================================================================== */
  
  /* HOVER */
  .sb-luxury-hero-cta:hover:not(.is-holding):not(.is-completed) {
    transform: translateY(-1px) scale(1.015);
    border-color: rgba(212, 168, 67, 0.38);
    box-shadow: 
      0 14px 34px rgba(17, 25, 60, 0.38),
      0 8px 18px rgba(65, 105, 232, 0.28),
      0 0 0 1px rgba(212, 168, 67, 0.10),
      inset 0 1px 0 rgba(255, 255, 255, 0.20);
  }
  .sb-luxury-hero-cta:hover:not(.is-holding):not(.is-completed) .sb-luxury-cta-icon {
    transform: translateX(2px);
  }
  
  /* FOCUS (Accessibility) */
  .sb-luxury-hero-cta:focus-visible {
    box-shadow: 
      0 0 0 3px rgba(65, 105, 232, 0.22),
      0 0 0 6px rgba(212, 168, 67, 0.10);
  }
  
  /* PRESS / HOLD */
  .sb-luxury-hero-cta.is-holding {
    transform: scale(0.985);
    box-shadow: 
      0 5px 14px rgba(17, 25, 60, 0.30),
      inset 0 1px 0 rgba(255, 255, 255, 0.10);
  }
  .sb-luxury-hero-cta.is-holding .sb-luxury-cta-icon {
    animation: sb-icon-pulse 0.8s ease-in-out infinite;
  }
  
  /* COMPLETION STATE */
  .sb-luxury-hero-cta.is-completed {
    background: linear-gradient(180deg,
      rgba(255, 255, 255, 0.18) 0%,
      rgba(212, 168, 67, 0.92) 35%,
      rgba(184, 134, 11, 1.00) 100%
    );
    border-color: rgba(255, 255, 255, 0.3);
    color: #10131B;
    box-shadow: 
      0 0 38px rgba(212, 168, 67, 0.34),
      0 12px 28px rgba(184, 134, 11, 0.22),
      inset 0 1px 0 rgba(255, 255, 255, 0.24);
    animation: sb-gold-bloom 0.45s ease-out forwards;
  }
  
  /* Ensure light mode completion doesn't wash out */
  html.light-theme .sb-luxury-hero-cta.is-completed {
    background: linear-gradient(180deg,
      rgba(255, 255, 255, 0.18) 0%,
      rgba(212, 168, 67, 0.92) 35%,
      rgba(184, 134, 11, 1.00) 100%
    );
    color: #10131B;
  }
  
  .sb-luxury-hero-cta.is-completed .sb-luxury-cta-icon {
    stroke: #10131B; /* Make icon dark against gold */
    animation: none;
    transform: none;
  }