/* ══════════════════════════════════════════════════
   CATEGORIES SECTION — IMPROVED CARDS
   Glow on hover, pop effect, centred layout
   ══════════════════════════════════════════════════ */

.categories-section {
  background: var(--bg-1);
  border-top: 1px solid var(--b0); border-bottom: 1px solid var(--b0);
  padding: var(--s5) 0;
}
.categories-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  max-width: 960px;
  margin: 0 auto;
}

.cat-card {
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  padding: 32px 20px 28px;
  background: var(--bg-2);
  border: 1px solid var(--b1);
  border-radius: 20px;
  cursor: pointer; text-align: center;
  transition: border-color .25s ease, box-shadow .25s ease, transform .25s cubic-bezier(.34,1.56,.64,1);
  position: relative;
  overflow: hidden;
}

/* Glow layer — always present, revealed on hover */
.cat-glow {
  display: block;
  position: absolute;
  inset: 0;
  border-radius: inherit;
  opacity: 0;
  transition: opacity .3s ease;
  pointer-events: none;
}
.cat-card--green  .cat-glow { background: radial-gradient(ellipse at 50% 0%, rgba(22,163,74,.22) 0%, transparent 70%); }
.cat-card--blue   .cat-glow { background: radial-gradient(ellipse at 50% 0%, rgba(59,130,246,.22) 0%, transparent 70%); }
.cat-card--amber  .cat-glow { background: radial-gradient(ellipse at 50% 0%, rgba(234,179,8,.22) 0%, transparent 70%); }
.cat-card--gold   .cat-glow { background: radial-gradient(ellipse at 50% 0%, rgba(202,138,4,.22) 0%, transparent 70%); }
.cat-card--purple .cat-glow { background: radial-gradient(ellipse at 50% 0%, rgba(168,85,247,.22) 0%, transparent 70%); }

/* Hover: pop up, glow border, glow bg */
.cat-card:hover { transform: translateY(-6px) scale(1.025); }
.cat-card:hover .cat-glow { opacity: 1; }

.cat-card--green:hover  { border-color: rgba(22,163,74,.5);   box-shadow: 0 0 28px rgba(22,163,74,.2),  0 8px 32px rgba(0,0,0,.4); }
.cat-card--blue:hover   { border-color: rgba(59,130,246,.5);  box-shadow: 0 0 28px rgba(59,130,246,.2), 0 8px 32px rgba(0,0,0,.4); }
.cat-card--amber:hover  { border-color: rgba(234,179,8,.5);   box-shadow: 0 0 28px rgba(234,179,8,.2),  0 8px 32px rgba(0,0,0,.4); }
.cat-card--gold:hover   { border-color: rgba(202,138,4,.5);   box-shadow: 0 0 28px rgba(202,138,4,.2),  0 8px 32px rgba(0,0,0,.4); }
.cat-card--purple:hover { border-color: rgba(168,85,247,.5);  box-shadow: 0 0 28px rgba(168,85,247,.2), 0 8px 32px rgba(0,0,0,.4); }

/* Icon wraps — larger & more vibrant */
.cat-icon-wrap {
  width: 58px; height: 58px; border-radius: 16px;
  display: flex; align-items: center; justify-content: center;
  transition: transform .25s cubic-bezier(.34,1.56,.64,1), box-shadow .25s;
  position: relative; z-index: 1;
}
.cat-card:hover .cat-icon-wrap { transform: scale(1.15) translateY(-2px); }

