/* ============================================
   SECTION 2: FEATURES - BACKUP STYLES
   ============================================ */

/* Section Features Background */
.section-features {
  background: #771FE9;
  overflow: visible; /* Allow animations to be visible */
}

/* Features Area Container */
.features-area {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 0 40px;
}

/* Features Grid - Base: Horizontal Scroll by default */
.features-grid {
  display: flex;
  gap: var(--gutter-desktop);
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE/Edge */
  width: 100%;
}

.features-grid::-webkit-scrollbar {
  display: none; /* Chrome/Safari */
}

/* Feature cards - Fixed width for scroll */
.features-grid .feature-card {
  flex: 0 0 auto;
  width: calc((100vw - 80px - var(--gutter-desktop) * 2) / 3);
  min-width: 300px;
}

/* Desktop: Show as grid (no scroll) */
@media (min-width: 1200px) {
  .features-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--gutter-desktop);
    max-width: 1170px; /* Точно 12 колонок Desktop */
    overflow: visible;
    width: 100%;
  }

  .features-grid .feature-card {
    width: auto;
    min-width: auto;
  }
}

/* Desktop 1200-1439px: уменьшаем шрифты для гарантии помещения контента */
@media (min-width: 1200px) and (max-width: 1439px) {
  .feature-card h3 {
    font-size: 18px; /* Уменьшено с 20px */
  }

  .feature-description {
    font-size: 14px; /* Уменьшено с 16px */
    line-height: 20px; /* Уменьшено с 22px */
  }
}

/* XL screens */
@media (min-width: 1440px) {
  .features-grid {
    max-width: 1320px; /* Точно 12 колонок XL */
    gap: var(--gutter-xl);
  }
}

/* XXL screens */
@media (min-width: 1920px) {
  .features-grid {
    max-width: 1680px; /* Точно 12 колонок XXL */
    gap: var(--gutter-xxl);
  }
}

/* Tablet MD Portrait: 2 columns × 3 rows grid (full cards) */
@media (min-width: 768px) and (max-width: 991px) and (orientation: portrait) {
  .section-features .features-area {
    position: relative;
    z-index: 100; /* Above mobile navigation */
  }

  .features-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(3, 1fr);
    gap: var(--gutter-md);
    overflow: visible;
    max-width: 724px; /* Точно 12 колонок MD */
    width: 100%;
    position: relative;
    z-index: 100; /* Above mobile navigation */
  }

  .features-grid .feature-card {
    width: auto;
    min-width: auto;
  }

  /* Hide landscape tablet line breaks on portrait tablets */
  .landscape-tablet-br {
    display: none !important;
  }
}

/* Tablet LG Portrait: 2 columns × 3 rows grid (full cards) */
@media (min-width: 992px) and (max-width: 1199px) and (orientation: portrait) {
  .section-features .features-area {
    position: relative;
    z-index: 100; /* Above mobile navigation */
  }

  .features-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(3, 1fr);
    gap: var(--gutter-lg);
    overflow: visible;
    max-width: 960px; /* Точно 12 колонок LG */
    width: 100%;
    position: relative;
    z-index: 100; /* Above mobile navigation */
  }

  .features-grid .feature-card {
    width: auto;
    min-width: auto;
  }

  /* Hide landscape tablet line breaks on portrait tablets */
  .landscape-tablet-br {
    display: none !important;
  }
}

/* Hide landscape tablet line breaks by default */
.landscape-tablet-br {
  display: none;
}

/* Tablet Landscape: Mobile accordion style (768-1199px landscape) */
@media (min-width: 768px) and (max-width: 1199px) and (orientation: landscape) {
  .section-features .features-area {
    padding: 40px 40px 40px 40px;
    align-items: center;
    justify-content: center;
    flex: 1;
    display: flex;
    min-height: 0;
    position: relative;
    z-index: 100;
    overflow: visible;
    margin: auto 0; /* Center vertically between hero-text and navigation */
  }

  .section-features .features-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: 1fr;
    gap: var(--gutter-md);
    position: relative;
    z-index: 100;
    overflow: visible;
    width: 100%;
    height: auto;
    margin: 0 auto;
    perspective: 1500px;
  }

  .features-grid .feature-card {
    width: auto;
    min-width: auto;
    cursor: pointer;
    padding: 0;
    display: flex;
    flex-direction: column;
    height: 150%; /* 1.5x of grid cell height */
    border: none;
    border-radius: 12px;
    overflow: hidden;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    will-change: transform, opacity;
  }

  /* Apply GPU acceleration only after animation completes */
  .features-grid .feature-card.animate {
    transform: translateZ(0);
  }

  /* Background colors - custom for landscape tablets */
  /* By default, all cards get light background */
  .features-grid .feature-card {
    background: #F6F8FE !important;
  }

  .features-grid .feature-card h3 {
    color: #2C2C2C !important;
  }

  /* Dark cards: 1, 3, 5 (swapped 3 and 4 from mobile) */
  .features-grid .feature-card:nth-child(1),
  .features-grid .feature-card:nth-child(3),
  .features-grid .feature-card:nth-child(5) {
    background: #5C0FBF !important;
  }

  .features-grid .feature-card:nth-child(1) h3,
  .features-grid .feature-card:nth-child(3) h3,
  .features-grid .feature-card:nth-child(5) h3 {
    color: var(--white) !important;
  }

  /* Icon switching for landscape tablets (INVERTED) */
  /* By default, show light icons */
  .features-grid .feature-card .feature-icon .icon-light {
    display: block !important;
  }

  .features-grid .feature-card .feature-icon .icon-dark {
    display: none !important;
  }

  /* Show dark icons for DARK cards: 1, 3, 5 */
  .features-grid .feature-card:nth-child(1) .feature-icon .icon-light,
  .features-grid .feature-card:nth-child(3) .feature-icon .icon-light,
  .features-grid .feature-card:nth-child(5) .feature-icon .icon-light {
    display: none !important;
  }

  .features-grid .feature-card:nth-child(1) .feature-icon .icon-dark,
  .features-grid .feature-card:nth-child(3) .feature-icon .icon-dark,
  .features-grid .feature-card:nth-child(5) .feature-icon .icon-dark {
    display: block !important;
  }

  /* Dark icons for LIGHT cards: 2, 4, 6 (by default) */

  .features-grid .feature-card .feature-header {
    display: flex;
    flex-direction: column;
    width: 100%;
    flex: 1;
    min-height: 0;
    gap: 0;
  }

  .features-grid .feature-card .feature-icon {
    flex: 1; /* Takes all available space */
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: auto;
    min-width: 0;
    min-height: 0;
    max-width: none;
    max-height: none;
    padding: 0;
    position: relative;
  }

  .features-grid .feature-card .feature-icon img {
    max-width: 70%;
    max-height: 70%;
    width: auto;
    height: auto;
    object-fit: contain;
  }

  .features-grid .feature-card .feature-header h3 {
    text-align: center;
    padding: 0 8px 16px 8px;
    font-size: 14px;
    line-height: 1.3;
    color: #F9FBFF;
    font-family: 'Fira Sans', sans-serif;
    font-weight: 400;
    margin: 0;
    margin-top: auto;
    flex-shrink: 0;
  }

  /* Show line breaks on landscape tablets (collapsed state only) */
  .landscape-tablet-br {
    display: inline;
  }

  /* Hide line breaks in expanded state */
  .feature-card.expanded .landscape-tablet-br {
    display: none !important;
  }

  /* Ensure titles are single line in expanded state */
  .features-grid .feature-card.expanded h3 {
    white-space: nowrap !important;
  }

  .features-grid .feature-card .feature-description {
    display: none;
  }

  /* Hide desktop-only text on tablet landscape */
  .section-features .desktop-only {
    display: none;
  }
}

