/* ══════════════════════════════════════════════════════════
   Design Concepts — additive components for index-variant-a/b
   Built strictly on top of styles.css design tokens (no new hex values)
   ══════════════════════════════════════════════════════════ */

/* ── Feature icon tints (shared by both variants) ──
   One tint per card, no repeats. Every tile runs the same 135° accent → brand
   purple gradient, so the shared purple end keeps the set looking like one
   family while the accent end tells them apart. The untinted default in
   styles.css is the sixth member and carries the plain brand purple. */
.feature__icon--blue  { background: linear-gradient(135deg, rgba(54,188,242,0.26), rgba(131,82,255,0.26)); color: var(--info); }
.feature__icon--green { background: linear-gradient(135deg, rgba(71,218,156,0.24), rgba(131,82,255,0.24)); color: var(--success); }
.feature__icon--pink  { background: linear-gradient(135deg, rgba(221,82,224,0.28), rgba(131,82,255,0.28)); color: var(--accent-pink); }
/* Amber sits highest in luminance, so it takes the lowest alpha to stop the
   tile itself glowing brighter than its five siblings */
.feature__icon--amber { background: linear-gradient(135deg, rgba(240,188,66,0.22), rgba(131,82,255,0.22)); color: var(--accent-amber); }
.feature__icon--rose  { background: linear-gradient(135deg, rgba(234,87,112,0.26), rgba(131,82,255,0.26)); color: var(--accent-rose); }

.section__subtitle {
  text-align: left;
  margin: -32px 0 48px;
  color: var(--text-caption);
  font-size: 15px;
  line-height: 1.6;
}

/* ══════════════════════════════════════════════════════════
   VARIANT A — Live Performance / Data-driven
   ══════════════════════════════════════════════════════════ */

/* Stat bar */
.stat-bar-section { padding: 48px 0 96px; }
.stat-bar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.stat-item {
  text-align: center;
  padding: var(--card-pad);
  border-radius: var(--radius-modal);
  background: var(--surface-1);
  border: 1px solid var(--glass-stroke);
  backdrop-filter: blur(var(--surface-blur));
  -webkit-backdrop-filter: blur(var(--surface-blur));
}
.stat-item__value {
  display: block;
  font-size: clamp(24px, 2.8vw, 34px);
  font-weight: 700;
  color: var(--text-white);
  margin-bottom: 6px;
  font-variant-numeric: tabular-nums;
  /* Figures read left to right in every language. Left to the paragraph
     direction, Arabic pushed the sign in "<2h" to the far end and it came out
     as "2h>", i.e. the opposite promise. */
  direction: ltr;
  unicode-bidi: isolate;
}
.stat-item__label { font-size: 16px; color: var(--text-caption); }
@keyframes bar-grow { from { transform: scaleY(0); transform-origin: bottom; } to { transform: scaleY(1); transform-origin: bottom; } }

/* Rank ladder section */
.rank-ladder { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.rank-card {
  text-align: center;
  padding: var(--card-pad);
  border-radius: var(--radius-modal);
  background: var(--surface-1);
  border: 1px solid var(--glass-stroke);
  backdrop-filter: blur(var(--surface-blur));
  -webkit-backdrop-filter: blur(var(--surface-blur));
  box-shadow: var(--shadow-4);
}
/* The crown renders carry their own shape and material — a disc behind them only
   cropped the points */
.rank-card__badge { width: 80px; height: 80px; margin: 0 auto 14px; display: flex; align-items: center; justify-content: center; }
.rank-card__badge img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 10px 20px rgba(16, 10, 41, 0.6)); }
.rank-card__name { font-size: 18px; font-weight: 700; color: var(--text-white); margin-bottom: 4px; }
.rank-card__pct { font-size: 22px; font-weight: 700; color: var(--brand-pale); margin-bottom: 8px; }
.rank-card__req { font-size: 16px; color: var(--text-caption); }
/* The gradient alone marks the top tier — a brand-coloured border on top of it
   read as a selected state */
