/* ==========================================================================
   „Wszystko, czego potrzebuje dział sprzedaży” – wariant na ciemnym tle.
   Usuń klasę .bento-dark z sekcji, żeby wrócić do jasnej wersji.
   ========================================================================== */
.bento-section.bento-dark {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(ellipse 60% 50% at 15% 0%, rgba(12, 146, 86, .22), transparent 70%),
        radial-gradient(ellipse 50% 40% at 95% 100%, rgba(124, 199, 155, .12), transparent 70%),
        #0b1713;
    color: #ffffff;
}
.bento-dark .highlight-above-heading { color: #7cc79b; }
.bento-dark .heading-two { color: #ffffff; }

.bento-dark .bento-card {
    background: linear-gradient(170deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .025));
    border: 1px solid rgba(255, 255, 255, .09);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
    transition: border-color .3s, background .3s;
}
.bento-dark .bento-card:hover { border-color: rgba(124, 199, 155, .35); background: linear-gradient(170deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, .035)); }
.bento-dark .bento-icon { background: rgba(124, 199, 155, .14); color: #7cc79b; }
.bento-dark .bento-title { color: #ffffff; }
.bento-dark .bento-desc { color: #a9b6b0; }

/* Makiety panelu zostają jasne – wyglądają jak prawdziwy ekran na ciemnym tle */
.bento-dark .bento-mock { box-shadow: 0 24px 50px rgba(0, 0, 0, .35); }

/* Przycisk zakupu w karcie „Wygląd pod Twoją markę” */
.bento-cta { align-self: flex-start; margin-top: 22px; display: inline-flex; align-items: center; gap: 10px; padding: 6px 6px 6px 18px; border-radius: 999px; background: #ffffff; color: #101c19; font-family: 'Inter', 'Inter Fallback', Arial, sans-serif; font-size: 14px; font-weight: 500; text-decoration: none; transition: background .25s, color .25s; }
.bento-cta-ico { width: 28px; height: 28px; border-radius: 50%; background: #101c19; color: #ffffff; display: flex; align-items: center; justify-content: center; transition: transform .3s; }
.bento-cta-ico svg { width: 13px; height: 13px; }
.bento-cta:hover { background: #a8e6c0; }
.bento-cta:hover .bento-cta-ico { transform: translateX(2px); }
.bento-section:not(.bento-dark) .bento-cta { background: #101c19; color: #ffffff; }
.bento-section:not(.bento-dark) .bento-cta-ico { background: #ffffff; color: #101c19; }
.bento-cta-label { white-space: nowrap; }

/* Bez podnoszenia elementów po najechaniu myszką */
.bento-dark .bento-card:hover .bento-mock { transform: none; }
.bento-dark .bento-card, .bento-dark .bento-card:hover { transform: none; }