/* ════════════════════════════════════════════════════════
   card-improvements-v2.css
   Applies to: Three Steps (compact), Merch Cards (product),
               Travel Destinations (portrait + modal)
   ════════════════════════════════════════════════════════ */


/* ────────────────────────────────────────────────────────
   1. COMPACT STEPS SECTION
   ──────────────────────────────────────────────────────── */
.how-section--compact {
  background: var(--bg);
  border-top: 1px solid var(--b0);
  padding: 38px 0 44px;
}
.how-section--compact .section-head {
  margin-bottom: 28px;
}
.how-section--compact .section-title {
  font-size: 1.4rem;
}
.how-section--compact .steps-grid {
  gap: 14px;
  margin-top: 0;
}
.how-section--compact .step-item {
  border-radius: 16px;
}
.how-section--compact .step-item__visual {
  padding: 22px 16px 18px;
}
.how-section--compact .step-icon-ring {
  width: 64px;
  height: 64px;
}
.how-section--compact .step-icon-ring svg {
  width: 26px;
  height: 26px;
}
.how-section--compact .step-n {
  width: 24px;
  height: 24px;
  font-size: .65rem;
  top: 12px;
  right: 12px;
}
.how-section--compact .step-item__body {
  padding: 0 18px 20px;
}
.how-section--compact .step-item__body h3 {
  font-size: .9rem;
  margin: 14px 0 5px;
}
.how-section--compact .step-item__body p {
  font-size: .78rem;
  line-height: 1.55;
}


/* ────────────────────────────────────────────────────────
   2. PRODUCT-STYLE MERCH CARDS
   ──────────────────────────────────────────────────────── */
.merch-grid--v2 {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
  margin-bottom: var(--s4);
}

.merch-card--v2 {
  background: var(--bg-2);
  border: 1px solid var(--b1);
  border-radius: 20px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  cursor: pointer;
  transition: border-color .25s, box-shadow .3s,
              transform .3s cubic-bezier(.34, 1.56, .64, 1);
}

/* ── Image zone ── */
.merch-card--v2 .merch-card__img-wrap {
  position: relative;
  height: 200px;
  background: #F2F2EF;
  overflow: hidden;
  flex-shrink: 0;
  border-radius: 16px 16px 0 0;
}
.merch-card--v2 .merch-card__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s cubic-bezier(.25, .46, .45, .94);
  z-index: 0;
}
.merch-card--v2:hover .merch-card__photo {
  transform: scale(1.07);
}

/* ── Badge ── */
.merch-card--v2 .merch-card__badge {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 3;
  font-size: .58rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 999px;
  backdrop-filter: blur(8px);
  background: rgba(0, 0, 0, .55);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .15);
}

/* ── Info area ── */
.merch-card--v2 .merch-card__info {
  padding: 18px 18px 14px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.merch-card--v2 .merch-card__name {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: .875rem;
  font-weight: 800;
  color: var(--text);
  letter-spacing: .04em;
  text-transform: uppercase;
  line-height: 1.2;
}
.merch-card--v2 .merch-card__sub {
  font-size: .75rem;
  color: var(--text-3);
  line-height: 1.5;
  flex: 1;
}
.merch-card--v2 .merch-card__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 4px;
}
.merch-card--v2 .merch-card__turn {
  font-size: .68rem;
  color: var(--text-3);
  display: flex;
  align-items: center;
  gap: 4px;
}
.merch-card--v2 .merch-stars {
  font-size: .75rem;
  letter-spacing: 1px;
  color: #EAB308;
}

