body, html { margin:0; padding:0; height:100%; width:100%; font-family:'Poppins',Arial,sans-serif; background:#22223b; }
.slider-bg, .slide { position:fixed; top:0; left:0; width:100vw; height:100vh; z-index:0; }
.slider-bg { overflow:hidden; }
.slide {
  opacity:0; position:absolute; width:100vw; height:100vh; background-size:cover; background-position:center; transition:opacity 1.9s cubic-bezier(.4,0,.2,1);
}
/* Dummy images: replace with your own in images/slide1.jpg, slide2.jpg, slide3.jpg */
.slide1 { background-image:url('../images/slide1.jpg'); }
.slide2 { background-image:url('../images/slide2.jpg'); }
.slide3 { background-image:url('../images/slide3.jpg'); }

.top-logo { position: absolute; top: 80px; left: 50%; transform: translateX(-50%); z-index: 20; }
.top-logo img { max-width: 100px; height: auto; margin-bottom:12px; }

.center-hero { position:absolute; top:48%; left:50%; transform:translate(-50%,-50%); z-index:30; text-align:center; width:98vw; max-width:650px; }
.clock-frame { position:relative; display:flex; justify-content:center; align-items:center; }
.clock-lines {
  position:absolute; width:410px; height:410px; left:50%; top:50%; transform:translate(-50%,-50%);
  pointer-events:none; z-index:5;
}
.clock-lines:before, .clock-lines:after {
  content:'';
  display:block;
  position:absolute;
  width:410px; height:410px;
  left:0; top:0; border-radius:50%;
}
.clock-lines:before { border:solid 2.4px rgba(255,255,255,0.14); }
.clock-lines:after { border:solid 1.34px rgba(255,255,255,0.08); }

.clock-lines { background:repeating-linear-gradient(0deg,transparent,transparent 44px,rgba(255,255,255,0.24) 44px,rgba(255,255,255,0.24) 48px,transparent 48px,transparent 82px); border-radius:50%; }
.coming-content { position: relative; z-index: 10; width:100%; }
.site-note { font-size:1.13rem; letter-spacing:0.23em; color:#fff; opacity:.67; font-weight:400; }
.coming-soon-title { font-size:4rem; font-weight:800; color:#fff; margin:12px 0 19px 0; letter-spacing:0.13em;}
.coming-soon-title .coming-text {
  display: inline-block;
  width: auto;
  font-size: inherit;
  letter-spacing: inherit;
}

/* On mobile, break into two lines & boost font size */
@media (max-width: 600px) {
  .coming-soon-title .coming-text {
    display: block;
    width: 100%;
    font-size: 2.5rem;
    line-height: 1.09;
    letter-spacing: 0.08em;
    text-align: center;
  }
  .coming-soon-title .coming-text::after {
    content: "";
    display: block;
  }
  .coming-soon-title .coming-text {
    /* Trick: Split into two lines at space ("COMING SOON") */
    word-break: keep-all;
    /* Use forced line break after "COMING" only on mobile */
  }
}

/* Use JS below to add line break on mobile */

.under-title { font-size:1.28rem; letter-spacing:0.13em; color:#fff; opacity:.87; }

#flipdown { margin:48px auto 0 auto; }

.bottom-center-ui {
  position:fixed; left:0; right:0; bottom:38px; z-index:100; display:flex; flex-direction:column; align-items:center; justify-content:flex-end;
}
.inquire-btn {
  background:#f73452; color:#fff; border:none; border-radius:50px;
  padding:18px 32px; font-size:1.13rem; font-weight:600; box-shadow:0 8px 26px rgba(244,96,54,0.17);
  cursor:pointer; transition:transform 0.14s, box-shadow 0.14s;
  margin-bottom:18px;
}
.inquire-btn:hover { transform:scale(1.07); box-shadow:0 2px 26px rgba(244,96,54,0.33); }
.social-icons { display:flex; gap:38px; justify-content:center; }
.social-icons img { width:32px; opacity:1; transition:opacity 1s;}
.social-icons img:hover { opacity:1; }

.popup-form-container {
  display:none; position:fixed; top:0; left:0; width:100vw; height:100vh; background:rgba(30,30,40,0.76); z-index:120; align-items:center; justify-content:center;
}
.popup-form-container.active { display:flex; }
.popup-form { background:#fff; padding:34px 26px 26px 26px; border-radius:16px; box-shadow:0 10px 32px rgba(34,34,59,0.18); position:relative; min-width:320px; max-width:98vw; width:360px;}
.popup-form h2 { margin:0 0 14px 0; font-size:1.25rem; color:#22223b;}
.popup-form input, .popup-form textarea { width:100%; padding:9px 12px; margin-bottom:14px; border:1px solid #a3a3c2; border-radius:9px; font-size:1rem; background:#f8f8fc;}
.popup-form textarea { min-height:48px; resize:vertical;}
.popup-form button { background:#f73452; color:#fff; border:none; padding:12px 0; width:100%; border-radius:9px; font-size:1.11rem; cursor:pointer; font-weight:600;}
.close-btn { position:absolute; top:14px; right:14px; font-size:1.7rem; color:#888; cursor:pointer; font-weight:300; transition:color 0.2s;}
.close-btn:hover { color:#f73452; }

@media (max-width:690px) {
  .center-hero { max-width:99vw; padding:0 4vw;}
  .clock-lines { width:88vw; height:88vw; min-width:180px; min-height:180px;}
  .coming-soon-title { font-size:2.37rem;}
}
@media (max-width:500px) {
  .top-logo img { max-width:120px;}
  .clock-lines { width:76vw; height:76vw;}
  .coming-content .site-note { font-size:.88rem;}
  .coming-soon-title { font-size:1.33rem;}
  .popup-form { min-width:95vw; padding:13px 5px 5px 5px;}
}
/* (Above other styles!) */
.hero-overlay {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(22, 22, 29, 0.62); /* change to 0.75 for darker */
  z-index: 10;
  pointer-events: none;
}
.center-hero {
  position: absolute;
  top: 50%; left: 50%; transform: translate(-50%, -50%);
  z-index: 20;
  width: 98vw;
  max-width: 650px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
/* Keep your .top-logo, .clock-frame, .coming-content, etc as they are */