/* Tablet MD Landscape: 12-column constraint */
@media (min-width: 768px) and (max-width: 991px) and (orientation: landscape) {
  .section-features .features-grid {
    max-width: 724px; /* 12 columns MD */
  }

  /* Expanded card - compact height */
  .features-grid .feature-card.expanded {
    height: auto !important;
    min-height: 0 !important;
    align-self: start !important;
  }
}

/* Tablet LG Landscape: 12-column constraint */
@media (min-width: 992px) and (max-width: 1199px) and (orientation: landscape) {
  .section-features .features-grid {
    max-width: 960px; /* 12 columns LG */
  }

  /* Expanded card - compact height */
  .features-grid .feature-card.expanded {
    height: auto !important;
    min-height: 0 !important;
    align-self: start !important;
  }
}

/* Mobile & Tablet: Expanded card view (ONLY < 1200px) */
@media (max-width: 1199px) {
  /* Close button and pagination - hidden by default */
  .feature-close {
    display: none;
  }

  .feature-pagination {
    display: none;
  }

  /* Expanded state - takes full grid */
  .features-grid .feature-card.expanded {
    grid-column: 1 / -1 !important;
    grid-row: 1 / -1 !important;
    z-index: 10 !important;
    padding: 24px !important;
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
    opacity: 1 !important;
    overflow: hidden !important; /* Prevent content from overflowing during animation */
  }

  /* Close button (X) in top-right corner */
  .features-grid .feature-card.expanded .feature-close {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    width: 48px !important;
    height: 48px !important;
    display: flex !important;
    align-items: flex-start !important;
    justify-content: flex-end !important;
    background: transparent !important;
    border: none !important;
    outline: none !important;
    cursor: pointer !important;
    padding: 16px 16px 0 0 !important;
    z-index: 9999 !important;
    pointer-events: all !important;
    -webkit-tap-highlight-color: transparent !important;
    order: 3 !important;
    touch-action: manipulation !important;
  }

  .features-grid .feature-card.expanded .feature-close svg {
    width: 16px !important;
    height: 16px !important;
    flex-shrink: 0 !important;
    pointer-events: none !important;
  }

  .features-grid .feature-card.expanded .feature-close svg path {
    transition: fill 0.6s ease;
  }

  .features-grid .feature-card.expanded .feature-close:hover {
    background: transparent !important;
  }

  /* Hide original header and description in expanded state */
  .features-grid .feature-card.expanded .feature-header {
    display: none !important;
  }

  .features-grid .feature-card.expanded > .feature-description {
    display: none !important;
  }

  /* Icon in expanded state - базовый 36px */
  .features-grid .feature-card.expanded .feature-icon {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
    max-width: 36px !important;
    max-height: 36px !important;
    padding: 0 !important;
    background: none !important;
    flex-shrink: 0 !important;
    justify-content: flex-start !important;
    align-items: flex-start !important;
  }

  .features-grid .feature-card.expanded .feature-icon img {
    width: 36px !important;
    height: 36px !important;
  }

  /* Icon switching in expanded state - Mobile & Tablet */
  .features-grid .feature-card.expanded .feature-icon .icon-light {
    display: none !important;
  }

  .features-grid .feature-card.expanded .feature-icon .icon-dark {
    display: block !important;
  }

  .features-grid .feature-card:nth-child(2).expanded .feature-icon .icon-light,
  .features-grid .feature-card:nth-child(3).expanded .feature-icon .icon-light,
  .features-grid .feature-card:nth-child(6).expanded .feature-icon .icon-light {
    display: block !important;
  }

  .features-grid .feature-card:nth-child(2).expanded .feature-icon .icon-dark,
  .features-grid .feature-card:nth-child(3).expanded .feature-icon .icon-dark,
  .features-grid .feature-card:nth-child(6).expanded .feature-icon .icon-dark {
    display: none !important;
  }

  /* Wrapper for icon + content (vertical layout) */
  .features-grid .feature-card.expanded .feature-content-wrapper {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    align-items: flex-start !important;
    order: 1 !important;
    flex: 1 !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  /* Content container for title + description (created dynamically) */
  .features-grid .feature-card.expanded .feature-content {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    padding: 0 !important;
    margin: 0 !important;
    flex: 1 !important;
    width: 100% !important;
  }

  .features-grid .feature-card.expanded .feature-content h3 {
    text-align: left !important;
    padding: 0 !important;
    margin: 0 !important;
    font-size: 20px !important;
    font-weight: 400 !important;
    flex: 0 !important;
    width: 100% !important;
  }

  .features-grid .feature-card.expanded .feature-content .feature-description {
    display: block !important;
    text-align: left !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 16px !important;
    line-height: 22px !important;
    flex: 1 !important;
    width: 100% !important;
  }

  /* Pagination dots at bottom */
  .features-grid .feature-card.expanded .feature-pagination {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: auto;
    margin-bottom: 8px;
    padding-top: 16px;
    order: 2 !important;
  }

  .feature-pagination .pagination-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    cursor: pointer;
    transition: width 0.5s cubic-bezier(0.65, 0, 0.35, 1),
                border-radius 0.5s cubic-bezier(0.65, 0, 0.35, 1),
                background 0.6s ease,
                opacity 0.3s ease;
    transform-origin: center;
  }

  .feature-pagination .pagination-dot.active {
    background: var(--white);
    width: 24px;
    border-radius: 4px;
  }

  .feature-pagination .pagination-dot:hover {
    background: rgba(255, 255, 255, 0.5);
  }

  /* Dark colors for pagination on light cards (2, 3, 6) */
  .features-grid .feature-card:nth-child(2).expanded .feature-pagination .pagination-dot,
  .features-grid .feature-card:nth-child(3).expanded .feature-pagination .pagination-dot,
  .features-grid .feature-card:nth-child(6).expanded .feature-pagination .pagination-dot {
    background: rgba(44, 44, 44, 0.3);
    transition: width 0.5s cubic-bezier(0.65, 0, 0.35, 1),
                border-radius 0.5s cubic-bezier(0.65, 0, 0.35, 1),
                background 0.6s ease,
                opacity 0.3s ease;
  }

  .features-grid .feature-card:nth-child(2).expanded .feature-pagination .pagination-dot.active,
  .features-grid .feature-card:nth-child(3).expanded .feature-pagination .pagination-dot.active,
  .features-grid .feature-card:nth-child(6).expanded .feature-pagination .pagination-dot.active {
    background: #2C2C2C;
  }

  .features-grid .feature-card:nth-child(2).expanded .feature-pagination .pagination-dot:hover,
  .features-grid .feature-card:nth-child(3).expanded .feature-pagination .pagination-dot:hover,
  .features-grid .feature-card:nth-child(6).expanded .feature-pagination .pagination-dot:hover {
    background: rgba(44, 44, 44, 0.5);
  }

  /* Dark color for close button on light cards (2, 3, 6) */
  .features-grid .feature-card:nth-child(2).expanded .feature-close svg path,
  .features-grid .feature-card:nth-child(3).expanded .feature-close svg path,
  .features-grid .feature-card:nth-child(6).expanded .feature-close svg path {
    fill: #2C2C2C;
  }

  /* Hide other cards when one is expanded */
  .features-grid.has-expanded .feature-card:not(.expanded) {
    display: none;
  }


  /* ====== ANIMATION VARIANTS ====== */
  /* Uncomment one of the sections below to change animation style */

  /* OPTION 1: FADE + FLIP - Text fades, icon flips */
  .features-grid .feature-card.expanded {
    /* Card stays in place, only background transitions */
    transition: background 0.6s ease;
  }

  /* Animate text (fade out) */
  .features-grid .feature-card.expanded .feature-content-wrapper.slide-out-left h3,
  .features-grid .feature-card.expanded .feature-content-wrapper.slide-out-right h3,
  .features-grid .feature-card.expanded .feature-content-wrapper.slide-out-left .feature-description,
  .features-grid .feature-card.expanded .feature-content-wrapper.slide-out-right .feature-description {
    animation: textFadeOut 0.6s ease forwards;
  }

  /* Animate text (fade in) */
  .features-grid .feature-card.expanded .feature-content-wrapper.slide-in-right h3,
  .features-grid .feature-card.expanded .feature-content-wrapper.slide-in-left h3,
  .features-grid .feature-card.expanded .feature-content-wrapper.slide-in-right .feature-description,
  .features-grid .feature-card.expanded .feature-content-wrapper.slide-in-left .feature-description {
    animation: textFadeIn 0.6s ease forwards;
  }

  /* Animate icon (flip out to LEFT - swipe left) */
  .features-grid .feature-card.expanded .feature-content-wrapper.slide-out-left .feature-icon {
    animation: iconFlipOutLeft 0.6s ease forwards;
    transform-style: preserve-3d;
    backface-visibility: hidden;
  }

  /* Animate icon (flip out to RIGHT - swipe right) */
  .features-grid .feature-card.expanded .feature-content-wrapper.slide-out-right .feature-icon {
    animation: iconFlipOutRight 0.6s ease forwards;
    transform-style: preserve-3d;
    backface-visibility: hidden;
  }

  /* Animate icon (flip in from RIGHT - swipe left) */
  .features-grid .feature-card.expanded .feature-content-wrapper.slide-in-right .feature-icon {
    animation: iconFlipInRight 0.6s ease forwards;
    transform-style: preserve-3d;
    backface-visibility: hidden;
  }

  /* Animate icon (flip in from LEFT - swipe right) */
  .features-grid .feature-card.expanded .feature-content-wrapper.slide-in-left .feature-icon {
    animation: iconFlipInLeft 0.6s ease forwards;
    transform-style: preserve-3d;
    backface-visibility: hidden;
  }

  /* OPTION 2: FLIP (Book effect) - 3D page flip
  .features-grid .feature-card.expanded {
    animation: none;
  }

  .features-grid .feature-card.slide-in-right {
    animation: flipInRight 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  }

  .features-grid .feature-card.slide-in-left {
    animation: flipInLeft 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  }

  .features-grid .feature-card.slide-out-left {
    animation: flipOutLeft 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  }

  .features-grid .feature-card.slide-out-right {
    animation: flipOutRight 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  }
  */

  /* OPTION 3: FADE + SCALE - Smooth zoom effect
  .features-grid .feature-card.expanded {
    animation: none;
  }

  .features-grid .feature-card.slide-in-right,
  .features-grid .feature-card.slide-in-left {
    animation: fadeScaleIn 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  }

  .features-grid .feature-card.slide-out-left,
  .features-grid .feature-card.slide-out-right {
    animation: fadeScaleOut 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  }
  */

  /* Expand animation when opening (fade in) */
  .features-grid .feature-card.expanding {
    animation: expandCard 0.5s ease-out forwards;
  }

  /* Collapse animation when closing (fade out) */
  .features-grid .feature-card.collapsing {
    animation: collapseCard 0.3s ease-in forwards;
  }

  /* ====== KEYFRAMES FOR OPTION 1: FADE + FLIP ====== */
  /* Text fade animations */
  @keyframes textFadeOut {
    from {
      opacity: 1;
    }
    to {
      opacity: 0;
    }
  }

  @keyframes textFadeIn {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }

  /* Icon flip animations - different directions */
  /* Flip out to LEFT (swipe left) */
  @keyframes iconFlipOutLeft {
    0% {
      opacity: 1;
      transform: perspective(400px) rotateY(0deg);
    }
    100% {
      opacity: 0;
      transform: perspective(400px) rotateY(90deg);
    }
  }

  /* Flip out to RIGHT (swipe right) */
  @keyframes iconFlipOutRight {
    0% {
      opacity: 1;
      transform: perspective(400px) rotateY(0deg);
    }
    100% {
      opacity: 0;
      transform: perspective(400px) rotateY(-90deg);
    }
  }

  /* Flip in from RIGHT (swipe left, new card comes from right) */
  @keyframes iconFlipInRight {
    0% {
      opacity: 0;
      transform: perspective(400px) rotateY(-90deg);
    }
    100% {
      opacity: 1;
      transform: perspective(400px) rotateY(0deg);
    }
  }

  /* Flip in from LEFT (swipe right, new card comes from left) */
  @keyframes iconFlipInLeft {
    0% {
      opacity: 0;
      transform: perspective(400px) rotateY(90deg);
    }
    100% {
      opacity: 1;
      transform: perspective(400px) rotateY(0deg);
    }
  }

  /* ====== KEYFRAMES FOR OPTION 2: FLIP (Book effect) ====== */
  @keyframes flipInRight {
    from {
      opacity: 0;
      transform: perspective(1000px) rotateY(-90deg) scale(0.9);
      transform-origin: left center;
    }
    to {
      opacity: 1;
      transform: perspective(1000px) rotateY(0deg) scale(1);
      transform-origin: left center;
    }
  }

  @keyframes flipInLeft {
    from {
      opacity: 0;
      transform: perspective(1000px) rotateY(90deg) scale(0.9);
      transform-origin: right center;
    }
    to {
      opacity: 1;
      transform: perspective(1000px) rotateY(0deg) scale(1);
      transform-origin: right center;
    }
  }

  @keyframes flipOutLeft {
    from {
      opacity: 1;
      transform: perspective(1000px) rotateY(0deg) scale(1);
      transform-origin: right center;
    }
    to {
      opacity: 0;
      transform: perspective(1000px) rotateY(90deg) scale(0.9);
      transform-origin: right center;
    }
  }

  @keyframes flipOutRight {
    from {
      opacity: 1;
      transform: perspective(1000px) rotateY(0deg) scale(1);
      transform-origin: left center;
    }
    to {
      opacity: 0;
      transform: perspective(1000px) rotateY(-90deg) scale(0.9);
      transform-origin: left center;
    }
  }

  /* ====== KEYFRAMES FOR OPTION 3: FADE + SCALE ====== */
  @keyframes fadeScaleIn {
    from {
      opacity: 0;
      transform: scale(0.85);
    }
    to {
      opacity: 1;
      transform: scale(1);
    }
  }

  @keyframes fadeScaleOut {
    from {
      opacity: 1;
      transform: scale(1);
    }
    to {
      opacity: 0;
      transform: scale(0.85);
    }
  }

  @keyframes expandCard {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }

  @keyframes collapseCard {
    from {
      opacity: 1;
    }
    to {
      opacity: 0;
    }
  }
}