.rank-card--top { background: linear-gradient(180deg, rgba(131, 82, 255, 0.24) 0%, rgba(38, 30, 75, 0.6) 100%); }
.rank-card--top .rank-card__badge img { filter: drop-shadow(0 10px 26px rgba(131, 82, 255, 0.65)); }

/* ══════════════════════════════════════════════════════════
   CLOSING CTA — "three steps to your first payout"
   Dark surface with a contained brand glow instead of a
   full-bleed gradient; the steps answer "what happens next".
   ══════════════════════════════════════════════════════════ */
.ctav {
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  background: var(--bg-card);
  border: 1px solid var(--glass-stroke);
  box-shadow: var(--shadow-1);
}
.ctav__glow {
  position: absolute;
  pointer-events: none;
}
.ctav__title {
  font-size: clamp(28px, 3.2vw, 40px);
  font-weight: 700;
  line-height: 1.12;
  color: var(--text-white);
  letter-spacing: -0.5px;
}
.ctav__text {
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-caption);
}
.ctav__actions { display: flex; flex-wrap: wrap; gap: 12px; }

.ctav1 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  padding: 56px;
  align-items: center;
}
.ctav1 .ctav__glow {
  left: -15%;
  bottom: -60%;
  width: 70%;
  height: 160%;
  background: radial-gradient(circle closest-side, rgba(131, 82, 255, 0.45) 0%, rgba(221, 82, 224, 0.12) 55%, transparent 100%);
}
.ctav1__body { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
.ctav1__body .ctav__actions { margin-top: 6px; }

.ctav1__steps { position: relative; display: flex; flex-direction: column; }
.ctav1__step {
  position: relative;
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 16px;
  padding: 18px 0;
  align-items: start;
}
/* Hairline that fades out to the right carries the eye down the list */
.ctav1__step + .ctav1__step::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, rgba(131, 82, 255, 0.5) 0%, rgba(105, 65, 204, 0.2) 45%, transparent 100%);
}
.ctav1__num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(131, 82, 255, 0.14);
  border: 1px solid var(--glass-stroke);
  font-size: 14px;
  font-weight: 700;
  color: var(--brand-pale);
}
/* Badges intensify step by step so the row reads as progress toward the payout */
.ctav1__step:nth-child(2) .ctav1__num {
  background: rgba(131, 82, 255, 0.3);
  border-color: var(--glass-brand);
  color: #E4D9FF;
}
.ctav1__step:nth-child(3) .ctav1__num {
  background: var(--brand);
  border-color: var(--brand);
  color: var(--on-brand);
  box-shadow: 0 0 0 4px rgba(131, 82, 255, 0.16), 0 6px 18px rgba(131, 82, 255, 0.4);
}
.ctav1__step-title { font-size: 16px; font-weight: 700; color: var(--text-white); margin-bottom: 3px; }
.ctav1__step-text { font-size: 14px; line-height: 1.5; color: var(--text-caption); }

/* ══════════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  .stat-bar { grid-template-columns: repeat(2, 1fr); }
  .rank-ladder { grid-template-columns: repeat(2, 1fr); }
  .ctav1 { grid-template-columns: 1fr; gap: 36px; padding: 44px 36px; }
  /* once the CTA stacks, the buttons fill the row instead of floating at its left */
  .ctav__actions { width: 100%; }
  .ctav__actions .btn { flex: 1 1 0; }
}

@media (max-width: 640px) {
  /* auto-rows keep both rows the same height when a label wraps unevenly */
  .stat-bar { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 1fr; gap: 12px; }
  /* fluid size keeps "$3,800,000+" from forcing a card wider than half the screen */
  .stat-item__value { font-size: clamp(18px, 5.2vw, 22px); }
  .rank-ladder { grid-template-columns: 1fr; }
  .ctav { border-radius: 18px; }
  .ctav1 { padding: 36px 22px; gap: 30px; }
  .ctav__actions .btn { flex: 1 1 100%; }
  .ctav1__step { grid-template-columns: 36px 1fr; gap: 13px; padding: 16px 0; }
  .ctav1__num { width: 36px; height: 36px; font-size: 13px; }
}