.cat-icon-wrap--green  { background: rgba(22,163,74,.12);  color: var(--green);   border: 1px solid rgba(22,163,74,.25); }
.cat-icon-wrap--blue   { background: rgba(59,130,246,.12); color: var(--blue-hi); border: 1px solid rgba(59,130,246,.25); }
.cat-icon-wrap--amber  { background: rgba(234,179,8,.12);  color: #EAB308;        border: 1px solid rgba(234,179,8,.25); }
.cat-icon-wrap--gold   { background: rgba(202,138,4,.12);  color: var(--gold-hi); border: 1px solid rgba(202,138,4,.25); }
.cat-icon-wrap--purple { background: rgba(168,85,247,.12); color: #A855F7;        border: 1px solid rgba(168,85,247,.25); }

.cat-card--green:hover  .cat-icon-wrap { box-shadow: 0 0 20px rgba(22,163,74,.4); }
.cat-card--blue:hover   .cat-icon-wrap { box-shadow: 0 0 20px rgba(59,130,246,.4); }
.cat-card--amber:hover  .cat-icon-wrap { box-shadow: 0 0 20px rgba(234,179,8,.4); }
.cat-card--gold:hover   .cat-icon-wrap { box-shadow: 0 0 20px rgba(202,138,4,.4); }
.cat-card--purple:hover .cat-icon-wrap { box-shadow: 0 0 20px rgba(168,85,247,.4); }

.cat-icon-wrap svg { width: 26px; height: 26px; }

.cat-body { display: flex; flex-direction: column; gap: 5px; position: relative; z-index: 1; }
.cat-name { font-size: .9375rem; font-weight: 700; color: var(--text); letter-spacing: -.015em; }
.cat-desc { font-size: .75rem; color: var(--text-3); line-height: 1.45; }
.cat-cta {
  font-size: .7rem; font-weight: 700;
  padding: 5px 12px; border-radius: 999px;
  border: 1px solid var(--b1);
  transition: all .25s; margin-top: 6px;
  letter-spacing: .04em; text-transform: uppercase;
  color: var(--text-3);
}
.cat-card:hover .cat-cta { color: var(--text); border-color: var(--b2); }
.cat-card--green:hover  .cat-cta { color: var(--green);   border-color: rgba(22,163,74,.4);  background: rgba(22,163,74,.08); }
.cat-card--blue:hover   .cat-cta { color: var(--blue-hi); border-color: rgba(59,130,246,.4); background: rgba(59,130,246,.08); }
.cat-card--amber:hover  .cat-cta { color: #EAB308;        border-color: rgba(234,179,8,.4);  background: rgba(234,179,8,.08); }
.cat-card--gold:hover   .cat-cta { color: var(--gold-hi); border-color: rgba(202,138,4,.4);  background: rgba(202,138,4,.08); }
.cat-card--purple:hover .cat-cta { color: #A855F7;        border-color: rgba(168,85,247,.4); background: rgba(168,85,247,.08); }

.cat-arrow {
  position: absolute; bottom: 14px; right: 14px;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--bg-3); border: 1px solid var(--b1);
  display: flex; align-items: center; justify-content: center;
  color: var(--text-3); transition: all .2s;
}
.cat-card--amber:hover .cat-arrow { background: rgba(234,179,8,.1); border-color: rgba(234,179,8,.3); color: #EAB308; }


/* ══════════════════════════════════════════════════
   HOW IT WORKS — STACKOPS-INSPIRED STEP CARDS
   ══════════════════════════════════════════════════ */

.how-section {
  background: var(--bg);
  border-top: 1px solid var(--b0);
  padding: var(--s5) 0;
}

.steps-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: var(--s4);
}

/* Connector line between steps */
.steps-grid::before {
  display: none;
}

.step-item {
  background: var(--bg-2);
  border: 1px solid var(--b1);
  border-radius: 20px;
  overflow: hidden;
  text-align: center;
  transition: border-color .25s, box-shadow .25s, transform .3s cubic-bezier(.34,1.56,.64,1);
  position: relative;
  cursor: default;
}

/* Illustrated top area */
.step-item__visual {
  padding: 36px 24px 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

/* Coloured gradient bg for the visual zone */
.step-item:nth-child(1) .step-item__visual { background: radial-gradient(ellipse at 50% 80%, rgba(22,163,74,.15) 0%, transparent 70%); }
.step-item:nth-child(2) .step-item__visual { background: radial-gradient(ellipse at 50% 80%, rgba(59,130,246,.15) 0%, transparent 70%); }
.step-item:nth-child(3) .step-item__visual { background: radial-gradient(ellipse at 50% 80%, rgba(168,85,247,.15) 0%, transparent 70%); }

/* Big icon circle */
.step-icon-ring {
  width: 88px; height: 88px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  transition: transform .3s cubic-bezier(.34,1.56,.64,1), box-shadow .3s;
}
.step-item:nth-child(1) .step-icon-ring {
  background: rgba(22,163,74,.1);
  border: 1.5px solid rgba(22,163,74,.3);
  color: var(--green);
}
.step-item:nth-child(2) .step-icon-ring {
  background: rgba(59,130,246,.1);
  border: 1.5px solid rgba(59,130,246,.3);
  color: var(--blue-hi);
}
.step-item:nth-child(3) .step-icon-ring {
  background: rgba(168,85,247,.1);
  border: 1.5px solid rgba(168,85,247,.3);
  color: #A855F7;
}

.step-icon-ring svg { width: 38px; height: 38px; }

/* Step number badge — top-right corner */
.step-n {
  position: absolute;
  top: 16px; right: 16px;
  width: 32px; height: 32px;
  border-radius: 50%;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: .75rem; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
}
.step-n--green  { background: rgba(22,163,74,.15);  color: var(--green);  border: 1px solid rgba(22,163,74,.3); }
.step-n--blue   { background: rgba(59,130,246,.15); color: #60a5fa;       border: 1px solid rgba(59,130,246,.3); }
.step-n--purple { background: rgba(168,85,247,.15); color: #A855F7;       border: 1px solid rgba(168,85,247,.3); }

/* Text area */
.step-item__body {
  padding: 0 24px 30px;
  border-top: 1px solid var(--b0);
}

.step-item h3 {
  font-size: 1.05rem;
  font-weight: 700;
  margin: 20px 0 8px;
  letter-spacing: -.02em;
  color: var(--text);
}
.step-item p {
  font-size: .875rem;
  color: var(--text-2);
  line-height: 1.65;
  margin: 0;
}

/* Hover */
.step-item:hover { transform: translateY(-6px); }
.step-item:nth-child(1):hover { border-color: rgba(22,163,74,.4);   box-shadow: 0 0 32px rgba(22,163,74,.15),  0 12px 40px rgba(0,0,0,.45); }
.step-item:nth-child(2):hover { border-color: rgba(59,130,246,.4);  box-shadow: 0 0 32px rgba(59,130,246,.15), 0 12px 40px rgba(0,0,0,.45); }
.step-item:nth-child(3):hover { border-color: rgba(168,85,247,.4);  box-shadow: 0 0 32px rgba(168,85,247,.15), 0 12px 40px rgba(0,0,0,.45); }

.step-item:hover .step-icon-ring { transform: scale(1.1); }
.step-item:nth-child(1):hover .step-icon-ring { box-shadow: 0 0 24px rgba(22,163,74,.4); }
.step-item:nth-child(2):hover .step-icon-ring { box-shadow: 0 0 24px rgba(59,130,246,.4); }
.step-item:nth-child(3):hover .step-icon-ring { box-shadow: 0 0 24px rgba(168,85,247,.4); }

/* Featured / highlighted middle card */
.step-item--featured {
  border-color: rgba(59,130,246,.3);
  background: linear-gradient(180deg, rgba(59,130,246,.06) 0%, var(--bg-2) 40%);
  box-shadow: 0 0 40px rgba(59,130,246,.1);
}
.step-item--featured:hover {
  border-color: rgba(59,130,246,.5);
  box-shadow: 0 0 40px rgba(59,130,246,.2), 0 12px 40px rgba(0,0,0,.5);
}

/* ══════════════════════════════════════════════════
   WHY TicketsSA — PROOF / BUILT FOR SOUTH AFRICANS
   ══════════════════════════════════════════════════ */

.proof-section {
  background: var(--bg-1);
  padding: var(--s5) 0;
  border-top: 1px solid var(--b0);
}

.proof-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  max-width: 900px;
  margin: 0 auto;
}

.proof-item {
  background: var(--bg-2);
  border: 1px solid var(--b1);
  border-radius: 20px;
  padding: 40px 28px;
  text-align: center;
  transition: border-color .25s, box-shadow .25s, transform .3s cubic-bezier(.34,1.56,.64,1);
  position: relative;
  overflow: hidden;
}

/* Individual top-glow per card */
.proof-item::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  border-radius: 20px 20px 0 0;
  opacity: 0;
  transition: opacity .3s;
}
.proof-item:nth-child(1)::before { background: linear-gradient(90deg, transparent, var(--green), transparent); }
.proof-item:nth-child(2)::before { background: linear-gradient(90deg, transparent, var(--blue-hi), transparent); }
.proof-item:nth-child(3)::before { background: linear-gradient(90deg, transparent, #A855F7, transparent); }

.proof-item:hover::before { opacity: 1; }

/* Hover */
.proof-item:hover { transform: translateY(-6px) scale(1.015); }
.proof-item:nth-child(1):hover { border-color: rgba(22,163,74,.4);   box-shadow: 0 0 30px rgba(22,163,74,.15),  0 10px 36px rgba(0,0,0,.4); }
.proof-item:nth-child(2):hover { border-color: rgba(59,130,246,.4);  box-shadow: 0 0 30px rgba(59,130,246,.15), 0 10px 36px rgba(0,0,0,.4); }
.proof-item:nth-child(3):hover { border-color: rgba(168,85,247,.4);  box-shadow: 0 0 30px rgba(168,85,247,.15), 0 10px 36px rgba(0,0,0,.4); }

.proof-icon-wrap {
  display: flex; align-items: center; justify-content: center;
  width: 64px; height: 64px; border-radius: 18px;
  margin: 0 auto 20px;
  transition: transform .3s cubic-bezier(.34,1.56,.64,1), box-shadow .3s;
}

/* Color-coded icon wraps */
.proof-item:nth-child(1) .proof-icon-wrap {
  background: rgba(22,163,74,.1);
  border: 1px solid rgba(22,163,74,.25);
  color: var(--green);
}
.proof-item:nth-child(2) .proof-icon-wrap {
  background: rgba(59,130,246,.1);
  border: 1px solid rgba(59,130,246,.25);
  color: var(--blue-hi);
}
.proof-item:nth-child(3) .proof-icon-wrap {
  background: rgba(168,85,247,.1);
  border: 1px solid rgba(168,85,247,.25);
  color: #A855F7;
}

.proof-item:hover .proof-icon-wrap { transform: scale(1.12) translateY(-3px); }
.proof-item:nth-child(1):hover .proof-icon-wrap { box-shadow: 0 0 22px rgba(22,163,74,.4); }
.proof-item:nth-child(2):hover .proof-icon-wrap { box-shadow: 0 0 22px rgba(59,130,246,.4); }
.proof-item:nth-child(3):hover .proof-icon-wrap { box-shadow: 0 0 22px rgba(168,85,247,.4); }

.proof-icon-wrap svg { width: 30px; height: 30px; }

.proof-title {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 1.05rem; font-weight: 700;
  color: var(--text); margin-bottom: 8px;
  letter-spacing: -.015em;
}
.proof-label { font-size: .875rem; color: var(--text-3); line-height: 1.55; }


/* ══════════════════════════════════════════════════
   RESPONSIVE OVERRIDES
   ══════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .categories-row  { grid-template-columns: repeat(2, 1fr); max-width: 520px; }
  .steps-grid      { grid-template-columns: 1fr; max-width: 420px; margin-left: auto; margin-right: auto; }
  .proof-grid      { grid-template-columns: 1fr 1fr; max-width: 560px; }
}
@media (max-width: 580px) {
  .categories-row  { grid-template-columns: 1fr 1fr; gap: 12px; }
  .proof-grid      { grid-template-columns: 1fr; max-width: 380px; }
}