/* ========================================================================
   SMG PRODUCT SPOTLIGHT WIDGET - MODERN BENTO GRID STYLE
   Produkt-Präsentation im modernen Dashboard-Design
   ======================================================================== */

.smg-product-spotlight {
    padding: 6rem 0;
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
    position: relative;
    overflow: hidden;
}

.smg-product-spotlight::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        radial-gradient(circle at 30% 20%, rgba(59, 130, 246, 0.03) 0%, transparent 50%),
        radial-gradient(circle at 70% 80%, rgba(220, 38, 38, 0.03) 0%, transparent 50%);
    z-index: 1;
}

.smg-product-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 2rem;
    position: relative;
    z-index: 2;
}

/* BENTO GRID LAYOUT
   ======================================================================== */

.smg-bento-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: repeat(6, minmax(120px, auto));
    gap: 1.5rem;
    grid-template-areas: 
        "hero hero hero hero hero hero hero hero hero hero hero hero"
        "hero hero hero hero hero hero hero hero hero hero hero hero"
        "dashboard dashboard dashboard dashboard signage signage signage signage mobile mobile mobile mobile"
        "dashboard dashboard dashboard dashboard signage signage signage signage mobile mobile mobile mobile"
        "integration integration integration integration integration integration benefits benefits benefits benefits benefits benefits"
        "integration integration integration integration integration integration benefits benefits benefits benefits benefits benefits";
}

/* HERO SECTION - Main Product Introduction
   ======================================================================== */

.smg-hero-card {
    grid-area: hero;
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
    border-radius: 24px;
    padding: 4rem;
    position: relative;
    overflow: hidden;
    box-shadow: 
        0 20px 60px rgba(0, 0, 0, 0.08),
        0 1px 0 rgba(255, 255, 255, 0.9),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(20px);
}

.smg-hero-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #dc2626 0%, #3b82f6 100%);
    border-radius: 24px 24px 0 0;
}

