/* Global resets */
* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

body {
  margin: 0;
  font-family: 'Poppins', system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, 'Helvetica Neue', Arial, 'Noto Sans', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
  color: #ffffff;
  overflow-x: hidden; /* prevent horizontal scrolling */

  /* Full-bleed background image */
  background-image: url("assets/background image/comingSoon.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  /* Layout: header on top, content centered below */
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: 100svh; /* handles mobile UI chrome safely */
}

/* Header (logo centered at the top) */
.site-header {
  display: flex;
  justify-content: center;
  padding: clamp(12px, 3vw, 32px) 16px 0;
}

.site-logo {
  height: clamp(36px, 8vw, 60px);
  width: auto;
  max-width: min(50vw, 400px);
}

/* Media defaults for media elements */
img, svg {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Hero section */
.hero {
  display: grid;
  place-items: center;
  padding: clamp(16px, 4vw, 56px) 16px clamp(24px, 5vw, 72px);
}

.hero__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(8px, 2vw, 16px);
  width: 100%;
  max-width: 1400px; /* matches spec for title width at desktop */
  margin: 0 auto;
  text-align: center;
}

/* Title (spec with responsive scaling) */
.title {
  margin: 0;
  font-family: 'Poppins', sans-serif;
  font-style: normal;
  font-weight: 700; /* 700 */
  color: #04AF70; /* primary green */
  text-align: center;
  text-shadow: 0 0px 2px rgba(255, 255, 255, 0.3), 8px -2px 8px rgba(255, 255, 255, 0.3); /* layered soft white shadows */

  /* scales but caps at design size 128/192 */
  font-size: clamp(36px, 10vw, 128px); /* 128px at large */
  line-height: clamp(44px, 12vw, 192px); /* 192px at large (identical to box height) */
  /* keep text centered with optional max width as per spec */
  max-width: 1239px;
}

/* Description (spec with responsive scaling) */
.desc {
  margin: 0;
  text-transform: capitalize;
  font-weight: 400; /* improved readability */
  color: #FFFFFF;
  font-size: clamp(22px, 2.4vw, 22px); /* 22px at large */
  line-height: clamp(24px, 3.4vw, 33px); /* avoid line-height < font-size */
  max-width: 913px; /* matches spec at desktop */
}

/* Group desc and notify to control spacing */
.desc-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(16px, 6vw, 70px);
  margin-bottom: 15px;
}

/* Improve contrast on very small screens if needed */
@media (max-width: 420px) {
  .hero__content {
    gap: 8px;
  }
  .desc {
    text-wrap: balance;
  }
}

/* Notification text */
.notify {
  margin: 0 auto;
  width: 100%;
  max-width: 1013px;
  height: auto; /* allow wrapping without clipping */
  font-family: 'Poppins', sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 18px;
  line-height: 27px; /* identical to box height */
  text-align: center;
  text-transform: capitalize;
  color: #ABADB1;
}

/* Notification form container */
.notify-form {
  display: flex; /* Auto layout */
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 0;
  gap: 16px;

  width: 100%;
  max-width: 1239px;
  height: 48px;
}

/* Text field wrapper */
.textfield {
  box-sizing: border-box;
  display: flex; /* Auto layout */
  flex-direction: row;
  align-items: center;
  padding: 12px 16px;
  gap: 4px;

  width: 100%;
  max-width: 431px;
  height: 48px;

  border: 1px solid #E6E7E8;
  border-radius: 100px;
  background: rgba(255, 255, 255, 0.02);
}

.textfield__input {
  width: 100%;
  border: none;
  outline: none;
  background: transparent;

  font-family: 'Poppins', sans-serif; /* Web Fonts/Text Field */
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: #FFFFFF;
}

.textfield__input::placeholder {
  color: #ABADB1;
}

/* Button */
.btn {
  display: flex; /* Auto layout */
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 12px 24px;

  width: 126px;
  height: 48px;

  background: #04AF70;
  box-shadow: inset 0px -2px 8px rgba(255, 255, 255, 0.5), inset 0px 2px 8px rgba(255, 255, 255, 0.5); /* Buttons Shadow */
  border-radius: 100px;
  border: none;
  cursor: pointer;

  color: #FFFFFF;
  font-family: 'Poppins', sans-serif; /* Web Fonts/Button */
  font-style: normal;
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
}

.btn:hover {
  filter: brightness(1.05);
}

.btn:active {
  transform: translateY(1px);
}

/* Form status message */
.form-status {
  margin-top: 8px;
  min-height: 1.25em; /* reserve space to prevent layout shift */
  font-size: 14px;
  color: #ABADB1;
}
.form-status.success { color: #04AF70; }
.form-status.error { color: #ff6b6b; }

/* Footer */
.site-footer {
  padding: 0;
}

.footer__inner {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 0 50px 16px; /* 50px from screen edges, small bottom padding */
  flex-wrap: nowrap;
}

.copyright {
  margin: 0;
  width: auto;
  height: auto;
  font-family: 'Poppins', sans-serif; /* Web Fonts/Body Large */
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px; /* identical to box height */
  color: #FFFFFF;
}

.footer-email {
  margin: 0;
  width: auto;
  height: auto;
  font-family: 'Poppins', sans-serif; /* Web Fonts/Body Large */
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px; /* identical to box height */
  color: #FFFFFF;
  text-decoration: none;
}

.footer-email:hover { text-decoration: underline; }

/* Responsiveness tweaks */
@media (max-width: 768px) {
  .notify { font-size: 16px; line-height: 24px; }
  .notify-form { flex-direction: column; height: auto; }
  .btn { width: 100%; max-width: 431px; }
}

/* Mobile-first refinements */
@media (max-width: 480px) {
  .hero { padding: 24px 8px 32px; }
  .hero__content { gap: 12px; }
  .desc-group { gap: 24px; }
  .notify { font-size: 14px; line-height: 20px; }
  .footer__inner { flex-direction: row; gap: 8px; padding: 0 50px 12px; }
  .copyright, .footer-email { font-size: 12px; line-height: 18px; }
  .desc { font-size: 14px; line-height: 20px; }
}