.feat {
  position: relative;
  overflow: hidden;
  padding: 70px 0 90px;
}

.feat__decor {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}

.feat__decor--a {
  width: 560px;
  height: 560px;
  top: -220px;
  left: -160px;
  background: radial-gradient(circle, rgba(47, 111, 237, 0.10) 0%, rgba(47, 111, 237, 0) 70%);
}

.feat__decor--b {
  width: 560px;
  height: 560px;
  top: -220px;
  right: -160px;
  background: radial-gradient(circle, rgba(20, 184, 166, 0.10) 0%, rgba(20, 184, 166, 0) 70%);
}

.feat__sticker {
  position: absolute;
  z-index: 1;
  width: 52px;
  height: 52px;
  border-radius: 16px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-md);
}

.feat__sticker--tl {
  top: 150px;
  left: 8%;
  transform: rotate(-12deg);
}

.feat__sticker--tr {
  top: 150px;
  right: 8%;
  transform: rotate(10deg);
}

.feat__head {
  position: relative;
  z-index: 1;
  max-width: 620px;
  margin: 0 auto 56px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.feat__badge {
  display: inline-flex;
  padding: 9px 18px;
  border-radius: var(--radius-pill);
  background: #fff;
  border: 1px solid var(--color-border);
  color: var(--color-primary);
  font-size: 13.5px;
  font-weight: 700;
  box-shadow: var(--shadow-sm);
  margin-bottom: 22px;
}

.feat__title {
  font-size: 44px;
  line-height: 1.2;
  font-weight: 900;
  color: var(--color-ink);
  margin-bottom: 16px;
}

.feat__desc {
  font-size: 16px;
  line-height: 1.75;
  color: var(--color-body);
}

/* ---- Board: card column / mockup / card column ---- */

.feat__board {
  position: relative;
  z-index: 1;
  display: grid;
  /* Tracks declared right-to-left under dir=rtl (column 1 is the
     rightmost track), so col--b (ذكاء اصطناعي متطور...) lands on the
     right and col--a (محادثات موحدة...) lands on the left, matching
     the reference regardless of source order. */
  grid-template-columns: 320px 1fr 320px;
  align-items: center;
  gap: 24px;
  margin-bottom: 64px;
}

/* grid-row:1 is required on all three: since their explicit columns
   run 3,2,1 in DOM order, the sparse auto-placement cursor would
   otherwise advance to a new row after each one (it only searches
   forward from wherever the previous item left off), stacking all
   three vertically instead of side by side. */
.feat__col--b { grid-column: 1; grid-row: 1; }
.feat__mockup { grid-column: 2; grid-row: 1; }
.feat__col--a { grid-column: 3; grid-row: 1; }

.feat__lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

.feat__line {
  fill: none;
  stroke: #b9c8ef;
  stroke-width: 1.6;
  stroke-dasharray: 3 6;
  stroke-linecap: round;
}

.feat__mockup {
  position: relative;
  z-index: 1;
  width: 100%;
  height: auto;
}

.feat__col {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.feat__card {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  background: #fff;
  border-radius: var(--radius-md);
  padding: 18px;
  box-shadow: var(--shadow-sm);
}

.feat__icon {
  flex: none;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.feat__icon--blue {
  background: rgba(47, 111, 237, 0.1);
  color: var(--color-primary);
}

.feat__icon--teal {
  background: rgba(20, 184, 166, 0.1);
  color: var(--color-teal);
}

.feat__card-text {
  text-align: right;
}

.feat__card-text h3 {
  font-size: 15px;
  font-weight: 700;
  color: var(--color-ink);
  margin-bottom: 4px;
}

.feat__card-text p {
  font-size: 13px;
  line-height: 1.6;
  color: var(--color-body);
}

/* ---- Stats row ---- */

.feat__stats {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 56px;
  margin-bottom: 40px;
}

.feat__stat {
  display: flex;
  align-items: center;
  gap: 10px;
}

.feat__stat-icon {
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.feat__stat-icon--blue {
  background: rgba(47, 111, 237, 0.1);
  color: var(--color-primary);
}

.feat__stat-icon--teal {
  background: rgba(20, 184, 166, 0.1);
  color: var(--color-teal);
}

.feat__stat div {
  display: flex;
  flex-direction: column;
}

.feat__stat strong {
  font-size: 19px;
  font-weight: 800;
  color: var(--color-ink);
}

.feat__stat span {
  font-size: 12px;
  color: var(--color-muted);
  font-weight: 600;
}

/* ---- CTA + join line ---- */

.feat__cta {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
}

.feat__cta .btn--primary svg {
  transform: scaleX(-1);
}

.feat__join {
  position: relative;
  z-index: 1;
  text-align: center;
  font-size: 14px;
  color: var(--color-muted);
  font-weight: 600;
}

/* ---- Bottom-left floating "grow" badge ---- */

.feat__grow {
  position: absolute;
  z-index: 2;
  left: 5%;
  bottom: 30px;
  display: flex;
  align-items: flex-end;
  gap: 6px;
}

.feat__grow-arrow {
  margin-bottom: 30px;
}

.feat__grow-card {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  padding: 10px 18px 10px 10px;
  box-shadow: var(--shadow-md);
}

.feat__grow-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--gradient-brand);
  color: #fff;
  flex: none;
}

.feat__grow-card p {
  font-size: 13px;
  font-weight: 700;
  color: var(--color-ink);
  white-space: nowrap;
}