/* Coming Soon Page - Matching allaydzqe world aesthetic */

/* ---------- Tokens ---------- */
:root{
  --warm-white:#FAF9F6;
  --sage:#DCE8D5;
  --mist:#E9E9E7;
  --latte:#B89B7A;
  --charcoal:#2E2E2E;
  --charcoal-soft:#4a4a4a;
  --muted:#7a7773;

  --radius:20px;
  --radius-lg:28px;
  --shadow-sm:0 2px 10px rgba(46,46,46,.04);
  --shadow:0 14px 40px -18px rgba(46,46,46,.18), 0 2px 8px rgba(46,46,46,.04);
  --shadow-lift:0 22px 50px -22px rgba(46,46,46,.22), 0 4px 14px rgba(46,46,46,.05);

  --ease:cubic-bezier(.22,.61,.36,1);
  --t:420ms;

  --serif:'Fraunces', ui-serif, Georgia, serif;
  --sans:'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
html,body{background:var(--warm-white);color:var(--charcoal)}
body{
  font-family:var(--sans);
  font-weight:400;
  font-size:17px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
  position:relative;
}

img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}

.coming-soon-main {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 80px 32px;
  background: var(--warm-white);
  position: relative;
  overflow: hidden;
}

.coming-soon-main::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 20% 20%, rgba(184,155,122,.05), transparent 40%),
    radial-gradient(circle at 80% 60%, rgba(220,232,213,.18), transparent 50%);
  pointer-events: none;
}

.coming-soon-container {
  max-width: 680px;
  width: 100%;
  text-align: center;
  position: relative;
  z-index: 1;
  background: rgba(255,255,255,.55);
  backdrop-filter: blur(14px) saturate(130%);
  -webkit-backdrop-filter: blur(14px) saturate(130%);
  padding: 80px 48px;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(46,46,46,.06);
  box-shadow: var(--shadow);
}

/* Typography */
.coming-soon-eyebrow {
  font-size: 13px;
  letter-spacing: .18em;
  color: var(--latte);
  margin-bottom: 24px;
  font-weight: 500;
  font-style: italic;
}

.coming-soon-title {
  font-family: var(--serif);
  font-size: clamp(48px, 6vw, 72px);
  color: var(--charcoal);
  margin-bottom: 24px;
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -.02em;
}

.coming-soon-description {
  font-size: 18px;
  color: var(--muted);
  margin-bottom: 48px;
  line-height: 1.7;
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
}

/* Countdown Timer */
.countdown-timer {
  display: flex;
  gap: 24px;
  justify-content: center;
  margin-bottom: 48px;
  flex-wrap: wrap;
}

.countdown-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 80px;
}

.countdown-value {
  font-size: 48px;
  font-weight: 500;
  color: var(--charcoal);
  font-family: var(--serif);
  line-height: 1;
}

.countdown-label {
  font-size: 12px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .15em;
  margin-top: 8px;
  font-weight: 500;
}

.countdown-ended {
  font-size: 24px;
  color: var(--latte);
  font-weight: 500;
  font-family: var(--serif);
}

/* Notify Section */
.notify-section {
  margin-bottom: 40px;
}

.notify-title {
  font-family: var(--serif);
  font-size: 22px;
  color: var(--charcoal);
  margin-bottom: 24px;
  font-weight: 500;
  letter-spacing: -.01em;
}

.notify-form {
  max-width: 500px;
  margin: 0 auto;
}

.notify-input-group {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.notify-input {
  flex: 1;
  min-width: 250px;
  padding: 16px 20px;
  border: 1px solid rgba(46,46,46,.12);
  border-radius: var(--radius);
  font-family: var(--sans);
  font-size: 16px;
  background: var(--warm-white);
  color: var(--charcoal);
  transition: all var(--t) var(--ease);
}

.notify-input::placeholder {
  color: var(--muted);
  opacity: .6;
}

.notify-input:focus {
  outline: none;
  border-color: var(--latte);
  box-shadow: 0 0 0 3px rgba(184,155,122,.1);
}

.notify-button {
  padding: 16px 32px;
  background: var(--latte);
  color: var(--warm-white);
  border: none;
  border-radius: var(--radius);
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--t) var(--ease);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  white-space: nowrap;
}

.notify-button:hover {
  background: var(--charcoal);
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}

.notify-button:active {
  transform: translateY(0);
}

/* Actions */
.coming-soon-actions {
  margin-bottom: 32px;
}

.btn-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 28px;
  background: transparent;
  color: var(--charcoal);
  border: 1px solid rgba(46,46,46,.12);
  border-radius: var(--radius);
  font-family: var(--sans);
  font-weight: 500;
  font-size: 15px;
  text-decoration: none;
  transition: all var(--t) var(--ease);
}

.btn-back:hover {
  background: var(--mist);
  border-color: var(--latte);
  transform: translateX(-3px);
}

.btn-back svg {
  transition: transform var(--t) var(--ease);
}

.btn-back:hover svg {
  transform: translateX(-2px);
}

/* Footer */
.coming-soon-footer {
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--charcoal);
  opacity: .7;
  padding-top: 32px;
  border-top: 1px solid rgba(46,46,46,.06);
}

/* Responsive Design */
@media (max-width: 768px) {
  .coming-soon-main {
    padding: 60px 24px;
  }

  .coming-soon-container {
    padding: 60px 32px;
  }

  .coming-soon-title {
    font-size: clamp(40px, 8vw, 56px);
  }

  .countdown-timer {
    gap: 16px;
  }

  .countdown-item {
    min-width: 70px;
  }

  .countdown-value {
    font-size: 40px;
  }

  .notify-input-group {
    flex-direction: column;
  }

  .notify-input,
  .notify-button {
    width: 100%;
  }
}

@media (max-width: 480px) {
  .coming-soon-main {
    padding: 40px 20px;
  }

  .coming-soon-container {
    padding: 48px 24px;
  }

  .coming-soon-title {
    font-size: 36px;
  }

  .coming-soon-description {
    font-size: 16px;
  }

  .countdown-timer {
    gap: 12px;
  }

  .countdown-item {
    min-width: 60px;
  }

  .countdown-value {
    font-size: 32px;
  }

  .countdown-label {
    font-size: 11px;
  }

  .notify-input,
  .notify-button {
    padding: 14px 18px;
    font-size: 15px;
  }
}