.smg-product-title {
    font-family: var(--font-secondary);
    font-size: clamp(2.5rem, 4vw, 3.5rem);
    font-weight: 900;
    background: linear-gradient(135deg, #1e293b 0%, #dc2626 50%, #3b82f6 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 1rem;
    line-height: 1.1;
    letter-spacing: -0.02em;
}

.smg-product-subtitle {
    font-size: 1.4rem;
    color: #64748b;
    font-weight: 600;
    margin-bottom: 2rem;
    line-height: 1.4;
}

.smg-product-intro {
    font-size: 1.1rem;
    color: #64748b;
    line-height: 1.6;
    max-width: 800px;
}

/* DASHBOARD COMPONENT CARD
   ======================================================================== */

.smg-dashboard-card {
    grid-area: dashboard;
    background: linear-gradient(135deg, #fff7ed 0%, #ffffff 100%);
    border-radius: 20px;
    padding: 2.5rem;
    position: relative;
    overflow: hidden;
    border: 1px solid #fed7aa;
    box-shadow: 0 12px 40px rgba(251, 146, 60, 0.15);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.smg-dashboard-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 25px 80px rgba(251, 146, 60, 0.25);
}

.smg-dashboard-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #f97316 0%, #ea580c 100%);
    border-radius: 20px 20px 0 0;
}

.smg-component-icon {
    width: 60px;
    height: 60px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.smg-component-icon i {
    color: white !important;
    font-size: 1.8rem !important;
    z-index: 2;
    position: relative;
}

.smg-component-icon svg {
    width: 1.8rem !important;
    height: 1.8rem !important;
    fill: white !important;
    color: white !important;
    z-index: 2;
    position: relative;
}

.smg-dashboard-card .smg-component-icon {
    background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
    color: white;
}

.smg-dashboard-card:hover .smg-component-icon {
    transform: scale(1.1) rotate(5deg);
    box-shadow: 0 12px 32px rgba(249, 115, 22, 0.4);
}

.smg-component-title {
    font-family: var(--font-secondary);
    font-size: 1.4rem;
    font-weight: 800;
    color: #1e293b;
    margin-bottom: 1rem;
    line-height: 1.3;
}

.smg-component-description {
    color: #64748b;
    line-height: 1.6;
    font-size: 0.95rem;
}

.smg-component-badge {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: rgba(249, 115, 22, 0.1);
    color: #ea580c;
    padding: 0.25rem 0.75rem;
    border-radius: 12px;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* DIGITAL SIGNAGE CARD
   ======================================================================== */

.smg-signage-card {
    grid-area: signage;
    background: linear-gradient(135deg, #eff6ff 0%, #ffffff 100%);
    border-radius: 20px;
    padding: 2.5rem;
    position: relative;
    overflow: hidden;
    border: 1px solid #bfdbfe;
    box-shadow: 0 12px 40px rgba(59, 130, 246, 0.15);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.smg-signage-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 25px 80px rgba(59, 130, 246, 0.25);
}

.smg-signage-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #3b82f6 0%, #1d4ed8 100%);
    border-radius: 20px 20px 0 0;
}

.smg-signage-card .smg-component-icon {
    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
    color: white;
}

.smg-signage-card:hover .smg-component-icon {
    transform: scale(1.1) rotate(-5deg);
    box-shadow: 0 12px 32px rgba(59, 130, 246, 0.4);
}

.smg-signage-card .smg-component-badge {
    background: rgba(59, 130, 246, 0.1);
    color: #1d4ed8;
}

/* MOBILE APP CARD
   ======================================================================== */

.smg-mobile-card {
    grid-area: mobile;
    background: linear-gradient(135deg, #f0fdf4 0%, #ffffff 100%);
    border-radius: 20px;
    padding: 2.5rem;
    position: relative;
    overflow: hidden;
    border: 1px solid #bbf7d0;
    box-shadow: 0 12px 40px rgba(34, 197, 94, 0.15);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.smg-mobile-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 25px 80px rgba(34, 197, 94, 0.25);
}

.smg-mobile-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #22c55e 0%, #16a34a 100%);
    border-radius: 20px 20px 0 0;
}

.smg-mobile-card .smg-component-icon {
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
    color: white;
}

.smg-mobile-card:hover .smg-component-icon {
    transform: scale(1.1) rotate(5deg);
    box-shadow: 0 12px 32px rgba(34, 197, 94, 0.4);
}

.smg-mobile-card .smg-component-badge {
    background: rgba(34, 197, 94, 0.1);
    color: #16a34a;
}

/* INTEGRATION CARD
   ======================================================================== */

.smg-integration-card {
    grid-area: integration;
    background: linear-gradient(135deg, #fef3f2 0%, #ffffff 100%);
    border-radius: 20px;
    padding: 3rem;
    position: relative;
    overflow: hidden;
    border: 1px solid #fecaca;
    box-shadow: 0 12px 40px rgba(239, 68, 68, 0.15);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.smg-integration-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 25px 80px rgba(239, 68, 68, 0.25);
}

.smg-integration-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #dc2626 0%, #b91c1c 100%);
    border-radius: 20px 20px 0 0;
}

.smg-integration-card .smg-component-icon {
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
    color: white;
    margin-bottom: 2rem;
    width: 70px;
    height: 70px;
    font-size: 2rem;
}

.smg-integration-card .smg-component-icon i {
    color: white !important;
    font-size: 2rem !important;
}

.smg-integration-card .smg-component-icon svg {
    width: 2rem !important;
    height: 2rem !important;
    fill: white !important;
    color: white !important;
}

.smg-integration-card:hover .smg-component-icon {
    transform: scale(1.1) rotate(-5deg);
    box-shadow: 0 12px 32px rgba(220, 38, 38, 0.4);
}

.smg-integration-features {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: 1.5rem;
}

.smg-integration-feature {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    background: rgba(255, 255, 255, 0.6);
    border-radius: 12px;
    border: 1px solid rgba(220, 38, 38, 0.1);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.smg-integration-feature:hover {
    background: rgba(255, 255, 255, 0.9);
    transform: translateX(8px);
}

.smg-integration-feature-icon {
    width: 20px;
    height: 20px;
    border-radius: 6px;
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(220, 38, 38, 0.3);
    transition: all 0.3s ease;
}

.smg-integration-feature-icon i {
    color: white !important;
    font-size: 0.8rem !important;
}

.smg-integration-feature-icon svg {
    width: 0.8rem !important;
    height: 0.8rem !important;
    fill: white !important;
    color: white !important;
}

.smg-integration-feature-text {
    font-size: 0.9rem;
    font-weight: 600;
    color: #374151;
}

/* BENEFITS CARD
   ======================================================================== */

.smg-benefits-card {
    grid-area: benefits;
    background: linear-gradient(135deg, #f5f3ff 0%, #ffffff 100%);
    border-radius: 20px;
    padding: 3rem;
    position: relative;
    overflow: hidden;
    border: 1px solid #d8b4fe;
    box-shadow: 0 12px 40px rgba(147, 51, 234, 0.15);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.smg-benefits-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 25px 80px rgba(147, 51, 234, 0.25);
}

.smg-benefits-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #9333ea 0%, #7c3aed 100%);
    border-radius: 20px 20px 0 0;
}

.smg-benefits-card .smg-component-icon {
    background: linear-gradient(135deg, #9333ea 0%, #7c3aed 100%);
    color: white;
    margin-bottom: 2rem;
    width: 70px;
    height: 70px;
    font-size: 2rem;
}

.smg-benefits-card .smg-component-icon i {
    color: white !important;
    font-size: 2rem !important;
}

.smg-benefits-card .smg-component-icon svg {
    width: 2rem !important;
    height: 2rem !important;
    fill: white !important;
    color: white !important;
}

.smg-benefits-card:hover .smg-component-icon {
    transform: scale(1.1) rotate(5deg);
    box-shadow: 0 12px 32px rgba(147, 51, 234, 0.4);
}

.smg-benefits-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: 1.5rem;
}

.smg-benefit-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1rem;
    background: rgba(255, 255, 255, 0.6);
    border-radius: 12px;
    border: 1px solid rgba(147, 51, 234, 0.1);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.smg-benefit-item:hover {
    background: rgba(255, 255, 255, 0.9);
    transform: translateX(8px);
}

.smg-benefit-icon {
    width: 24px;
    height: 24px;
    border-radius: 8px;
    background: linear-gradient(135deg, #9333ea 0%, #7c3aed 100%);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    flex-shrink: 0;
    margin-top: 0.25rem;
    box-shadow: 0 2px 8px rgba(147, 51, 234, 0.3);
    transition: all 0.3s ease;
}

.smg-benefit-icon i {
    color: white !important;
    font-size: 0.9rem !important;
}

.smg-benefit-icon svg {
    width: 0.9rem !important;
    height: 0.9rem !important;
    fill: white !important;
    color: white !important;
}

.smg-benefit-content {
    flex: 1;
}

.smg-benefit-title {
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 0.25rem;
    font-size: 0.95rem;
}

.smg-benefit-description {
    font-size: 0.85rem;
    color: #64748b;
    line-height: 1.4;
}

/* CTA SECTION
   ======================================================================== */

.smg-product-cta {
    margin-top: 3rem;
    text-align: center;
    padding: 2rem;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(10px);
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.smg-product-cta .smg-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1.25rem 2.5rem;
    font-weight: 700;
    text-decoration: none !important;
    border-radius: 16px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    min-width: 180px;
    justify-content: center;
}

.smg-product-cta .smg-btn i {
    font-size: 1.1rem;
    transition: transform 0.3s ease;
}

.smg-product-cta .smg-btn:hover i {
    transform: scale(1.2);
}

.smg-product-cta .smg-btn-primary {
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
    color: white !important;
    box-shadow: 0 8px 25px rgba(220, 38, 38, 0.3);
}

.smg-product-cta .smg-btn-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 35px rgba(220, 38, 38, 0.4);
    background: linear-gradient(135deg, #b91c1c 0%, #991b1b 100%);
}

.smg-product-cta .smg-btn-outline {
    background: white;
    color: #dc2626 !important;
    border: 2px solid #dc2626;
    box-shadow: 0 4px 15px rgba(220, 38, 38, 0.1);
}

.smg-product-cta .smg-btn-outline:hover {
    background: #dc2626;
    color: white !important;
    transform: translateY(-3px);
    box-shadow: 0 15px 35px rgba(220, 38, 38, 0.3);
}

/* RESPONSIVE DESIGN
   ======================================================================== */

@media (max-width: 1200px) {
    .smg-bento-grid {
        grid-template-columns: repeat(8, 1fr);
        grid-template-rows: repeat(8, minmax(100px, auto));
        grid-template-areas: 
            "hero hero hero hero hero hero hero hero"
            "hero hero hero hero hero hero hero hero"
            "dashboard dashboard dashboard dashboard signage signage signage signage"
            "dashboard dashboard dashboard dashboard signage signage signage signage"
            "mobile mobile mobile mobile mobile mobile mobile mobile"
            "integration integration integration integration benefits benefits benefits benefits"
            "integration integration integration integration benefits benefits benefits benefits"
            "integration integration integration integration benefits benefits benefits benefits";
    }
}

@media (max-width: 768px) {
    .smg-product-spotlight {
        padding: 4rem 0;
    }

    .smg-product-container {
        padding: 0 1rem;
    }

    .smg-bento-grid {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        grid-template-areas: 
            "hero"
            "dashboard"
            "signage"
            "mobile"
            "integration"
            "benefits";
        gap: 1rem;
    }

    .smg-hero-card {
        padding: 2.5rem;
    }

    .smg-dashboard-card,
    .smg-signage-card,
    .smg-mobile-card {
        padding: 2rem;
    }

    .smg-integration-card,
    .smg-benefits-card {
        padding: 2rem;
    }

    .smg-component-icon {
        width: 50px;
        height: 50px;
        font-size: 1.5rem;
    }

    .smg-component-icon i {
        font-size: 1.5rem !important;
    }

    .smg-component-icon svg {
        width: 1.5rem !important;
        height: 1.5rem !important;
    }

    .smg-integration-card .smg-component-icon,
    .smg-benefits-card .smg-component-icon {
        width: 60px;
        height: 60px;
        font-size: 1.8rem;
    }

    .smg-integration-card .smg-component-icon i,
    .smg-benefits-card .smg-component-icon i {
        font-size: 1.8rem !important;
    }

    .smg-integration-card .smg-component-icon svg,
    .smg-benefits-card .smg-component-icon svg {
        width: 1.8rem !important;
        height: 1.8rem !important;
    }

    .smg-product-cta {
        flex-direction: column;
        gap: 1rem;
        padding: 1.5rem;
    }

    .smg-product-cta .smg-btn {
        min-width: 200px;
        padding: 1rem 2rem;
    }
}

@media (max-width: 480px) {
    .smg-hero-card {
        padding: 2rem;
    }

    .smg-product-title {
        font-size: clamp(2rem, 8vw, 2.5rem);
    }

    .smg-dashboard-card,
    .smg-signage-card,
    .smg-mobile-card,
    .smg-integration-card,
    .smg-benefits-card {
        padding: 1.5rem;
    }

    .smg-component-icon {
        width: 45px;
        height: 45px;
        font-size: 1.3rem;
    }

    .smg-component-icon i {
        font-size: 1.3rem !important;
    }

    .smg-component-icon svg {
        width: 1.3rem !important;
        height: 1.3rem !important;
    }

    .smg-integration-card .smg-component-icon,
    .smg-benefits-card .smg-component-icon {
        width: 55px;
        height: 55px;
        font-size: 1.6rem;
    }

    .smg-integration-card .smg-component-icon i,
    .smg-benefits-card .smg-component-icon i {
        font-size: 1.6rem !important;
    }

    .smg-integration-card .smg-component-icon svg,
    .smg-benefits-card .smg-component-icon svg {
        width: 1.6rem !important;
        height: 1.6rem !important;
    }

    .smg-product-cta .smg-btn {
        min-width: 100%;
        padding: 1rem 1.5rem;
        font-size: 0.95rem;
    }
}