/* ── CTA strip ── */
.merch-cta {
  display: block;
  text-align: center;
  font-size: .75rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 13px 0;
  text-decoration: none;
  border-radius: 0 0 20px 20px;
  transition: filter .2s, letter-spacing .2s;
}
.merch-cta:hover {
  filter: brightness(1.12);
  letter-spacing: .09em;
}
.merch-cta--green  { background: var(--green);  color: #fff; }
.merch-cta--blue   { background: #3B82F6;        color: #fff; }
.merch-cta--amber  { background: #EAB308;        color: #1a1100; }
.merch-cta--purple { background: #A855F7;        color: #fff; }
.merch-cta--coral  { background: #F97316;        color: #fff; }

/* ── Hover glow per colour ── */
.merch-card--green:hover {
  border-color: rgba(22, 163, 74, .45);
  box-shadow: 0 0 28px rgba(22, 163, 74, .18), 0 10px 32px rgba(0,0,0,.4);
  transform: translateY(-6px);
}
.merch-card--blue:hover {
  border-color: rgba(59, 130, 246, .45);
  box-shadow: 0 0 28px rgba(59, 130, 246, .18), 0 10px 32px rgba(0,0,0,.4);
  transform: translateY(-6px);
}
.merch-card--amber:hover {
  border-color: rgba(234, 179, 8, .45);
  box-shadow: 0 0 28px rgba(234, 179, 8, .18), 0 10px 32px rgba(0,0,0,.4);
  transform: translateY(-6px);
}
.merch-card--purple:hover {
  border-color: rgba(168, 85, 247, .45);
  box-shadow: 0 0 28px rgba(168, 85, 247, .18), 0 10px 32px rgba(0,0,0,.4);
  transform: translateY(-6px);
}
.merch-card--coral:hover {
  border-color: rgba(249, 115, 22, .45);
  box-shadow: 0 0 28px rgba(249, 115, 22, .18), 0 10px 32px rgba(0,0,0,.4);
  transform: translateY(-6px);
}


/* ────────────────────────────────────────────────────────
   3. PROVINCE CARDS — 3×3 GRID
   ──────────────────────────────────────────────────────── */

/* ── Section wrapper ── */
.travel-section {
  background: var(--bg-1);
  border-top: 1px solid var(--b0);
  padding: var(--s5) 0;
}

/* ── 3×3 grid ── */
.prov-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-bottom: var(--s4);
}

/* ── Portrait card ── */
.prov-card {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  height: 380px;
  cursor: pointer;
  border: 1px solid var(--b1);
  transition: transform .35s cubic-bezier(.34,1.4,.64,1), box-shadow .35s, border-color .25s;
}
.prov-card:hover {
  transform: translateY(-8px) scale(1.012);
  box-shadow: 0 24px 64px rgba(0,0,0,.65), 0 0 0 1px rgba(255,255,255,.1);
}

/* ── Full-bleed image ── */
.prov-card__img {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.prov-card__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(.72);
  transition: transform .7s cubic-bezier(.25,.46,.45,.94), filter .4s;
}
.prov-card:hover .prov-card__img img {
  transform: scale(1.08);
  filter: brightness(.88);
}

/* ── Gradient overlay ── */
.prov-card__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    to top,
    rgba(4,4,4,.97)  0%,
    rgba(4,4,4,.68)  35%,
    rgba(4,4,4,.18)  62%,
    transparent      100%
  );
  transition: background .3s;
}
.prov-card:hover .prov-card__overlay {
  background: linear-gradient(
    to top,
    rgba(4,4,4,.99)  0%,
    rgba(4,4,4,.76)  40%,
    rgba(4,4,4,.24)  65%,
    transparent      100%
  );
}

/* ── Text body ── */
.prov-card__body {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  z-index: 2;
  padding: 20px 18px 18px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* ── Province name & tag ── */
.prov-card__name {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 1.35rem;
  font-weight: 800;
  color: #fff;
  line-height: 1;
  letter-spacing: -.03em;
}
.prov-card__tag {
  font-size: .73rem;
  color: rgba(255,255,255,.58);
  line-height: 1.3;
  margin-bottom: 6px;
}
.prov-card__price {
  font-size: .7rem;
  color: rgba(255,255,255,.45);
  margin-bottom: 12px;
}
.prov-card__price strong {
  color: #EAB308;
  font-weight: 800;
  text-shadow: 0 0 12px rgba(234,179,8,.45);
}

/* ── Explore button ── */
.prov-card__btn {
  display: block;
  width: 100%;
  text-align: center;
  background: #E8613A;
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: 9px 18px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: .75rem;
  font-weight: 800;
  letter-spacing: .04em;
  cursor: pointer;
  transition: background .2s, box-shadow .2s, transform .15s;
}
.prov-card:hover .prov-card__btn {
  background: #ff6b42;
  box-shadow: 0 0 20px rgba(232,97,58,.55);
  transform: translateY(-1px);
}

/* ── Badges (shared across cards & modal) ── */
.prov-badge {
  display: inline-flex;
  align-self: flex-start;
  font-size: .58rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
  backdrop-filter: blur(10px);
  margin-bottom: 6px;
}
.prov-badge--blue   { background: rgba(59,130,246,.7);  color: #fff; }
.prov-badge--green  { background: rgba(22,163,74,.7);   color: #fff; }
.prov-badge--amber  { background: rgba(202,138,4,.75);  color: #fff; }
.prov-badge--purple { background: rgba(147,51,234,.7);  color: #fff; }


/* ────────────────────────────────────────────────────────
   4. PROVINCE DETAIL MODAL
   ──────────────────────────────────────────────────────── */

.prov-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  opacity: 0;
  transition: opacity .3s;
}
.prov-modal--open {
  pointer-events: all;
  opacity: 1;
}
.prov-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.84);
  backdrop-filter: blur(6px);
}
.prov-modal__panel {
  position: relative;
  z-index: 1;
  background: var(--bg-2);
  border: 1px solid var(--b2);
  border-radius: 22px;
  overflow: hidden;
  width: min(580px, 94vw);
  max-height: 90vh;
  overflow-y: auto;
  transform: translateY(28px) scale(.96);
  transition: transform .38s cubic-bezier(.34,1.56,.64,1);
  box-shadow: 0 32px 80px rgba(0,0,0,.7);
}
.prov-modal--open .prov-modal__panel {
  transform: translateY(0) scale(1);
}

/* Close button */
.prov-modal__close {
  position: absolute;
  top: 14px; right: 14px;
  z-index: 10;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: rgba(0,0,0,.55);
  border: 1px solid var(--b2);
  color: #fff;
  font-size: 15px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .2s;
  font-family: sans-serif;
  line-height: 1;
}
.prov-modal__close:hover { background: rgba(255,255,255,.18); }

/* Hero image */
.prov-modal__hero {
  position: relative;
  height: 260px;
  overflow: hidden;
  flex-shrink: 0;
}
.prov-modal__hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.prov-modal__hero-ov {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.78) 0%, transparent 60%);
}
.prov-modal__hero-foot {
  position: absolute;
  bottom: 16px; left: 20px;
  display: flex;
  gap: 8px;
  align-items: center;
  z-index: 2;
}
.prov-price-tag {
  font-size: .75rem;
  font-weight: 700;
  color: #ca8a04;
  background: rgba(0,0,0,.62);
  border: 1px solid rgba(255,255,255,.2);
  padding: 4px 12px;
  border-radius: 999px;
  backdrop-filter: blur(8px);
}

/* Body */
.prov-modal__body {
  padding: 26px 28px 30px;
}
.prov-modal__loc {
  font-size: .75rem;
  color: var(--text-3);
  font-weight: 600;
  margin-bottom: 7px;
  display: flex;
  align-items: center;
  gap: 5px;
}
.prov-modal__title {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--text);
  margin-bottom: 12px;
  letter-spacing: -.025em;
  line-height: 1.2;
}
.prov-modal__desc {
  font-size: .9rem;
  color: var(--text-2);
  line-height: 1.72;
  margin-bottom: 22px;
}

/* Detail rows table */
.prov-modal__rows {
  background: var(--bg-3);
  border: 1px solid var(--b1);
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 24px;
}
.prov-modal__row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 12px 16px;
  font-size: .85rem;
  border-bottom: 1px solid var(--b0);
  gap: 16px;
}
.prov-modal__row:last-child { border-bottom: none; }
.prov-modal__row span:first-child {
  color: var(--text-3);
  font-weight: 600;
  flex-shrink: 0;
  min-width: 130px;
}
.prov-modal__row span:last-child {
  color: var(--text);
  font-weight: 500;
  text-align: right;
}

