/* =====================================================================
   Welcome Page Styles
   Version: 1.0.0
   Work Item #890: Welcome Page Redesign
   ===================================================================== */

/* Welcome Page Container */
.mw-welcome-page {
    background: var(--mw-color-background);
}

/* -----------------------------------------------------------------
   Hero Section
   ----------------------------------------------------------------- */
.mw-hero-section {
    padding: var(--mw-spacing-8) 0;
    background: linear-gradient(135deg, var(--mw-color-primary-pale) 0%, var(--mw-color-surface) 100%);
    min-height: 70vh;
    display: flex;
    align-items: center;
}

.mw-hero-content {
    padding: var(--mw-spacing-6) 0;
}

.mw-hero-title {
    font-size: var(--mw-font-size-h1);
    font-weight: var(--mw-font-weight-bold);
    color: var(--mw-color-text-primary);
    line-height: 1.2;
    margin-bottom: var(--mw-spacing-4);
}

.mw-hero-highlight {
    color: var(--mw-color-primary);
    display: block;
}

.mw-hero-subtitle {
    font-size: var(--mw-font-size-body-large);
    color: var(--mw-color-text-secondary);
    line-height: var(--mw-line-height-body-large);
    margin-bottom: var(--mw-spacing-6);
}

.mw-hero-cta {
    display: flex;
    gap: var(--mw-spacing-4);
    flex-wrap: wrap;
}

.mw-cta-primary,
.mw-cta-secondary {
    min-width: 160px;
}

/* Hero Visual/Illustration */
.mw-hero-visual {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: var(--mw-spacing-6);
}

.mw-hero-illustration {
    position: relative;
    width: 100%;
    max-width: 400px;
    height: 300px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.mw-floating-icon {
    position: absolute;
    font-size: 48px !important;
    opacity: 0.15;
    color: var(--mw-color-primary);
    animation: float 6s ease-in-out infinite;
}

.mw-floating-icon-1 {
    top: 10%;
    left: 10%;
    animation-delay: 0s;
}

.mw-floating-icon-2 {
    top: 20%;
    right: 15%;
    animation-delay: 2s;
}

.mw-floating-icon-3 {
    bottom: 15%;
    left: 20%;
    animation-delay: 4s;
}

@keyframes float {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-20px);
    }
}

.mw-hero-card {
    background: var(--mw-color-surface);
    padding: var(--mw-spacing-6);
    border-radius: var(--mw-radius-lg);
    box-shadow: var(--mw-shadow-xl);
    text-align: center;
    position: relative;
    z-index: 1;
}

.mw-hero-card-days {
    display: flex;
    gap: var(--mw-spacing-1);
    justify-content: center;
    margin-top: var(--mw-spacing-3);
}

.mw-day-chip {
    background: var(--mw-color-primary-pale);
    color: var(--mw-color-primary);
    padding: var(--mw-spacing-1) var(--mw-spacing-2);
    border-radius: var(--mw-radius-sm);
    font-size: var(--mw-font-size-caption);
    font-weight: var(--mw-font-weight-medium);
}

/* -----------------------------------------------------------------
   Social Proof Section
   ----------------------------------------------------------------- */
.mw-social-proof-section {
    padding: var(--mw-spacing-6) 0;
    background: var(--mw-color-surface);
    border-top: 1px solid var(--mw-color-border-light);
    border-bottom: 1px solid var(--mw-color-border-light);
}

.mw-stat-card {
    text-align: center;
    padding: var(--mw-spacing-4);
}

.mw-stat-number {
    font-weight: var(--mw-font-weight-bold);
    color: var(--mw-color-text-primary);
    margin: var(--mw-spacing-2) 0;
}

/* -----------------------------------------------------------------
   Feature Showcase Section
   ----------------------------------------------------------------- */
.mw-feature-showcase-section {
    padding: var(--mw-spacing-6) 0;
    background: var(--mw-color-background);
}

/* -----------------------------------------------------------------
   Features Section
   ----------------------------------------------------------------- */
.mw-features-section {
    padding: var(--mw-spacing-8) 0;
    background: var(--mw-color-surface);
}

.mw-section-header {
    text-align: center;
    margin-bottom: var(--mw-spacing-7);
}

.mw-section-title {
    font-weight: var(--mw-font-weight-bold);
    color: var(--mw-color-text-primary);
    margin-bottom: var(--mw-spacing-2);
}

.mw-section-subtitle {
    max-width: 600px;
    margin: 0 auto;
}

.mw-feature-card {
    background: var(--mw-color-background);
    border-radius: var(--mw-radius-lg);
    padding: var(--mw-spacing-4);
    height: 100%;
    transition: transform var(--mw-transition-default), box-shadow var(--mw-transition-default);
}

.mw-feature-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--mw-shadow-lg);
}

