/* ============================================================
   PRODUCT EVOLUTION — Business Problem → Existing Experience →
   Design Opportunity → Solution → Improvements → Impact
   ============================================================ */

/* ── Existing Experience — comparison cards (Net Banking / Debit Card) ── */
.evo-comparison-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(14px, 2vw, 20px);
  margin: clamp(28px, 3vw, 40px) 0;
}
.evo-card {
  background: var(--bg-2);
  border: 1px solid rgba(255,107,71,0.18);
  border-radius: var(--rl);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.evo-card-shot { position: relative; border-bottom: 1px solid var(--border); }
.evo-card-shot img { display: block; width: 100%; }
.evo-card-tag {
  position: absolute; top: 12px; left: 12px; z-index: 2;
  font-size: 10px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  background: rgba(255,107,71,0.92); color: #fff;
  padding: 4px 9px; border-radius: 5px;
}
.evo-card-body { padding: clamp(18px, 2.2vw, 24px); flex: 1; display: flex; flex-direction: column; gap: 8px; }
.evo-card-label { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--red); }
.evo-card-title { font-size: clamp(15px, 1.8vw, 17px); font-weight: 600; color: var(--t1); margin: 0; }
.evo-card-desc { font-size: 13px; color: var(--t3); line-height: 1.6; margin: 0; }

/* ── Solution — large annotated screenshot ── */
.annotated-shot { position: relative; margin: clamp(24px, 3vw, 36px) 0; }
.annotated-marker {
  position: absolute;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--gold);
  color: #07080C;
  font-size: 11px;
  font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 0 5px rgba(232,197,71,0.16), 0 6px 16px rgba(0,0,0,0.5);
  cursor: default;
  z-index: 3;
  animation: evo-marker-pulse 2.6s ease-in-out infinite;
}
@keyframes evo-marker-pulse {
  0%, 100% { box-shadow: 0 0 0 5px rgba(232,197,71,0.16), 0 6px 16px rgba(0,0,0,0.5); }
  50%      { box-shadow: 0 0 0 8px rgba(232,197,71,0.08), 0 6px 16px rgba(0,0,0,0.5); }
}
@media (prefers-reduced-motion: reduce) { .annotated-marker { animation: none; } }

.annotated-legend {
  margin-top: clamp(16px, 2vw, 22px);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 12px 24px;
}
.annotated-legend-item { display: flex; gap: 10px; align-items: flex-start; }
.annotated-legend-num {
  flex-shrink: 0; width: 20px; height: 20px; margin-top: 1px;
  border-radius: 50%;
  background: var(--gold-dim);
  border: 1px solid var(--gold-line);
  color: var(--gold);
  font-size: 10px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.annotated-legend-text { font-size: 13px; color: var(--t3); line-height: 1.55; }

/* ── Key Improvements checklist ── */
.improve-list { list-style: none; display: flex; flex-direction: column; gap: clamp(12px,1.5vw,16px); margin: clamp(20px,2.5vw,28px) 0; }
.improve-list li { display: flex; align-items: flex-start; gap: 12px; font-size: clamp(14px,1.8vw,15px); color: var(--t2); line-height: 1.6; }
.improve-check {
  flex-shrink: 0; width: 18px; height: 18px; margin-top: 2px;
  border-radius: 50%;
  background: rgba(52,201,128,0.12);
  border: 1px solid rgba(52,201,128,0.35);
  color: var(--green);
  display: flex; align-items: center; justify-content: center;
}
.improve-check svg { width: 10px; height: 10px; }

/* ── UX Principles Applied ── */
.principle-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin: clamp(20px, 2.5vw, 28px) 0;
}
.principle-card {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: clamp(16px, 2vw, 20px) clamp(16px, 2vw, 22px);
}
.principle-name { font-size: 13px; font-weight: 600; color: var(--t1); margin-bottom: 6px; }
.principle-desc { font-size: 12.5px; color: var(--t3); line-height: 1.55; margin: 0; }

/* ── Design Opportunity — transition connector ── */
.evo-opportunity {
  display: flex;
  align-items: center;
  gap: clamp(16px, 2.5vw, 28px);
  margin: clamp(28px, 3.5vw, 44px) 0;
  padding: clamp(20px, 2.5vw, 28px);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.evo-opportunity-icon {
  flex-shrink: 0;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--gold-dim);
  border: 1px solid var(--gold-line);
  display: flex; align-items: center; justify-content: center;
  color: var(--gold);
}
.evo-opportunity-text { font-size: clamp(14px,1.7vw,15.5px); color: var(--t2); line-height: 1.65; margin: 0; }
.evo-opportunity-text strong { color: var(--t1); font-weight: 600; }

@media (max-width: 860px) {
  .evo-comparison-grid { grid-template-columns: 1fr; }
  .principle-grid { grid-template-columns: 1fr 1fr; }
  .evo-opportunity { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 560px) {
  .principle-grid { grid-template-columns: 1fr; }
}

/* ── Draggable Before/After comparison slider ──
   Same base screenshot, real "before" vs "after" states —
   not two arbitrary images. Pointer Events unify mouse/touch/pen. ── */
.ba-slider {
  max-width: 720px;
  margin: clamp(28px, 3vw, 40px) auto 0;
}
.ba-slider-frame {
  position: relative;
  aspect-ratio: 1917 / 906;
  border-radius: var(--rl);
  overflow: hidden;
  border: 1px solid var(--border);
  cursor: ew-resize;
  background: var(--bg-2);
  touch-action: none;
}
.ba-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
  user-select: none;
}
.ba-img-before { z-index: 1; }
.ba-img-after {
  z-index: 2;
  clip-path: inset(0 50% 0 0);
}
.ba-slider-frame.is-dragging .ba-img-after { transition: none; }
.ba-img-after { transition: clip-path .5s var(--ease); }

.ba-handle {
  position: absolute;
  top: 0; bottom: 0;
  left: 50%;
  width: 2px;
  background: var(--gold);
  transform: translateX(-50%);
  z-index: 3;
  cursor: ew-resize;
  transition: left .5s var(--ease);
}
.ba-slider-frame.is-dragging .ba-handle { transition: none; }
.ba-handle-grip {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 42px; height: 42px;
  border-radius: 50%;
  background: var(--gold);
  display: flex; align-items: center; justify-content: center;
  gap: 3px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.45);
  color: #07080C;
}
.ba-handle:focus-visible .ba-handle-grip { outline: 2px solid #fff; outline-offset: 3px; }

.ba-label {
  position: absolute;
  top: 14px;
  font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  padding: 6px 12px; border-radius: 100px;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  z-index: 4; pointer-events: none;
}
.ba-label-left { left: 14px; background: rgba(255,107,71,0.18); color: #fff; border: 1px solid rgba(255,107,71,0.35); }
.ba-label-right { right: 14px; background: rgba(52,201,128,0.18); color: #fff; border: 1px solid rgba(52,201,128,0.35); }

.ba-hint {
  text-align: center; font-size: 11.5px; color: var(--t3);
  margin-top: 10px; display: flex; align-items: center; justify-content: center; gap: 6px;
  transition: opacity .4s;
}
.ba-hint.is-hidden { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  .ba-img-after, .ba-handle { transition: none; }
}