.features-bar-section {
  padding: var(--spacing-lg) 0;
  overflow: hidden;
}

.features-bar-container {
  display: grid;
  gap: var(--spacing-2xl);
  grid-template-columns: repeat(var(--desktop-cols, 4), 1fr);
  width: 100%;
}

/* Grid Columns Logic */
.features-bar-container.columns-1 {
  --desktop-cols: 1;
}
.features-bar-container.columns-2 {
  --desktop-cols: 2;
}
.features-bar-container.columns-3 {
  --desktop-cols: 3;
}
.features-bar-container.columns-4 {
  --desktop-cols: 4;
}
.features-bar-container.columns-5 {
  --desktop-cols: 5;
}
.features-bar-container.columns-6 {
  --desktop-cols: 6;
}

/* Tablet Columns */
.features-bar-container.columns-tablet-1 {
  --tablet-cols: 1;
}
.features-bar-container.columns-tablet-2 {
  --tablet-cols: 2;
}
.features-bar-container.columns-tablet-3 {
  --tablet-cols: 3;
}
.features-bar-container.columns-tablet-4 {
  --tablet-cols: 4;
}

/* Mobile Columns */
.features-bar-container.columns-mobile-1 {
  --mobile-cols: 1;
}
.features-bar-container.columns-mobile-2 {
  --mobile-cols: 2;
}

/* Dividers Logic */
.features-bar-container.has-dividers {
  gap: 0;
}

.has-dividers .feature-item {
  border-inline-end: 1px solid var(--color-border-light);
  border-bottom: 1px solid var(--color-border-light);
  padding: var(--spacing-xl);
}

/* Desktop: Remove end borders */
@media (min-width: 1025px) {
  .has-dividers.columns-1 .feature-item {
    border-inline-end: none;
  }
  .has-dividers.columns-2 .feature-item:nth-child(2n),
  .has-dividers.columns-3 .feature-item:nth-child(3n),
  .has-dividers.columns-4 .feature-item:nth-child(4n),
  .has-dividers.columns-5 .feature-item:nth-child(5n),
  .has-dividers.columns-6 .feature-item:nth-child(6n) {
    border-inline-end: none;
  }
}

/* Tablet: Remove end borders */
@media (max-width: 1024px) and (min-width: 641px) {
  .has-dividers.columns-tablet-1 .feature-item {
    border-inline-end: none;
  }
  .has-dividers.columns-tablet-2 .feature-item:nth-child(2n) {
    border-inline-end: none;
  }
  .has-dividers.columns-tablet-3 .feature-item:nth-child(3n) {
    border-inline-end: none;
  }
  .has-dividers.columns-tablet-4 .feature-item:nth-child(4n) {
    border-inline-end: none;
  }
}

/* Mobile: Remove end borders */
@media (max-width: 640px) {
  .has-dividers.columns-mobile-1 .feature-item {
    border-inline-end: none;
  }
  .has-dividers.columns-mobile-2 .feature-item:nth-child(2n) {
    border-inline-end: none;
  }
}

.feature-item {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  transition:
    transform var(--transition-base),
    box-shadow var(--transition-base),
    background-color var(--transition-base),
    border-color var(--transition-base);
}

.feature-icon {
  width: 64px;
  height: 64px;
  margin-bottom: var(--spacing-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-border-light);
  color: var(--color-accent);
  flex-shrink: 0;
  transition:
    transform var(--transition-base),
    background-color var(--transition-base),
    border-color var(--transition-base),
    color var(--transition-base);
}

.feature-icon img,
.feature-icon svg {
  width: 32px;
  height: 32px;
  object-fit: contain;
}

.feature-title {
  font-family: var(--font-heading);
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: var(--spacing-sm);
  color: var(--color-text);
}

.feature-subtitle {
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--color-text-muted);
  margin: 0;
}

/* --- Style 1: Minimalist Vertical --- */
.section-style_1 .feature-item {
  align-items: center;
  text-align: center;
}
.section-style_1 .feature-icon {
  border-radius: 50%;
  background: transparent;
  border: 1px solid var(--color-border);
}
.section-style_1 .feature-item:hover .feature-icon {
  background: var(--color-surface);
  border-color: var(--color-accent);
  color: var(--color-accent);
  transform: translateY(-5px);
}

/* --- Style 2: Refined Side-by-Side --- */
.section-style_2 .feature-item {
  flex-direction: row;
  align-items: flex-start;
  text-align: left;
  gap: var(--spacing-lg);
}
[dir="rtl"] .section-style_2 .feature-item {
  text-align: right;
}
.section-style_2 .feature-icon {
  width: 48px;
  height: 48px;
  margin-bottom: 0;
  background: transparent;
}
.section-style_2 .feature-item:hover .feature-icon {
  transform: translateX(5px);
}
[dir="rtl"] .section-style_2 .feature-item:hover .feature-icon {
  transform: translateX(-5px);
}

/* --- Style 3: Floating Modern Cards --- */
.section-style_3 .feature-item {
  background: var(--color-card-bg);
  padding: var(--spacing-xl);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-lg);
  /* box-shadow: var(--shadow-sm); */
  align-items: center;
  text-align: center;
}

/* Unified Card Grid Enhancement (Style 3 + Dividers) */
.section-style_3.has-dividers {
  background: var(--color-card-bg);
  border-radius: var(--radius-lg);
  /* box-shadow: var(--shadow-sm); */
  overflow: hidden;
  border: 1px solid var(--color-border-light);
}

