/* ═══════════════════════════════ FEATURES PAGE TOKENS ═══════════════════════════ */
:root {
  --feat-orange: #f1592a;
  --feat-orange-soft: #fee8e0;
  --feat-pink: #d6308f;
  --feat-pink-soft: #fce4f1;
  --feat-purple: #8b3fe0;
  --feat-purple-soft: #f1e6fc;
  --feat-teal: #14b88a;
  --feat-teal-soft: #e1f8f0;
  --feat-indigo: #6d4ee8;
  --feat-indigo-soft: #ece6fc;
  --feat-amber: #f57c1f;
  --feat-amber-soft: #feece0;
}

/* ═══════════════════════════════ FEATURES HERO ══════════════════════════════════ */
#features-hero {
  padding: calc(var(--space-xl) + 68px) 0 var(--space-xl);
  background: var(--white);
}

.features-hero-inner {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  align-items: center;
  gap: var(--space-xl);
}

.features-hero-title {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 5.5vw, 4rem);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.03em;
  color: var(--neutral-900);
}

.features-hero-accent {
  color: var(--brand-red);
}

.features-hero-visual {
  width: 100%;
  height: auto;
  justify-self: center;
}

@media (max-width: 900px) {
  .features-hero-inner {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .features-hero-visual {
    max-width: 420px;
    margin: 0 auto;
  }
}

/* ═══════════════════════════════ FEATURES BANNER ════════════════════════════════ */
#features-banner {
  padding: var(--space-lg) 0 var(--space-2xl);
}

.features-banner-card {
  background: radial-gradient(
      circle at 85% 15%,
      rgba(232, 52, 26, 0.35) 0%,
      transparent 55%
    ),
    linear-gradient(135deg, var(--neutral-900) 0%, #0a0a0a 60%, #1a0e0c 100%);
  border-radius: var(--radius-2xl);
  padding: var(--space-2xl) var(--space-xl);
  text-align: center;
}

.features-banner-heading {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3.2vw, 2.25rem);
  font-weight: 700;
  line-height: 1.3;
  color: var(--white);
  max-width: 920px;
  margin: 0 auto var(--space-md);
}

.features-banner-sub {
  font-size: 0.9375rem;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.55);
  line-height: 1.8;
  max-width: 920px;
  margin: 0 auto var(--space-md);
}

@media (max-width: 640px) {
  .features-banner-card {
    padding: var(--space-xl) var(--space-md);
    border-radius: var(--radius-xl);
  }
}

/* ═══════════════════════════════ FEATURES LIST ══════════════════════════════════ */

#features-list {
    padding: var(--space-lg) 0 var(--space-3xl);
}

.features-list-header {
    margin-bottom: var(--space-xl);
}

/* ==========================
   SWIPER
========================== */

.features-swiper {
    overflow: hidden;
    padding: 30px 0 90px;
}

.features-swiper .swiper-wrapper {
    align-items: stretch;
}

.features-swiper .swiper-slide {
    display: flex;
    height: auto;
}

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

.feature-card {
    width: 100%;
    display: flex;
    flex-direction: column;

    background: var(--white);

    border: 1px solid var(--neutral-200);
    border-radius: var(--radius-lg);

    padding: var(--space-lg);

    transition:
        transform .45s ease,
        opacity .45s ease,
        box-shadow .45s ease,
        border-color .45s ease;

    opacity: .55;
    transform: scale(.90);
}

/* Active */

.feature-card.is-active{
    opacity:1;

    transform:
        translateY(-18px)
        scale(1.04);

    z-index:10;

    box-shadow:
        0 24px 60px rgba(0,0,0,.12);
}

/* Previous & Next */

.feature-card.is-side {

    opacity: .82;

    transform: scale(.96);

}

/* ==========================
   CARD CONTENT
========================== */

.feature-card-head {

    display: flex;

    align-items: flex-start;

    gap: var(--space-sm);

    min-height: 84px;

    margin-bottom: .75rem;

}

.feature-icon {

    width: 46px;

    height: 46px;

    border-radius: var(--radius-md);

    display: flex;

    align-items: center;

    justify-content: center;

    flex-shrink: 0;

}

.feature-icon svg{

    width:20px;

    height:20px;

    stroke-width:2.2;

    color:#fff;

}

.feature-name{

    font-family:var(--font-display);

    font-size:1.25rem;

    font-weight:700;

    color:var(--neutral-900);

}

.feature-desc{

    font-size:.95rem;

    line-height:1.75;

    color:var(--neutral-600);

    min-height:110px;

    margin-bottom:var(--space-md);

}

.feature-visual{

    margin-top:auto;

    width:100%;

    max-width:300px;

    height:190px;

    object-fit:contain;

    align-self:center;

    flex-shrink:0;

}

/* ==========================
   BUTTONS
========================== */

.features-controls{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:20px;

    margin-top:45px;

}

.swiper-button-prev,
.swiper-button-next{

    position:static !important;

    width:48px;

    height:48px;

    margin:0;

    border-radius:50%;

    background:var(--brand-red);

    color:#fff;

    transition:.3s;

}

.swiper-button-prev:hover,
.swiper-button-next:hover{

    transform:translateY(-2px);

}

.swiper-button-prev::after,
.swiper-button-next::after{

    font-size:16px;

    font-weight:700;

}

.swiper-pagination{

    position:static !important;

    width:auto !important;

}

.swiper-pagination-bullet{

    width:10px;

    height:10px;

    opacity:1;

    background:#d8d8d8;

    transition:.35s;

}

.swiper-pagination-bullet-active{

    background:var(--brand-red);

    transform:scale(1.25);

}

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

@media(max-width:991px){

    .feature-card{

        opacity:1;

        transform:none;

    }

    .feature-card.is-active,
    .feature-card.is-side{

        transform:none;

        opacity:1;

    }

}

@media(max-width:768px){

    .feature-card{

        padding:var(--space-md);

    }

    .feature-desc{

        min-height:auto;

    }

}

.feature-icon-orange {
  background: var(--feat-orange);
}
.feature-icon-pink {
  background: var(--feat-pink);
}
.feature-icon-purple {
  background: var(--feat-purple);
}
.feature-icon-teal {
  background: var(--feat-teal);
}
.feature-icon-indigo {
  background: var(--feat-indigo);
}
.feature-icon-amber {
  background: var(--feat-amber);
}

.feature-card-head{

    display:flex;

    gap:var(--space-sm);

    align-items:flex-start;

    min-height:78px;

}


@media (max-width: 900px) {
  .features-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .feature-card {
    padding: var(--space-md);
  }
}