/* Landscape Tablets ONLY: Override expanded card colors (768-1199px landscape) */
@media (min-width: 768px) and (max-width: 1199px) and (orientation: landscape) {
  /* Expanded cards - preserve background colors and text colors for LANDSCAPE pattern */

  /* Dark expanded cards: 1, 3, 5 (LANDSCAPE pattern) */
  .features-grid .feature-card:nth-child(1).expanded,
  .features-grid .feature-card:nth-child(3).expanded,
  .features-grid .feature-card:nth-child(5).expanded {
    background: #5C0FBF !important;
  }

  .features-grid .feature-card:nth-child(1).expanded h3,
  .features-grid .feature-card:nth-child(3).expanded h3,
  .features-grid .feature-card:nth-child(5).expanded h3,
  .features-grid .feature-card:nth-child(1).expanded .feature-description,
  .features-grid .feature-card:nth-child(3).expanded .feature-description,
  .features-grid .feature-card:nth-child(5).expanded .feature-description {
    color: var(--white) !important;
  }

  /* Light expanded cards: 2, 4, 6 (LANDSCAPE pattern) */
  .features-grid .feature-card:nth-child(2).expanded,
  .features-grid .feature-card:nth-child(4).expanded,
  .features-grid .feature-card:nth-child(6).expanded {
    background: #F6F8FE !important;
  }

  .features-grid .feature-card:nth-child(2).expanded h3,
  .features-grid .feature-card:nth-child(4).expanded h3,
  .features-grid .feature-card:nth-child(6).expanded h3 {
    color: #2C2C2C !important;
  }

  .features-grid .feature-card:nth-child(2).expanded .feature-description,
  .features-grid .feature-card:nth-child(4).expanded .feature-description,
  .features-grid .feature-card:nth-child(6).expanded .feature-description {
    color: #676767 !important;
  }

  /* Icon switching for LANDSCAPE expanded cards - INVERTED */
  /* Dark icons for DARK expanded cards: 1, 3, 5 */
  .features-grid .feature-card:nth-child(1).expanded .feature-icon .icon-light,
  .features-grid .feature-card:nth-child(3).expanded .feature-icon .icon-light,
  .features-grid .feature-card:nth-child(5).expanded .feature-icon .icon-light {
    display: none !important;
  }

  .features-grid .feature-card:nth-child(1).expanded .feature-icon .icon-dark,
  .features-grid .feature-card:nth-child(3).expanded .feature-icon .icon-dark,
  .features-grid .feature-card:nth-child(5).expanded .feature-icon .icon-dark {
    display: block !important;
  }

  /* Light icons for LIGHT expanded cards: 2, 4, 6 */
  .features-grid .feature-card:nth-child(2).expanded .feature-icon .icon-light,
  .features-grid .feature-card:nth-child(4).expanded .feature-icon .icon-light,
  .features-grid .feature-card:nth-child(6).expanded .feature-icon .icon-light {
    display: block !important;
  }

  .features-grid .feature-card:nth-child(2).expanded .feature-icon .icon-dark,
  .features-grid .feature-card:nth-child(4).expanded .feature-icon .icon-dark,
  .features-grid .feature-card:nth-child(6).expanded .feature-icon .icon-dark {
    display: none !important;
  }

  /* Close button colors for LANDSCAPE light cards: 2, 4, 6 */
  .features-grid .feature-card:nth-child(2).expanded .feature-close svg path,
  .features-grid .feature-card:nth-child(4).expanded .feature-close svg path,
  .features-grid .feature-card:nth-child(6).expanded .feature-close svg path {
    fill: #2C2C2C !important;
  }

  /* Close button colors for LANDSCAPE dark cards: 1, 3, 5 */
  .features-grid .feature-card:nth-child(1).expanded .feature-close svg path,
  .features-grid .feature-card:nth-child(3).expanded .feature-close svg path,
  .features-grid .feature-card:nth-child(5).expanded .feature-close svg path {
    fill: var(--white) !important;
  }

  /* Pagination colors for LANDSCAPE light cards: 2, 4, 6 */
  .features-grid .feature-card:nth-child(2).expanded .feature-pagination .pagination-dot,
  .features-grid .feature-card:nth-child(4).expanded .feature-pagination .pagination-dot,
  .features-grid .feature-card:nth-child(6).expanded .feature-pagination .pagination-dot {
    background: rgba(44, 44, 44, 0.3) !important;
  }

  .features-grid .feature-card:nth-child(2).expanded .feature-pagination .pagination-dot.active,
  .features-grid .feature-card:nth-child(4).expanded .feature-pagination .pagination-dot.active,
  .features-grid .feature-card:nth-child(6).expanded .feature-pagination .pagination-dot.active {
    background: #2C2C2C !important;
  }

  .features-grid .feature-card:nth-child(2).expanded .feature-pagination .pagination-dot:hover,
  .features-grid .feature-card:nth-child(4).expanded .feature-pagination .pagination-dot:hover,
  .features-grid .feature-card:nth-child(6).expanded .feature-pagination .pagination-dot:hover {
    background: rgba(44, 44, 44, 0.5) !important;
  }

  /* Pagination colors for LANDSCAPE dark cards: 1, 3, 5 */
  .features-grid .feature-card:nth-child(1).expanded .feature-pagination .pagination-dot,
  .features-grid .feature-card:nth-child(3).expanded .feature-pagination .pagination-dot,
  .features-grid .feature-card:nth-child(5).expanded .feature-pagination .pagination-dot {
    background: rgba(255, 255, 255, 0.3) !important;
  }

  .features-grid .feature-card:nth-child(1).expanded .feature-pagination .pagination-dot.active,
  .features-grid .feature-card:nth-child(3).expanded .feature-pagination .pagination-dot.active,
  .features-grid .feature-card:nth-child(5).expanded .feature-pagination .pagination-dot.active {
    background: var(--white) !important;
  }

  .features-grid .feature-card:nth-child(1).expanded .feature-pagination .pagination-dot:hover,
  .features-grid .feature-card:nth-child(3).expanded .feature-pagination .pagination-dot:hover,
  .features-grid .feature-card:nth-child(5).expanded .feature-pagination .pagination-dot:hover {
    background: rgba(255, 255, 255, 0.5) !important;
  }
}