/* Actions */
.prov-modal__actions {
  display: flex;
  gap: 12px;
}
.prov-modal__actions .btn {
  flex: 1;
  justify-content: center;
  text-align: center;
}


/* ────────────────────────────────────────────────────────
   5. RESPONSIVE
   ──────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .merch-grid--v2    { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 900px) {
  .prov-grid         { grid-template-columns: repeat(2, 1fr); }
  .prov-card         { height: 320px; }
}
@media (max-width: 860px) {
  .merch-grid--v2                     { grid-template-columns: repeat(2, 1fr); }
  .how-section--compact .steps-grid   { grid-template-columns: 1fr; max-width: 340px; margin: 0 auto; }
}
@media (max-width: 600px) {
  .prov-grid         { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .prov-card         { height: 270px; }
  .prov-card__name   { font-size: 1.1rem; }
  .merch-grid--v2    { grid-template-columns: 1fr; }
  .prov-modal__body  { padding: 20px; }
  .prov-modal__hero  { height: 220px; }
  .prov-modal__actions { flex-direction: column; }
}
@media (max-width: 380px) {
  .prov-grid         { grid-template-columns: 1fr; }
  .prov-card         { height: 300px; }
}

/* ════════════════════════════════════════════════════════════
   EVENT EQUIPMENT — Apple-style Bento Grid
   ════════════════════════════════════════════════════════════ */

/* ── Section ── */
.eq-section {
  background: var(--bg);
  padding: 80px 0 90px;
  border-top: 1px solid var(--b0);
}