.section-style_3.has-dividers .feature-item {
  border-radius: 0;
  box-shadow: none;
  border: none;
  border-inline-end: 1px solid var(--color-border-light);
  border-bottom: 1px solid var(--color-border-light);
}

.section-style_3 .feature-icon {
  background: var(--color-surface);
  border-radius: var(--radius-md);
}

.section-style_3 .feature-item:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-md);
  border-color: rgba(0, 0, 0, 0.05);
  z-index: 2; /* Lift item above dividers on hover */
}

.section-style_3.has-dividers .feature-item:hover {
  background: var(--color-surface);
  box-shadow: none;
  transform: none; /* Keep grid stable */
}

.section-style_3.has-dividers .feature-item:hover .feature-icon {
  transform: translateY(-5px);
}

/* Icon Shapes Global Override */
.feature-icon.shape-circle {
  border-radius: 50% !important;
}
.feature-icon.shape-square {
  border-radius: 0 !important;
}
.feature-icon.shape-squircle {
  border-radius: 35% 65% 65% 35% / 35% 35% 65% 65% !important;
}
.feature-icon.shape-none {
  background: transparent !important;
  padding: 0;
  width: auto;
  height: auto;
}

/* Responsive */
@media (max-width: 1024px) {
  .features-bar-container {
    grid-template-columns: repeat(var(--tablet-cols, 2), 1fr);
    gap: var(--spacing-xl);
  }
}

@media (max-width: 640px) {
  .features-bar-section {
    padding-top: var(--spacing-md) !important;
    padding-bottom: var(--spacing-md) !important;
  }
  .features-bar-container {
    grid-template-columns: repeat(var(--mobile-cols, 1), 1fr);
    gap: var(--spacing-lg);
  }
  .section-style_2 .feature-item {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .section-style_2 .feature-icon {
    margin-bottom: var(--spacing-md);
  }
}

/* ============================================
   DARK MODE REFINEMENTS
   ============================================ */

[data-theme="dark"] .feature-icon {
  background: var(--color-surface);
  border: 1px solid var(--color-border-light);
  color: var(--color-accent);
}

[data-theme="dark"] .feature-icon img {
  filter: brightness(0) invert(1);
  opacity: 0.9;
}

[data-theme="dark"] .feature-icon svg {
  color: var(--color-accent);
}

[data-theme="dark"] .has-dividers .feature-item {
  border-color: var(--color-border-light);
}

[data-theme="dark"] .feature-item:hover .feature-icon {
  background: var(--color-surface-hover);
  border-color: var(--color-border);
  transform: translateY(-4px);
}

[data-theme="dark"] .feature-title {
  color: var(--color-white-static);
  transition: all 0.3s ease;
}

[data-theme="dark"] .feature-item:hover .feature-title {
  color: var(--color-accent);
}

[data-theme="dark"] .feature-subtitle {
  color: var(--color-text-muted);
}

/* Specific Style Overrides for Dark Mode */
[data-theme="dark"] .section-style_1 .feature-icon {
  background: transparent;
  border-color: var(--color-border);
}

[data-theme="dark"] .section-style_3 .feature-item {
  background: var(--color-card-bg);
  border-color: var(--color-border-light);
}

[data-theme="dark"] .section-style_3 .feature-item:hover {
  background: var(--color-surface-hover);
  border-color: var(--color-border);
}

[data-theme="dark"] .section-style_3.has-dividers .feature-item:hover {
  background: var(--color-surface);
}

/* ============================================
   STYLE 4 — AUTO-SCROLL MARQUEE (like oden "benefits")
   ============================================ */
.features-marquee {
  overflow: hidden;
}

/* --- Sliding (more than 5 items) --- */
.features-marquee--sliding {
  /* Full-bleed: break out of the container so items slide off the screen edges */
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 5%, #000 95%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 5%, #000 95%, transparent);
}

.features-marquee--sliding .features-marquee-track {
  display: flex;
  align-items: center;
  width: max-content;
  gap: var(--spacing-2xl);
  will-change: transform;
  /* The list is repeated an even number of times; -50% shifts by a whole number of copies,
     so the loop is seamless with no white space. */
  animation: features-marquee-scroll var(--fm-duration, 40s) linear infinite;
}

.features-marquee--sliding:hover .features-marquee-track {
  animation-play-state: paused;
}

@keyframes features-marquee-scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

/* RTL: the track is anchored to the right edge, so it must scroll rightward
   (positive) — otherwise it pulls away from the right anchor and leaves a gap
   on the start (right) side. */
[dir="rtl"] .features-marquee--sliding .features-marquee-track {
  animation-name: features-marquee-scroll-rtl;
}

@keyframes features-marquee-scroll-rtl {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(50%);
  }
}

/* --- Static (5 or fewer items): centered row, wraps on small screens --- */
.features-marquee--static .features-marquee-track {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--spacing-2xl);
  row-gap: var(--spacing-lg);
}

/* Shared marquee item layout: icon beside text, never grows, never wraps */
.features-marquee .feature-item {
  flex: 0 0 auto;
  flex-direction: row;
  align-items: center;
  gap: var(--spacing-md);
  height: auto;
  text-align: start;
}

.features-marquee .feature-icon {
  margin-bottom: 0;
}

.features-marquee .feature-title {
  margin-bottom: 2px;
  white-space: nowrap;
}

.features-marquee .feature-subtitle {
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  .features-marquee--sliding .features-marquee-track {
    animation: none;
  }
}