/* Mobile: 2 columns × 3 rows grid */
@media (max-width: 767px) {
  /* Hide desktop-only text on mobile */
  .section-features .desktop-only {
    display: none;
  }

  .section-features .features-area {
    padding: 16px 16px 24px 16px;
    align-items: flex-start;
    justify-content: flex-start;
    flex: 1; /* Занимает всё доступное пространство */
    display: flex;
    min-height: 0; /* Для правильного расчета flex в column */
    position: relative;
    z-index: 100; /* Above mobile navigation */
    overflow: visible; /* Allow animations to be visible */
  }

  /* Для самых маленьких экранов < 650px: padding 8px сверху и снизу */
  @media (max-height: 649px) {
    .section-features .features-area {
      padding: 8px 16px 8px 16px;
    }
  }

  .section-features .features-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(3, 1fr);
    gap: 16px;
    position: relative;
    z-index: 100; /* Above mobile navigation */
    overflow: visible;
    width: 100%;
    height: 100%;
    perspective: 1500px; /* For 3D animations (flip) */
  }

  /* Для экранов < 650px: уменьшаем gap до 8px */
  @media (max-height: 649px) {
    .section-features .features-grid {
      gap: 8px;
    }
  }

  .features-grid .feature-card {
    width: auto;
    min-width: auto;
    cursor: pointer;
    padding: 0;
    display: flex;
    flex-direction: column;
    height: 100%;
    border: none;
    border-radius: 12px;
    overflow: hidden;
    min-height: 0; /* Для правильного расчета flex */
    /* GPU acceleration and smoothness */
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    will-change: transform, opacity;
  }

  /* Apply GPU acceleration only after animation completes (mobile) */
  .features-grid .feature-card.animate {
    transform: translateZ(0);
  }

  /* Header - takes full height, contains icon area + text */
  .features-grid .feature-card .feature-header {
    display: flex;
    flex-direction: column;
    width: 100%;
    flex: 1;
    min-height: 0; /* Для правильного расчета flex */
    gap: 0; /* Убираем gap (в базовых стилях 16px) */
  }

  /* Top block - icon area (takes all remaining space) */
  .features-grid .feature-card .feature-icon {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: auto; /* Сброс фиксированной высоты */
    min-width: 0; /* Сброс min-width */
    min-height: 0; /* Сброс min-height */
    max-width: none; /* Сброс max-width */
    max-height: none; /* Сброс max-height */
    padding: 0; /* Убрали padding, иконка будет динамической */
    position: relative;
  }

  .features-grid .feature-card .feature-icon img {
    max-width: 60%;
    max-height: 60%;
    width: auto;
    height: auto;
    object-fit: contain;
  }

  /* Для экранов 650-719px: иконка 80% */
  @media (min-height: 650px) and (max-height: 719px) {
    .features-grid .feature-card .feature-icon img {
      max-width: 80%;
      max-height: 80%;
    }
  }

  /* Для экранов >= 720px: иконка 85% */
  @media (min-height: 720px) {
    .features-grid .feature-card .feature-icon img {
      max-width: 85%;
      max-height: 85%;
    }
  }

  /* Hide landscape tablet line breaks on mobile */
  .landscape-tablet-br {
    display: none !important;
  }

  /* Icon switching for mobile grid - non-expanded state */
  /* By default, hide light icons and show dark icons */
  .features-grid .feature-card .feature-icon .icon-light {
    display: none !important;
  }

  .features-grid .feature-card .feature-icon .icon-dark {
    display: block !important;
  }

  /* Show light icons for cards 2, 3, 6 */
  .features-grid .feature-card:nth-child(2) .feature-icon .icon-light,
  .features-grid .feature-card:nth-child(3) .feature-icon .icon-light,
  .features-grid .feature-card:nth-child(6) .feature-icon .icon-light {
    display: block !important;
  }

  .features-grid .feature-card:nth-child(2) .feature-icon .icon-dark,
  .features-grid .feature-card:nth-child(3) .feature-icon .icon-dark,
  .features-grid .feature-card:nth-child(6) .feature-icon .icon-dark {
    display: none !important;
  }

  /* Background colors for mobile grid - non-expanded state */
  /* By default, all cards get light background */
  .features-grid .feature-card {
    background: #F6F8FE !important;
  }

  .features-grid .feature-card h3 {
    color: #2C2C2C !important;
  }

  /* Dark cards: 1, 4, 5 */
  .features-grid .feature-card:nth-child(1),
  .features-grid .feature-card:nth-child(4),
  .features-grid .feature-card:nth-child(5) {
    background: #5C0FBF !important;
  }

  .features-grid .feature-card:nth-child(1) h3,
  .features-grid .feature-card:nth-child(4) h3,
  .features-grid .feature-card:nth-child(5) h3 {
    color: var(--white) !important;
  }

  /* Bottom block - text (фиксированная высота ~48px) + padding below */
  .features-grid .feature-card h3 {
    font-size: 14px;
    font-weight: 400; /* Уменьшен на 100 с базового 500 */
    line-height: 1.2;
    text-align: center;
    margin: 0;
    margin-top: auto; /* Push to bottom of flex container */
    padding: 0 12px 8px 12px; /* 8px снизу для самых маленьких экранов */
    flex-shrink: 0;
  }

  /* Для экранов с высотой >= 650px: 12px */
  @media (min-height: 650px) {
    .features-grid .feature-card h3 {
      padding-bottom: 12px;
    }
  }

  /* Для экранов с высотой >= 720px: 16px */
  @media (min-height: 720px) {
    .features-grid .feature-card h3 {
      padding-bottom: 16px;
    }
  }

  /* Для экранов с высотой 720-853px увеличиваем размер шрифта */
  @media (min-height: 720px) and (max-height: 853px) {
    .features-grid .feature-card h3 {
      font-size: 16px;
    }
  }

  /* Для экранов с высотой > 853px увеличиваем все отступы */
  @media (min-height: 854px) {
    .features-grid .feature-card h3 {
      font-size: 16px;
      padding-bottom: 24px;
    }
  }

  /* Collapsed state - show only icon and title */
  .features-grid .feature-card .feature-description {
    display: none;
  }

  /* Override collapsed styles for expanded cards */
  .features-grid .feature-card.expanded {
    padding: 24px !important;
    height: auto !important;
  }


  .features-grid .feature-card.expanded .feature-header {
    gap: 16px !important;
    flex: 0 !important;
    order: 1 !important;
  }

  .features-grid .feature-card.expanded .feature-icon {
    flex: 0 !important;
    padding: 0 !important;
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
    max-width: 36px !important;
    max-height: 36px !important;
  }

  .features-grid .feature-card.expanded .feature-icon img {
    width: 36px !important;
    height: 36px !important;
  }

  /* Icon switching in expanded state - Mobile only */
  .features-grid .feature-card.expanded .feature-icon .icon-light {
    display: none !important;
  }

  .features-grid .feature-card.expanded .feature-icon .icon-dark {
    display: block !important;
  }

  .features-grid .feature-card:nth-child(2).expanded .feature-icon .icon-light,
  .features-grid .feature-card:nth-child(3).expanded .feature-icon .icon-light,
  .features-grid .feature-card:nth-child(6).expanded .feature-icon .icon-light {
    display: block !important;
  }

  .features-grid .feature-card:nth-child(2).expanded .feature-icon .icon-dark,
  .features-grid .feature-card:nth-child(3).expanded .feature-icon .icon-dark,
  .features-grid .feature-card:nth-child(6).expanded .feature-icon .icon-dark {
    display: none !important;
  }

  /* Средние экраны (651-799px): 64px */
  @media (max-width: 767px) and (min-height: 651px) and (max-height: 799px) {
    .features-grid .feature-card.expanded .feature-icon {
      width: 64px !important;
      height: 64px !important;
      min-width: 64px !important;
      min-height: 64px !important;
      max-width: 64px !important;
      max-height: 64px !important;
    }

    .features-grid .feature-card.expanded .feature-icon img {
      width: 64px !important;
      height: 64px !important;
    }
  }

  /* Большие экраны (>= 800px): 80px */
  @media (max-width: 767px) and (min-height: 800px) {
    .features-grid .feature-card.expanded .feature-icon {
      width: 80px !important;
      height: 80px !important;
      min-width: 80px !important;
      min-height: 80px !important;
      max-width: 80px !important;
      max-height: 80px !important;
    }

    .features-grid .feature-card.expanded .feature-icon img {
      width: 80px !important;
      height: 80px !important;
    }
  }

  .features-grid .feature-card.expanded .feature-content h3 {
    flex: 0 !important;
    margin: 0 !important;
  }

  .features-grid .feature-card.expanded .feature-content .feature-description {
    display: block !important;
    font-size: 15px !important; /* Экстра маленькие экраны */
    font-weight: 400 !important;
    line-height: 22px !important;
    margin: 0 !important;
  }

  /* Экстра маленькие экраны (<= 650px): уменьшаем padding и gap, увеличиваем иконку */
  @media (max-width: 767px) and (max-height: 650px) {
    .features-grid .feature-card.expanded {
      padding: 8px 16px 16px 16px !important; /* Top reduced by 8px: 16px → 8px */
    }

    .features-grid .feature-card.expanded .feature-icon {
      width: 44px !important; /* 36px → 44px */
      height: 44px !important;
      min-width: 44px !important;
      min-height: 44px !important;
      max-width: 44px !important;
      max-height: 44px !important;
    }

    .features-grid .feature-card.expanded .feature-icon img {
      width: 44px !important;
      height: 44px !important;
    }

    .features-grid .feature-card.expanded .feature-content-wrapper {
      gap: 6px !important; /* 12px → 6px */
    }

    .features-grid .feature-card.expanded .feature-content {
      gap: 6px !important; /* 12px → 6px */
    }

    .features-grid .feature-card.expanded .feature-pagination {
      padding-top: 4px; /* 16px → 8px → 4px (freed 4px for icon spacing) */
      padding-bottom: 8px; /* Add space from bottom */
    }
  }

  /* Средние и большие экраны (>= 651px): увеличиваем title на 2px */
  @media (max-width: 767px) and (min-height: 651px) {
    .features-grid .feature-card.expanded .feature-content h3 {
      font-size: 22px !important; /* 20px → 22px */
    }
  }

  /* Средние экраны (651-799px) */
  @media (max-width: 767px) and (min-height: 651px) and (max-height: 799px) {
    .features-grid .feature-card.expanded .feature-content .feature-description {
      font-size: 18px !important;
      line-height: 24px !important;
    }
  }

  /* Большие экраны (>= 800px) */
  @media (max-width: 767px) and (min-height: 800px) {
    .features-grid .feature-card.expanded .feature-content .feature-description {
      font-size: 19px !important;
      line-height: 25px !important;
    }
  }

  .features-grid .feature-card.expanded .feature-pagination {
    order: 3 !important;
  }
}