/* ── Header ── */
.eq-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 40px;
  gap: 24px;
}
.eq-header__left .section-title { margin-bottom: 8px; }
.eq-header__left .section-sub   { max-width: 440px; }

.eq-all-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: .8125rem;
  font-weight: 700;
  color: var(--text-2);
  text-decoration: none;
  padding: 10px 20px;
  border: 1px solid var(--b2);
  border-radius: 999px;
  transition: color .2s, border-color .2s, background .2s;
  flex-shrink: 0;
}
.eq-all-btn:hover {
  color: var(--text);
  border-color: rgba(255,255,255,.28);
  background: rgba(255,255,255,.05);
}

/* ── Bento grid ── */
.eq-bento {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  align-items: stretch;
}
.eq-stack {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.eq-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  flex: 1;
}

/* ── Base tile ── */
.eq-tile {
  position: relative;
  border-radius: 22px;
  overflow: hidden;
  cursor: pointer;
  isolation: isolate;
  border: 1px solid rgba(255,255,255,.07);
  /* Spring physics hover */
  transition:
    transform .45s cubic-bezier(.34,1.4,.64,1),
    box-shadow .45s cubic-bezier(.34,1.4,.64,1),
    border-color .3s;
}
.eq-tile:hover {
  transform: scale(1.018) translateY(-4px);
  box-shadow:
    0 30px 80px rgba(0,0,0,.6),
    0 0 0 1px rgba(255,255,255,.12);
}

/* ── Image fills the whole tile ── */
.eq-tile__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.eq-tile__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: brightness(.65) saturate(1.1);
  transition: transform .7s cubic-bezier(.25,.46,.45,.94), filter .4s;
  will-change: transform;
}
.eq-tile:hover .eq-tile__media img {
  transform: scale(1.07);
  filter: brightness(.8) saturate(1.2);
}

/* ── Frosted glass content panel ── */
.eq-tile__glass {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  z-index: 2;
  padding: 22px 22px 20px;
  background: linear-gradient(
    to top,
    rgba(6,6,6,.97)  0%,
    rgba(6,6,6,.88)  40%,
    rgba(6,6,6,.55)  72%,
    transparent      100%
  );
  backdrop-filter: blur(0px);
  transition: backdrop-filter .3s, background .3s, padding .3s;
}
.eq-tile:hover .eq-tile__glass {
  backdrop-filter: blur(2px);
}

/* Wide card glass adjustments */
.eq-tile__glass--wide {
  padding: 20px 24px 20px;
}
.eq-tile__glass--mini {
  padding: 14px 16px 15px;
}

/* ── Shine overlay (Apple-style specular highlight) ── */
.eq-tile__shine {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(
    135deg,
    rgba(255,255,255,.06) 0%,
    transparent 50%,
    rgba(255,255,255,.02) 100%
  );
  opacity: 0;
  transition: opacity .3s;
  border-radius: inherit;
}
.eq-tile:hover .eq-tile__shine { opacity: 1; }