.mw-feature-icon-wrapper {
    width: 64px;
    height: 64px;
    border-radius: var(--mw-radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto var(--mw-spacing-4);
}

.mw-feature-icon-primary {
    background: var(--mw-color-primary-pale);
    color: var(--mw-color-primary);
}

.mw-feature-icon-secondary {
    background: rgba(212, 175, 55, 0.12);
    color: var(--mw-color-secondary);
}

.mw-feature-icon-tertiary {
    background: rgba(0, 191, 165, 0.12);
    color: var(--mw-color-accent-mint);
}

.mw-feature-icon-warning {
    background: rgba(255, 193, 7, 0.12);
    color: var(--mw-color-warning);
}

.mw-feature-icon-info {
    background: rgba(2, 136, 209, 0.12);
    color: var(--mw-color-info);
}

.mw-feature-icon-success {
    background: rgba(46, 139, 87, 0.12);
    color: var(--mw-color-success);
}

.mw-feature-title {
    font-weight: var(--mw-font-weight-semibold);
    margin-bottom: var(--mw-spacing-2);
}

/* -----------------------------------------------------------------
   How It Works Section
   ----------------------------------------------------------------- */
.mw-how-it-works-section {
    padding: var(--mw-spacing-8) 0;
    background: var(--mw-color-background);
}

.mw-step-card {
    text-align: center;
    padding: var(--mw-spacing-5);
    position: relative;
}

.mw-step-number {
    width: 40px;
    height: 40px;
    background: var(--mw-color-primary);
    color: var(--mw-color-text-inverse);
    border-radius: var(--mw-radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--mw-font-weight-bold);
    font-size: var(--mw-font-size-body-large);
    margin: 0 auto var(--mw-spacing-4);
}

.mw-step-title {
    font-weight: var(--mw-font-weight-semibold);
    margin: var(--mw-spacing-3) 0 var(--mw-spacing-2);
}

/* -----------------------------------------------------------------
   Pricing Teaser Section
   ----------------------------------------------------------------- */
.mw-pricing-teaser-section {
    padding: var(--mw-spacing-8) 0;
    background: var(--mw-color-surface);
}

.mw-pricing-teaser-card {
    padding: var(--mw-spacing-6);
    border-radius: var(--mw-radius-lg);
    background: linear-gradient(135deg, var(--mw-color-primary-pale) 0%, var(--mw-color-surface) 100%);
}

.mw-pricing-features {
    display: flex;
    gap: var(--mw-spacing-2);
    flex-wrap: wrap;
}

/* -----------------------------------------------------------------
   Final CTA Section
   ----------------------------------------------------------------- */
.mw-final-cta-section {
    padding: var(--mw-spacing-8) 0;
    background: linear-gradient(135deg, var(--mw-color-primary) 0%, var(--mw-color-primary-dark) 100%);
    text-align: center;
}

.mw-final-cta-content {
    padding: var(--mw-spacing-6);
}

.mw-final-cta-title {
    color: var(--mw-color-text-inverse);
    font-weight: var(--mw-font-weight-bold);
    margin-bottom: var(--mw-spacing-3);
}

.mw-final-cta-subtitle {
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: var(--mw-spacing-6);
}

.mw-final-cta-buttons {
    display: flex;
    justify-content: center;
    gap: var(--mw-spacing-4);
}

.mw-cta-button-large {
    background: var(--mw-color-surface) !important;
    color: var(--mw-color-primary) !important;
}

.mw-cta-button-large:hover {
    background: var(--mw-color-primary-pale) !important;
}

/* -----------------------------------------------------------------
   Responsive Styles
   ----------------------------------------------------------------- */
@media (max-width: 768px) {
    .mw-hero-section {
        min-height: auto;
        padding: var(--mw-spacing-6) 0;
    }

    .mw-hero-title {
        font-size: var(--mw-font-size-h3);
    }

    .mw-hero-visual {
        order: -1;
    }

    .mw-hero-illustration {
        height: 200px;
    }

    .mw-hero-cta {
        flex-direction: column;
    }

    .mw-cta-primary,
    .mw-cta-secondary {
        width: 100%;
    }

    .mw-step-card {
        padding: var(--mw-spacing-4);
    }

    .mw-pricing-teaser-card {
        text-align: center;
    }

    .mw-pricing-features {
        justify-content: center;
    }

    .mw-final-cta-buttons {
        flex-direction: column;
        align-items: center;
    }
}

/* -----------------------------------------------------------------
   Dark Mode Adjustments
   ----------------------------------------------------------------- */
.mud-theme-dark .mw-hero-section,
[data-theme="dark"] .mw-hero-section {
    background: linear-gradient(135deg, var(--mw-color-surface) 0%, var(--mw-color-background) 100%);
}

.mud-theme-dark .mw-hero-card,
[data-theme="dark"] .mw-hero-card {
    background: var(--mw-color-surface-elevated);
}

.mud-theme-dark .mw-feature-card,
[data-theme="dark"] .mw-feature-card {
    background: var(--mw-color-surface);
}

.mud-theme-dark .mw-pricing-teaser-card,
[data-theme="dark"] .mw-pricing-teaser-card {
    background: linear-gradient(135deg, var(--mw-color-surface) 0%, var(--mw-color-surface-elevated) 100%);
}