/* Feature Card */
.feature-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 16px;
  border-radius: 12px;
  background: transparent;
  border: none;

  /* Initial state - hidden */
  opacity: 0;
  transform: translateY(30px);
}

/* Hide close button and pagination globally (desktop default) */
.feature-close {
  display: none;
}

.feature-pagination {
  display: none;
}

/* Alternating background colors */
/* Desktop: Dark cards (1st, 3rd, 5th) */
.feature-card:nth-child(odd) {
  background: #5C0FBF;
  border-color: #2C2C2C;
}

/* Desktop: Light cards (2nd, 4th, 6th) */
.feature-card:nth-child(even) {
  background: #F6F8FE;
}

.feature-card:nth-child(even) h3 {
  color: #2C2C2C;
}

.feature-card:nth-child(even) .feature-description {
  color: #676767;
}

/* Mobile & Tablet Portrait: Different pattern (exclude landscape tablets) */
@media (max-width: 767px), (min-width: 768px) and (max-width: 1199px) and (orientation: portrait) {
  /* Reset all cards to light background first */
  .feature-card {
    background: #F6F8FE !important;
  }

  .feature-card h3 {
    color: #2C2C2C !important;
  }

  .feature-card .feature-description {
    color: #676767 !important;
  }

  /* Apply dark background to 1, 4, 5 (MOBILE/PORTRAIT pattern) */
  .feature-card:nth-child(1),
  .feature-card:nth-child(4),
  .feature-card:nth-child(5) {
    background: #5C0FBF !important;
  }

  .feature-card:nth-child(1) h3,
  .feature-card:nth-child(4) h3,
  .feature-card:nth-child(5) h3 {
    color: var(--white) !important;
  }

  .feature-card:nth-child(1) .feature-description,
  .feature-card:nth-child(4) .feature-description,
  .feature-card:nth-child(5) .feature-description {
    color: var(--gray-200) !important;
  }
}