/* ── Coloured left-edge accent (appears on hover) ── */
.eq-tile::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  z-index: 4;
  border-radius: 22px 0 0 22px;
  opacity: 0;
  transition: opacity .3s;
}
.eq-tile--hero::before    { background: linear-gradient(180deg,#FCD34D,#D97706); }
.eq-tile--wide::before    { background: linear-gradient(180deg,#93C5FD,#2563EB); }
.eq-tile--mini:first-child::before { background: linear-gradient(180deg,#4ADE80,#16A34A); }
.eq-tile--mini:last-child::before  { background: linear-gradient(180deg,#C4B5FD,#7C3AED); }
.eq-tile:hover::before { opacity: 1; }

/* ── Tile heights ── */
.eq-tile--hero { min-height: 560px; }
.eq-tile--wide { flex: 1; min-height: 200px; }
.eq-tile--mini { min-height: 220px; }

/* ── Category pill ── */
.eq-tile__pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: .62rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .1em;
  padding: 5px 11px;
  border-radius: 999px;
  margin-bottom: 10px;
  backdrop-filter: blur(16px);
  border: 1px solid transparent;
  transition: box-shadow .3s;
}
.eq-pill--amber  { background: rgba(217,119, 6,.22); border-color: rgba(253,186,26,.28); color: #FCD34D; }
.eq-pill--blue   { background: rgba(37, 99,235,.22); border-color: rgba(147,197,253,.28); color: #BAE6FD; }
.eq-pill--green  { background: rgba(22,163, 74,.22); border-color: rgba(74 ,222,128,.28); color: #4ADE80; }
.eq-pill--purple { background: rgba(124,58 ,237,.22); border-color: rgba(196,181,253,.28); color: #C4B5FD; }

.eq-tile:hover .eq-pill--amber  { box-shadow: 0 0 16px rgba(253,186,26,.35); }
.eq-tile:hover .eq-pill--blue   { box-shadow: 0 0 16px rgba(147,197,253,.35); }
.eq-tile:hover .eq-pill--green  { box-shadow: 0 0 16px rgba(74,222,128,.35);  }
.eq-tile:hover .eq-pill--purple { box-shadow: 0 0 16px rgba(196,181,253,.35); }

/* ── Typography ── */
.eq-tile__name {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 1.25rem;
  font-weight: 800;
  color: #fff;
  letter-spacing: -.025em;
  line-height: 1.1;
  margin-bottom: 8px;
  transition: color .2s;
}
.eq-tile--wide  .eq-tile__name { font-size: 1.15rem; }
.eq-tile--mini  .eq-tile__name { font-size: 1rem; margin-bottom: 10px; }

.eq-tile__desc {
  font-size: .8rem;
  color: rgba(255,255,255,.6);
  line-height: 1.6;
  margin-bottom: 16px;
}
.eq-tile--wide .eq-tile__desc { font-size: .78rem; margin-bottom: 14px; }

/* ── Feature spec list (hero card only) ── */
.eq-tile__specs {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 20px;
}
.eq-tile__specs li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .76rem;
  color: rgba(255,255,255,.55);
  font-weight: 500;
  transition: color .2s;
}
.eq-tile:hover .eq-tile__specs li { color: rgba(255,255,255,.8); }

.eq-spec-dot {
  display: block;
  width: 5px; height: 5px;
  border-radius: 50%;
  flex-shrink: 0;
}
.eq-dot--amber  { background: #FCD34D; box-shadow: 0 0 6px rgba(253,186,26,.8); }
.eq-dot--blue   { background: #93C5FD; box-shadow: 0 0 6px rgba(147,197,253,.8); }
.eq-dot--green  { background: #4ADE80; box-shadow: 0 0 6px rgba(74,222,128,.8);  }
.eq-dot--purple { background: #C4B5FD; box-shadow: 0 0 6px rgba(196,181,253,.8); }

/* ── CTA button ── */
.eq-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: .78rem;
  font-weight: 800;
  padding: 9px 18px;
  border-radius: 999px;
  border: 1.5px solid transparent;
  text-decoration: none;
  letter-spacing: .02em;
  cursor: pointer;
  transition: all .25s cubic-bezier(.34,1.5,.64,1);
  position: relative;
  z-index: 5;
}
.eq-cta--sm { font-size: .72rem; padding: 7px 14px; }

/* Resting — tinted outline */
.eq-cta--amber  { background: rgba(217,119,6,.14);  border-color: rgba(253,186,26,.3);  color: #FCD34D; }
.eq-cta--blue   { background: rgba(37,99,235,.14);  border-color: rgba(147,197,253,.3); color: #BAE6FD; }
.eq-cta--green  { background: rgba(22,163,74,.14);  border-color: rgba(74,222,128,.3);  color: #4ADE80; }
.eq-cta--purple { background: rgba(124,58,237,.14); border-color: rgba(196,181,253,.3); color: #C4B5FD; }

/* Hover — fully filled, glowing */
.eq-tile:hover .eq-cta--amber  { background: #D97706; border-color: #D97706; color: #fff;  box-shadow: 0 0 28px rgba(217,119,6,.55);  transform: translateY(-2px); }
.eq-tile:hover .eq-cta--blue   { background: #2563EB; border-color: #2563EB; color: #fff;  box-shadow: 0 0 28px rgba(37,99,235,.55);  transform: translateY(-2px); }
.eq-tile:hover .eq-cta--green  { background: #16A34A; border-color: #16A34A; color: #fff;  box-shadow: 0 0 28px rgba(22,163,74,.55);  transform: translateY(-2px); }
.eq-tile:hover .eq-cta--purple { background: #7C3AED; border-color: #7C3AED; color: #fff;  box-shadow: 0 0 28px rgba(124,58,237,.55); transform: translateY(-2px); }


/* ── Responsive ── */
@media (max-width: 920px) {
  .eq-bento { grid-template-columns: 1fr; }
  .eq-tile--hero { min-height: 420px; }
  .eq-pair { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .eq-header { flex-direction: column; align-items: flex-start; gap: 16px; }
  .eq-all-btn { align-self: flex-start; }
  .eq-pair { grid-template-columns: 1fr; }
  .eq-tile--hero { min-height: 380px; }
  .eq-tile--mini { min-height: 200px; }
}