/* ── ModulesListBento (catalog on /modules) — ported from screens/Modules/ModulesListBento ── */
.modules-catalog { padding: 80px 0; background: white; }
.modules-catalog__inner { max-width: 1200px; margin: 0 auto; padding: 0 var(--space-8); }
.modules-catalog__sub { font-size: var(--font-size-lg); line-height: 1.6; color: var(--color-neutral-600); margin: 0 0 var(--space-16); max-width: 700px; }
.modules-category { margin-bottom: 72px; scroll-margin-top: 100px; }
.modules-category__header { margin-bottom: 28px; }
.modules-category__label { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink2); background: #F0EFF8; border-radius: 100px; padding: 6px 14px; margin-bottom: 10px; }
.modules-category__desc { font-size: 15px; line-height: 1.55; color: var(--ink2); margin: 0; max-width: 560px; font-weight: 300; }
.modules-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: var(--space-6); }
.module-card { display: flex; flex-direction: column; background: white; border: 1px solid var(--color-neutral-200); border-radius: 12px; overflow: hidden; text-decoration: none; transition: all var(--transition-base); }
.module-card:hover { border-color: var(--color-primary-500); box-shadow: 0 12px 32px rgba(53, 79, 239, 0.15); transform: translateY(-4px); }
.module-card__preview { position: relative; aspect-ratio: 16 / 10; background: var(--color-neutral-100); overflow: hidden; }
.module-card__preview img { width: 100%; height: 100%; object-fit: contain; transition: transform var(--transition-slow); }
.module-card:hover .module-card__preview img { transform: scale(1.05); }
.module-card__overlay { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.7) 100%); display: flex; align-items: flex-end; justify-content: center; padding: var(--space-4); opacity: 0; transition: opacity var(--transition-base); }
.module-card:hover .module-card__overlay { opacity: 1; }
.module-card__view-demo { color: white; font-size: var(--font-size-sm); font-weight: 600; padding: var(--space-2) var(--space-4); background: rgba(255, 255, 255, 0.2); backdrop-filter: blur(10px); border-radius: 6px; border: 1px solid rgba(255, 255, 255, 0.3); }
.module-card__content { padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-3); flex: 1; }
.module-card__title { font-size: var(--font-size-xl); font-weight: 600; color: var(--color-neutral-900); margin: 0; transition: color var(--transition-fast); }
.module-card:hover .module-card__title { color: var(--color-primary-500); }
.module-card__desc { font-size: var(--font-size-base); line-height: 1.6; color: var(--color-neutral-600); margin: 0; flex: 1; }
.module-card__tags { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: auto; }
.module-card__tag { font-size: var(--font-size-xs); padding: 4px 10px; background: rgba(53, 79, 239, 0.08); color: var(--color-primary-600); border-radius: 4px; font-weight: 500; }
@media (max-width: 768px) {
  .modules-catalog { padding: 60px 0; }
  .modules-grid { grid-template-columns: 1fr; }
}

/* Custom-module CTA banner (screens/Modules/index.tsx inline styles → real classes) */
.custom-module-banner-wrap { padding: 0 80px 80px; }
.custom-module-banner-inner { max-width: 1400px; margin: 0 auto; }
.custom-module-banner { background: #f8f9ff; border: 1px solid rgba(53,79,239,0.1); border-radius: 16px; padding: 48px 56px; display: flex; align-items: center; justify-content: space-between; gap: 48px; flex-wrap: wrap; }
.custom-module-banner__label { font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--primary); margin-bottom: 12px; }
.custom-module-banner__copy { flex: 1; min-width: 280px; }
.custom-module-banner__copy h3 { font-family: var(--font-display); font-size: 28px; line-height: 1.2; letter-spacing: -0.3px; margin-bottom: 10px; color: var(--text); font-weight: 700; }
.custom-module-banner__copy h3 em { font-style: italic; color: var(--primary); }
.custom-module-banner__copy p { font-size: 14px; color: var(--text-light); line-height: 1.6; margin: 0; max-width: 480px; }
.custom-module-banner__actions { display: flex; gap: 12px; flex-shrink: 0; flex-wrap: wrap; }
@media (max-width: 768px) {
  .custom-module-banner-wrap { padding: 0 20px 60px; }
  .custom-module-banner { padding: 32px; }
  /* Source uses raw inline styles here with flexShrink:0 and no responsive
     handling, which overflows the viewport on narrow screens — this override
     lets the actions row wrap/stack instead, without changing desktop layout. */
  .custom-module-banner__actions { flex-shrink: 1; width: 100%; }
  .custom-module-banner__actions .btn-primary,
  .custom-module-banner__actions .btn-secondary { flex: 1; justify-content: center; text-align: center; }
}