/* Animated state - triggers when .animate class is added */
.feature-card.animate {
  animation: fadeInUp 0.6s ease-out forwards;
}

/* Keyframes for fade-in-up animation */
@keyframes fadeInUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Stagger delay for each card */
.feature-card.animate:nth-child(1) { animation-delay: 0.1s; }
.feature-card.animate:nth-child(2) { animation-delay: 0.2s; }
.feature-card.animate:nth-child(3) { animation-delay: 0.3s; }
.feature-card.animate:nth-child(4) { animation-delay: 0.4s; }
.feature-card.animate:nth-child(5) { animation-delay: 0.5s; }
.feature-card.animate:nth-child(6) { animation-delay: 0.6s; }

/* XL and XXL: 24px padding */
@media (min-width: 1440px) {
  .feature-card {
    padding: 24px;
  }
}

/* Mobile: 24px padding */
@media (max-width: 767px) {
  .feature-card {
    padding: 24px;
  }
}

/* Feature Header (Icon + Title) */
.feature-header {
  display: flex;
  align-items: center;
  gap: 16px;
  width: fit-content;
}

/* Feature Icon - базовые стили без фиксированного размера */
.feature-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
  overflow: hidden;
  padding: 0;
  margin: 0;
}

.feature-icon img {
  display: block;
  object-fit: contain;
  padding: 0;
  margin: 0;
}

