/* ===== Base ===== */
body {
  font-family: "Inter", sans-serif;
  background-color: #f8fafc;
}

/* ===== Cards & hover ===== */
.card-hover {
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.card-hover:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(102, 153, 204, 0.1);
}

.content-card {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
  transition: all 0.3s ease;
}
.content-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 16px rgba(102, 153, 204, 0.12);
}

/* ===== Tabs ===== */
.tab-button {
  flex: 1 1 0%;
  padding: 0.5rem 1.5rem;       /* py-2 px-6 */
  border-radius: 0.5rem;        /* rounded-lg */
  background: #ffffff;
  color: #374151;               /* text-gray-700 */
  font-weight: 500;             /* font-medium */
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
  transition: all 0.3s ease;
  border: none;
}
.tab-button:hover {
  background-color: #6699cc;
  color: #ffffff;
}
.tab-button.active {
  background-color: #6699cc;
  color: #ffffff;
  box-shadow: 0 2px 8px rgba(102, 153, 204, 0.2);
}

.tab-content { display: none; }
.tab-content.active { display: block; }

/* ===== Utilities extracted ===== */
.icon-badge {
  width: 3rem; height: 3rem;            /* w-12 h-12 */
  border-radius: 0.5rem;                 /* rounded-lg */
  display: flex; align-items: center; justify-content: center;
  background-color: rgba(102,153,204,0.1);
  color: #6699cc;
}

.feature-card {
  background: #f9fafb;                   /* bg-gray-50 */
  border-radius: 0.5rem;
  padding: 0.75rem;                       /* p-3 */
  text-align: center;
}

.section-title {
  font-size: 0.875rem;                    /* text-sm */
  font-weight: 500;
  color: #6b7280;                          /* text-gray-500 */
  letter-spacing: 0.05em;                  /* tracking-wide */
  text-transform: uppercase;
}

/* ===== Store list ===== */
.store-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  background: #ffffff;
  padding: 1.25rem;                        /* p-5 */
  border-radius: 0.75rem;                  /* rounded-xl */
  border: 1px solid #f3f4f6;               /* border-gray-100 */
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);  /* shadow-sm */
  transition: all 0.2s ease;
}
.store-card:hover {
  border-color: rgba(102,153,204,0.3);
  box-shadow: 0 4px 12px rgba(102,153,204,0.10);
}

.store-icon {
  width: 2.5rem; height: 2.5rem;          /* w-10 h-10 */
  border-radius: 0.5rem;
  display: flex; align-items: center; justify-content: center;
  background-color: rgba(102,153,204,0.1);
  color: #6699cc;
}

/* ===== Social button (reusable) ===== */
.social-btn {
  width: 2.75rem; height: 2.75rem;        /* w-11 h-11 */
  border-radius: 9999px;
  display: inline-flex; align-items: center; justify-content: center;
  color: #ffffff;
  background-color: #6699cc;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
  transition: all 0.2s ease;
  text-decoration: none;
}
.social-btn:hover {
  color: #000000;
  box-shadow: 0 4px 12px rgba(0,0,0,0.12);
}