/**
 * Professional Landing Page - Isolated Styles
 * Only loaded on the professional upgrade page
 */

/* Enhanced Hero Alert Badge */
.hero-alert-badge {display: inline-flex;margin-bottom: 28px;animation: bounce-attention 3s ease-in-out infinite;}
@keyframes bounce-attention {0%, 100% {transform: translateY(0);} 50% {transform: translateY(-8px);}}
.hero-message .hero-alert {display: inline-flex;align-items: center;justify-content: center;gap: 8px;min-width: 180px;padding: 14px 40px;border-radius: 999px;background: linear-gradient(120deg, #FFE3E3 0%, #FFCBCB 100%);color: #C82033;letter-spacing: 0.28em;position: relative;z-index: 1;box-shadow: 0 18px 32px rgba(215, 38, 61, 0.35), 0 0 0 4px rgba(255, 227, 227, 0.3);text-shadow: none;border: 2px solid rgba(200, 32, 51, 0.2);}

/* Enhanced Qualifier with Lines */
.hero-qualifier {display: flex;align-items: center;gap: 16px;color: rgba(255, 199, 141, 0.95);letter-spacing: 0.28em;text-transform: uppercase;margin: 0 auto 8px;text-shadow: 0 4px 12px rgba(255, 199, 141, 0.4);}
.hero-qualifier-line {display: inline-block;width: 50px;height: 2px;background: linear-gradient(90deg, transparent, rgba(255, 199, 141, 0.6), transparent);}

/* Enhanced Headline */
.hero-headline--enhanced {display: flex;flex-direction: column;gap: 12px;}
.hero-headline-emphasis--gradient {position: relative;display: inline-block;animation: glow-pulse 3s ease-in-out infinite;}
@keyframes glow-pulse {0%, 100% {filter: drop-shadow(0 0 20px rgba(231, 114, 255, 0.4));} 50% {filter: drop-shadow(0 0 35px rgba(231, 114, 255, 0.7));}}
.hero-headline-secondary {display: block;font-size: 0.72em;color: rgba(255, 255, 255, 0.9);letter-spacing: -1.2px;margin-top: 8px;font-weight: 600;}

/* Enhanced Subheadline */
.hero-subheadline-container {position: relative;padding: 20px 0;}
.hero-subheadline--enhanced {background: linear-gradient(135deg, rgba(103, 45, 255, 0.12) 0%, rgba(231, 114, 255, 0.08) 100%);padding: 20px 32px;border-radius: 24px;border: 1px solid rgba(103, 45, 255, 0.25);box-shadow: 0 12px 32px rgba(103, 45, 255, 0.15);backdrop-filter: blur(10px);}
.hero-subheadline-icon {font-size: 0.8em;opacity: 0.9;animation: sparkle 2s ease-in-out infinite;}
@keyframes sparkle {0%, 100% {opacity: 0.6;transform: scale(1);} 50% {opacity: 1;transform: scale(1.15);}}
.hero-subheadline-highlight {position: relative;font-weight: 700;color: #FFE1B8;letter-spacing: 0.04em;padding: 0 4px;}
.hero-subheadline-highlight::after {content: "";position: absolute;left: 0;bottom: -2px;width: 100%;height: 8px;background: linear-gradient(90deg, rgba(255, 199, 141, 0.35) 0%, rgba(231, 114, 255, 0.4) 60%, rgba(155, 60, 255, 0.45) 100%);border-radius: 999px;opacity: 0.75;z-index: -1;}

/* Enhanced Divider */
.hero-divider--enhanced {position: relative;width: 280px;height: 2px;border: none;background: linear-gradient(90deg, transparent, rgba(255, 199, 141, 0.6), rgba(231, 114, 255, 0.6), rgba(155, 60, 255, 0.6), transparent);margin: 20px auto;border-radius: 999px;}
.hero-divider--enhanced::before, .hero-divider--enhanced::after {content: "✦";position: absolute;top: 50%;transform: translateY(-50%);color: rgba(231, 114, 255, 0.8);font-size: 12px;}
.hero-divider--enhanced::before {left: -20px;}
.hero-divider--enhanced::after {right: -20px;}

/* Scarcity Bar Styles */
.scarcity-bar-container {width: 100%;max-width: 320px;height: 10px;background: rgba(13, 8, 36, 0.6);border-radius: 999px;overflow: hidden;box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.4);position: relative;}
.scarcity-bar {height: 100%;background: linear-gradient(90deg, #3B68FF 0%, #2E4EDC 100%);border-radius: 999px;transition: width 0.6s ease, background 0.3s ease;box-shadow: 0 0 20px rgba(46, 78, 220, 0.5);position: relative;}
.scarcity-bar::after {content: '';position: absolute;top: 0;left: 0;right: 0;bottom: 0;background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.3) 50%, transparent 100%);animation: shimmer 2s infinite;}
@keyframes shimmer {0% {transform: translateX(-100%);} 100% {transform: translateX(100%);}}
.scarcity-bar--critical {background: linear-gradient(90deg, #FF3B3B 0%, #DC2E2E 100%);box-shadow: 0 0 24px rgba(220, 46, 46, 0.6);animation: pulse-bar 2s ease-in-out infinite;}
@keyframes pulse-bar {0%, 100% {box-shadow: 0 0 24px rgba(220, 46, 46, 0.6);} 50% {box-shadow: 0 0 32px rgba(220, 46, 46, 0.85);}}
.hero-scarcity .scarcity-counter {transition: all 0.3s ease;}
.hero-scarcity .scarcity-counter .digit {transition: all 0.3s ease;}
.hero-scarcity .scarcity-counter--critical .digit {background: linear-gradient(135deg, #FF3B3B 0%, #DC2E2E 100%);box-shadow: 0 20px 42px rgba(220, 46, 46, 0.45);animation: pulse-red 2s ease-in-out infinite;}
@keyframes pulse-red {0%, 100% {transform: scale(1);box-shadow: 0 20px 42px rgba(220, 46, 46, 0.45);} 50% {transform: scale(1.05);box-shadow: 0 24px 48px rgba(220, 46, 46, 0.6);}}

/* Compact Scarcity Counter for CTAs */
.cta-scarcity-compact {display: flex;flex-direction: row;align-items: center;justify-content: center;gap: 10px;flex-wrap: wrap;margin: 24px auto 20px;padding: 16px 24px;border-radius: 16px;background: linear-gradient(135deg, rgba(59, 104, 255, 0.08) 0%, rgba(46, 78, 220, 0.12) 100%);border: 1px solid rgba(59, 104, 255, 0.25);}
.cta-scarcity-compact--disclaimer {background: linear-gradient(135deg, #080418 0%, #0D0822 100%);border: 2px solid rgba(103, 45, 255, 0.35);box-shadow: 0 12px 32px rgba(8, 4, 24, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.08);}
.scarcity-compact-label {color: #ffffff;letter-spacing: 0.1em;white-space: nowrap;}
.cta-scarcity-compact--disclaimer .scarcity-compact-label {color: rgba(255, 255, 255, 0.95);text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);}
.scarcity-compact-counter {display: inline-flex;gap: 8px;justify-content: center;transition: all 0.3s ease;}
.digit-compact {display: inline-flex;align-items: center;justify-content: center;width: 36px;height: 42px;border-radius: 10px;background: linear-gradient(135deg, #3B68FF 0%, #2E4EDC 100%);color: #FFFFFF;font-size: 1.4rem;box-shadow: 0 8px 16px rgba(46, 78, 220, 0.3);font-weight: 700;letter-spacing: 0.08em;transition: all 0.3s ease;}
.scarcity-compact-counter--critical .digit-compact {background: linear-gradient(135deg, #FF3B3B 0%, #DC2E2E 100%);box-shadow: 0 8px 16px rgba(220, 46, 46, 0.4);animation: pulse-red-compact 2s ease-in-out infinite;}
@keyframes pulse-red-compact {0%, 100% {transform: scale(1);box-shadow: 0 8px 16px rgba(220, 46, 46, 0.4);} 50% {transform: scale(1.05);box-shadow: 0 10px 20px rgba(220, 46, 46, 0.55);}}
.scarcity-bar-compact-container {width: 100%;max-width: 280px;height: 6px;background: rgba(13, 8, 36, 0.4);border-radius: 999px;overflow: hidden;box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.3);position: relative;margin-top: 8px;}
.cta-scarcity-compact--disclaimer .scarcity-bar-compact-container {background: rgba(13, 8, 36, 0.6);box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.5);}
.scarcity-bar-compact {height: 100%;background: linear-gradient(90deg, #3B68FF 0%, #2E4EDC 100%);border-radius: 999px;transition: width 0.6s ease, background 0.3s ease;box-shadow: 0 0 12px rgba(46, 78, 220, 0.4);position: relative;}
.scarcity-bar-compact::after {content: '';position: absolute;top: 0;left: 0;right: 0;bottom: 0;background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.25) 50%, transparent 100%);animation: shimmer 2s infinite;}
.scarcity-bar-compact--critical {background: linear-gradient(90deg, #FF3B3B 0%, #DC2E2E 100%);box-shadow: 0 0 16px rgba(220, 46, 46, 0.5);animation: pulse-bar-compact 2s ease-in-out infinite;}
@keyframes pulse-bar-compact {0%, 100% {box-shadow: 0 0 16px rgba(220, 46, 46, 0.5);} 50% {box-shadow: 0 0 22px rgba(220, 46, 46, 0.7);}}

/* Enhanced Professional Benefits Styles */
.professional-benefits--enhanced {background: linear-gradient(180deg, #ffffff 0%, #f8f6ff 35%, #f3e8ff 70%, #ffffff 100%);padding: 160px 0;}
.professional-benefits--enhanced::before {background: radial-gradient(60% 60% at 50% 0%, rgba(103, 45, 255, 0.15) 0%, rgba(255, 199, 141, 0.08) 40%, rgba(255, 255, 255, 0) 70%);}
.benefits-kicker-badge {display: inline-block;padding: 14px 32px;border-radius: 999px;background: linear-gradient(135deg, rgba(103, 45, 255, 0.15) 0%, rgba(255, 199, 141, 0.2) 100%);color: #472ED1;letter-spacing: 0.12em;text-transform: uppercase;font-weight: 700;border: 2px solid rgba(103, 45, 255, 0.25);box-shadow: 0 12px 28px rgba(103, 45, 255, 0.15);animation: pulse-glow 3s ease-in-out infinite;}
@keyframes pulse-glow {0%, 100% {box-shadow: 0 12px 28px rgba(103, 45, 255, 0.15);} 50% {box-shadow: 0 16px 38px rgba(103, 45, 255, 0.28);}}
.benefits-grid--enhanced {gap: 36px 0;margin-top: 64px;}

/* Featured Benefit Cards */
.benefit-panel--featured {background: linear-gradient(135deg, #ffffff 0%, #faf8ff 100%);border: 2px solid rgba(103, 45, 255, 0.28);box-shadow: 0 32px 64px rgba(36, 35, 62, 0.14), 0 0 0 1px rgba(103, 45, 255, 0.1) inset;}
.benefit-panel--featured::before {content: "";position: absolute;top: 0;left: 0;right: 0;height: 6px;background: linear-gradient(90deg, #672DFF 0%, #E772FF 50%, #FFC78D 100%);border-radius: 32px 32px 0 0;}
.benefit-panel--featured:hover {transform: translateY(-12px);box-shadow: 0 48px 88px rgba(36, 35, 62, 0.2), 0 0 0 2px rgba(103, 45, 255, 0.3) inset;border-color: rgba(103, 45, 255, 0.45);}
.benefit-badge--large {width: 76px;height: 76px;font-size: 36px;background: linear-gradient(135deg, rgba(103, 45, 255, 0.22) 0%, rgba(231, 114, 255, 0.28) 100%);box-shadow: inset 0 0 0 2px rgba(103, 45, 255, 0.35), 0 12px 32px rgba(103, 45, 255, 0.2);border-radius: 22px;}

/* Gradient Text Effect */
.gradient-text-2 {background: linear-gradient(90deg, #672DFF 10%, #E772FF 50%, #FFC78D 90%);-webkit-background-clip: text;-webkit-text-fill-color: transparent;background-clip: text;}

/* Responsive Styles */
@media (max-width: 991px) {
  .professional-benefits--enhanced {padding: 130px 0;}
  .benefits-grid--enhanced {gap: 28px 0;margin-top: 52px;}
  .benefit-panel--featured::before {height: 5px;}
  .benefit-badge--large {width: 68px;height: 68px;font-size: 32px;}
  .hero-alert-badge {margin-bottom: 22px;}
  .hero-message .hero-alert {padding: 12px 32px;font-size: 1.1rem;}
  .hero-qualifier {gap: 12px;letter-spacing: 0.24em;}
  .hero-qualifier-line {width: 40px;}
  .hero-headline-secondary {font-size: 0.68em;}
  .hero-subheadline--enhanced {padding: 18px 24px;border-radius: 20px;}
  .hero-subheadline-icon {font-size: 0.75em;}
  .hero-divider--enhanced {width: 220px;}
  .hero-divider--enhanced::before, .hero-divider--enhanced::after {font-size: 10px;}
  .scarcity-bar-container {max-width: 280px;height: 9px;}
  .cta-scarcity-compact {gap: 8px;padding: 14px 20px;margin: 20px auto 18px;}
  .digit-compact {width: 32px;height: 38px;font-size: 1.2rem;}
  .scarcity-bar-compact-container {max-width: 240px;height: 5px;}
}

@media (max-width: 575px) {
  .professional-benefits--enhanced {padding: 100px 0;}
  .benefits-kicker-badge {padding: 12px 24px;font-size: 14px;letter-spacing: 0.1em;}
  .benefits-grid--enhanced {gap: 24px 0;margin-top: 42px;}
  .benefit-panel--featured {border-width: 1.5px;}
  .benefit-panel--featured::before {height: 4px;}
  .benefit-badge--large {width: 60px;height: 60px;font-size: 28px;border-radius: 18px;}
  .scarcity-bar-container {max-width: 240px;height: 8px;}
  .cta-scarcity-compact {gap: 6px;padding: 12px 16px;margin: 16px auto 14px;flex-direction: column;}
  .scarcity-compact-label {font-size: 0.75rem;letter-spacing: 0.08em;}
  .digit-compact {width: 28px;height: 34px;font-size: 1rem;border-radius: 8px;}
  .scarcity-bar-compact-container {max-width: 200px;height: 5px;}
  .hero-alert-badge {margin-bottom: 18px;}
  .hero-message .hero-alert {padding: 10px 24px;font-size: 0.95rem;letter-spacing: 0.22em;min-width: 140px;}
  .hero-qualifier {gap: 8px;letter-spacing: 0.2em;font-size: 0.85rem;flex-wrap: wrap;}
  .hero-qualifier-line {width: 30px;height: 1.5px;}
  .hero-headline--enhanced {gap: 8px;}
  .hero-headline-secondary {font-size: 0.65em;margin-top: 4px;}
  .hero-subheadline-container {padding: 14px 0;}
  .hero-subheadline--enhanced {padding: 16px 20px;border-radius: 18px;}
  .hero-subheadline-icon {font-size: 0.7em;display: none;}
  .hero-divider--enhanced {width: 180px;margin: 16px auto;}
  .hero-divider--enhanced::before {font-size: 8px;left: -16px;}
  .hero-divider--enhanced::after {font-size: 8px;right: -16px;}
}