/* Feature Title (h3) */
.feature-card h3 {
  font-family: 'Fira Sans', sans-serif;
  font-weight: 500;
  font-size: 20px;
  line-height: 1;
  color: var(--white);
  margin: 0;
  padding: 0;
}

/* Feature Description */
.feature-description {
  font-family: 'Fira Sans', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 22px;
  color: var(--gray-200);
  margin: 0;
}

/* Section 2 Hero Text Adjustments */
.section-features .hero-text h1 {
  color: var(--gray-125);
}

.section-features .hero-text p {
  color: var(--gray-150);
  display: block;
}

/* Mobile: Show description on Section 2 */
@media (max-width: 767px) {
  .section-features .hero-text p {
    display: block !important;
  }
}

/* Icon switching for light/dark cards */
/* By default, hide light icons and show dark icons */
.feature-card .feature-icon .icon-light {
  display: none !important;
}

.feature-card .feature-icon .icon-dark {
  display: block !important;
}

/* Desktop: Show light icons for even cards (2, 4, 6) */
@media (min-width: 1200px) {
  .feature-card:nth-child(even) .feature-icon .icon-light {
    display: block !important;
  }

  .feature-card:nth-child(even) .feature-icon .icon-dark {
    display: none !important;
  }
}

/* Mobile & Tablet Portrait: Show light icons for cards 2, 3, 6 (exclude landscape tablets) */
@media (max-width: 767px), (min-width: 768px) and (max-width: 1199px) and (orientation: portrait) {
  .feature-card:nth-child(2) .feature-icon .icon-light,
  .feature-card:nth-child(3) .feature-icon .icon-light,
  .feature-card:nth-child(6) .feature-icon .icon-light {
    display: block !important;
  }

  .feature-card:nth-child(2) .feature-icon .icon-dark,
  .feature-card:nth-child(3) .feature-icon .icon-dark,
  .feature-card:nth-child(6) .feature-icon .icon-dark {
    display: none !important;
  }
}

