*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --gold:  #c9a86c;
  --white: #ffffff;
  --cream: #ede0ca;
  --dark:  #0a0603;
}

html, body {
  width: 100%;
  min-height: 100%;
  background: var(--dark);
  overflow-x: hidden;
}

/* ── BACKGROUND ── */
.bg-image {
  position: fixed; inset: 0; z-index: 0;
  background: url('assets/comming-mobile.png') center top / cover no-repeat;
}
@media (min-width: 769px) {
  .bg-image {
    background: url('assets/comming-desktop.png') center center / cover no-repeat;
  }
}

.bg-overlay {
  position: fixed; inset: 0; z-index: 1;
  background: linear-gradient(180deg,
    rgba(6,3,1,.70) 0%,
    rgba(6,3,1,.55) 25%,
    rgba(6,3,1,.60) 55%,
    rgba(6,3,1,.82) 100%);
}

/* ── CONTAINER ── */
.container {
  position: relative; z-index: 2;
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 36px 28px 44px;
}

/* ── LOGO CREST ── */
.logo-crest {
  width: 200px;
  margin-bottom: 24px;
  opacity: 0;
  animation: fadeDown .9s ease .1s forwards;
}
.logo-crest img {
  width: 100%; height: auto; display: block;
  filter: invert(1) drop-shadow(0 0 14px rgba(201,168,108,.2));
}

/* ── BRAND IDENTITY ── */
.brand-identity {
  text-align: center;
  margin-bottom: 16px;
  opacity: 0;
  animation: fadeUp .9s ease .35s forwards;
}
.tagline {
  font-family: 'Cinzel', serif;
  font-size: 10.5px; font-weight: 400;
  letter-spacing: 5.5px; color: var(--cream);
  opacity: .85; margin-bottom: 5px;
}
.brand-name {
  font-family: 'Cinzel', serif;
  font-size: 50px; font-weight: 400;
  letter-spacing: 12px; text-indent: 12px;
  color: var(--cream); line-height: 1;
  margin-bottom: 8px;
}
.korean-text {
  font-family: 'Noto Serif KR', serif;
  font-size: 17px; font-weight: 300;
  letter-spacing: 1.5px; color: var(--gold);
}

/* ── DIVIDER ── */
.divider-diamond {
  display: flex; align-items: center;
  width: 78%; max-width: 300px;
  margin: 0 auto 28px; gap: 10px;
  opacity: 0; animation: fadeIn .8s ease .55s forwards;
}
.line { flex: 1; height: 1px; background: var(--gold); opacity: .55; }
.diamond { font-size: 9px; color: var(--gold); flex-shrink: 0; }

/* ── COMING BLOCK ── */
.coming-block {
  text-align: center; margin-bottom: 28px;
  opacity: 0; animation: fadeUp .9s ease .7s forwards;
}
.coming-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 40px; font-weight: 400; font-style: italic;
  line-height: 1.22; color: var(--white); margin-bottom: 20px;
}
.gold { color: var(--gold); font-style: italic; }
.coming-desc {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 15px; font-weight: 300;
  color: var(--cream); line-height: 1.78;
  margin-bottom: 18px; opacity: .9;
}
.divider-short {
  width: 80px; height: 1px;
  background: var(--gold); opacity: .6;
  margin: 0 auto 18px;
}
.patience-text {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 15px; font-weight: 300;
  color: var(--white); opacity: .85;
}

/* ── CTA ── */
.cta-wrap {
  width: 100%; max-width: 320px;
  margin: 0 auto 40px;
  opacity: 0; animation: fadeUp .9s ease .88s forwards;
}
.cta-btn {
  display: block; width: 100%;
  padding: 17px 20px; background: transparent;
  border: 1.5px solid var(--gold); color: var(--gold);
  font-family: 'Cinzel', serif;
  font-size: 12px; font-weight: 500;
  letter-spacing: 7px; text-indent: 7px;
  cursor: pointer; outline: none;
  position: relative; overflow: hidden;
  transition: background .28s, color .28s;
}
.cta-btn:hover { background: var(--gold); color: #1a0f06; }

/* ── CONTACT ── */
.contact-section {
  width: 100%; max-width: 360px;
  opacity: 0; animation: fadeUp .9s ease 1.05s forwards;
}
.contact-divider {
  width: 100%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(201,168,108,.4), transparent);
}
.contact-row {
  display: flex; align-items: center;
  gap: 16px; padding: 15px 2px;
}
.contact-icon {
  flex-shrink: 0; width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  color: var(--gold);
}
.contact-icon svg { width: 24px; height: 24px; }
.contact-text {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 15px; font-weight: 400;
  color: var(--cream); line-height: 1.6;
}

/* ── DESKTOP ADJUSTMENTS ── */
@media (min-width: 769px) {
  .container { max-width: 540px; padding: 44px 40px 50px; }
  .logo-crest { width: 220px; }
  .brand-name { font-size: 54px; letter-spacing: 13px; }
  .coming-title { font-size: 46px; }
  .coming-desc, .patience-text { font-size: 16px; }
}

/* ── ANIMATIONS ── */
@keyframes fadeDown {
  from { opacity: 0; transform: translateY(-12px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn { to { opacity: 1; } }