/* Coming Soon Page  */

html, body {
  height: 100%;
  margin: 0;
}

body {
  background-image: url("assets/images/landing-page.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;   /* ADD THIS */
  background-color: #000;         /* ADD THIS (fallback) */

  font-family: Arial, sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100svh;
}

.card {
	margin: 16px;  
	background: white;
	max-width: 650px;
	width: 100%;
	padding: 40px 25px;
	border-radius: 16px;
	text-align: center;
	box-shadow: 0 10px 30px rgba(0,0,0,0.08);
	border: 1px solid #e5e5ea;
}

h1 {
  margin: 0;
  color: #007aff;
  font-size: 44px;
}

.tagline {
  margin: 10px 0 0;
  font-weight: bold;
}

.message {
	margin: 20px 0 30px;
	line-height: 1.5;
}

.cta {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

.button {
  text-decoration: none;
  background: #007aff;
  color: white;
  padding: 12px 16px;
  border-radius: 10px;
  font-weight: bold;
}

.button.outline {
  background: transparent;
  color: #007aff;
  border: 2px solid #007aff;
}

.small {
  margin-top: 25px;
  color: #666;
  font-size: 14px;
}

/* TapWise Animated Button */
.tw-button {
  background-color: #007aff;          /* TapWise blue */
  color: #ffffff;
  border: none;
  border-radius: 10px;
  padding: 14px 22px;
  font-size: 18px;
  font-weight: bold;
  cursor: pointer;
  overflow: hidden;
  position: relative;
  transition: background-color 0.3s ease;
}

/* Inner text wrapper */
.tw-button span {
  display: inline-block;
  position: relative;
  transition: padding-right 0.3s ease;
}

/* Arrow */
.tw-button span::after {
  content: "→";
  position: absolute;
  opacity: 0;
  right: -18px;
  top: 0;
  transition: opacity 0.3s ease, right 0.3s ease;
}

/* Hover animation */
.tw-button:hover {
  background-color: #005bbb;          /* darker blue */
}

.tw-button:hover span {
  padding-right: 22px;
}

.tw-button:hover span::after {
  opacity: 1;
  right: 0;
}