/* Landscape Tablets ONLY: Override colors for collapsed cards (768-1199px landscape) */
@media (min-width: 768px) and (max-width: 1199px) and (orientation: landscape) {
  /* Background colors - LANDSCAPE pattern */
  /* By default, all cards get light background */
  .features-grid .feature-card {
    background: #F6F8FE !important;
  }

  .features-grid .feature-card h3 {
    color: #2C2C2C !important;
  }

  /* Dark cards: 1, 3, 5 (LANDSCAPE pattern) */
  .features-grid .feature-card:nth-child(1),
  .features-grid .feature-card:nth-child(3),
  .features-grid .feature-card:nth-child(5) {
    background: #5C0FBF !important;
  }

  .features-grid .feature-card:nth-child(1) h3,
  .features-grid .feature-card:nth-child(3) h3,
  .features-grid .feature-card:nth-child(5) h3 {
    color: var(--white) !important;
  }

  /* Icon colors - LANDSCAPE pattern (INVERTED) */
  /* By default, all cards show light icons */
  .features-grid .feature-card .feature-icon .icon-light {
    display: block !important;
  }

  .features-grid .feature-card .feature-icon .icon-dark {
    display: none !important;
  }

  /* Show dark icons for DARK cards: 1, 3, 5 */
  .features-grid .feature-card:nth-child(1) .feature-icon .icon-light,
  .features-grid .feature-card:nth-child(3) .feature-icon .icon-light,
  .features-grid .feature-card:nth-child(5) .feature-icon .icon-light {
    display: none !important;
  }

  .features-grid .feature-card:nth-child(1) .feature-icon .icon-dark,
  .features-grid .feature-card:nth-child(3) .feature-icon .icon-dark,
  .features-grid .feature-card:nth-child(5) .feature-icon .icon-dark {
    display: block !important;
  }
}