/* =====================================================
   COMING SOON PAGE — DWELLO V1
===================================================== */

.coming-soon-page{
  min-height:100vh;
  background:
    radial-gradient(circle at 78% 34%, rgba(242,82,0,.13), transparent 28%),
    radial-gradient(circle at 18% 72%, rgba(31,56,99,.42), transparent 36%),
    linear-gradient(180deg,#071A2E,#0A223A,#071A2E);
  color:var(--white);
  overflow:hidden;
}

/* =====================================================
   HERO
===================================================== */

.coming-soon-hero{
  position:relative;
  min-height:100vh;
  display:flex;
  align-items:center;
  padding:150px 0 90px;
  overflow:hidden;
}

.coming-grid-bg{
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
  background-size:90px 90px;
  mask-image:linear-gradient(to bottom, black 20%, transparent 100%);
  pointer-events:none;
}

.coming-glow{
  position:absolute;
  width:780px;
  height:780px;
  right:-260px;
  top:45%;
  transform:translateY(-50%);
  border-radius:50%;
  background:radial-gradient(circle, rgba(242,82,0,.16), rgba(31,56,99,.3), transparent 70%);
  filter:blur(85px);
}

.coming-container{
  position:relative;
  z-index:3;
  display:grid;
  grid-template-columns:1fr .9fr;
  gap:78px;
  align-items:center;
}

/* LEFT */

.coming-copy{
  max-width:760px;
}

.coming-copy h1{
  max-width:780px;
  margin-bottom:26px;
  font-size:clamp(3.1rem,5.7vw,6.6rem);
  line-height:.98;
  letter-spacing:-2px;
}

.coming-copy p{
  max-width:660px;
  color:var(--textLight);
  font-size:1.08rem;
  line-height:1.8;
}

.coming-actions{
  margin-top:38px;
  display:flex;
  flex-wrap:wrap;
  gap:16px;
}

.coming-note{
  margin-top:32px;
  display:flex;
  flex-wrap:wrap;
  gap:12px;
}

.coming-note span{
  padding:10px 14px;
  border-radius:999px;
  background:rgba(255,255,255,.055);
  border:1px solid rgba(255,255,255,.08);
  color:var(--textLight);
  font-size:.88rem;
}

/* RIGHT CARD */

.coming-status-card{
  position:relative;
  min-height:520px;
  padding:38px;
  border-radius:40px;
  overflow:hidden;
  background:
    radial-gradient(circle at 70% 48%, rgba(242,82,0,.16), transparent 25%),
    radial-gradient(circle at 30% 70%, rgba(31,56,99,.38), transparent 36%),
    linear-gradient(180deg, rgba(255,255,255,.085), rgba(255,255,255,.035));
  border:1px solid rgba(242,82,0,.26);
  box-shadow:0 42px 110px rgba(0,0,0,.34);
  backdrop-filter:blur(18px);
}

.coming-status-card::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size:58px 58px;
  mask-image:radial-gradient(circle, black 25%, transparent 76%);
  pointer-events:none;
}

.coming-status-top{
  position:relative;
  z-index:2;
}

.coming-status-top span{
  display:block;
  margin-bottom:18px;
  color:var(--accent);
  font-size:.74rem;
  font-weight:700;
  letter-spacing:3px;
  text-transform:uppercase;
}

.coming-status-top h3{
  max-width:500px;
  margin-bottom:16px;
  font-size:clamp(1.8rem,2.7vw,3rem);
  line-height:1.08;
  letter-spacing:-1px;
}

.coming-status-top p{
  max-width:460px;
  margin:0;
  color:var(--textLight);
  font-size:.96rem;
  line-height:1.68;
}

/* ORBIT VISUAL */

.coming-orbit{
  position:relative;
  z-index:2;
  height:250px;
  margin:34px 0;
  display:flex;
  align-items:center;
  justify-content:center;
}

.orbit-ring{
  position:absolute;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.08);
}

.ring-1{
  width:130px;
  height:130px;
  border-color:rgba(242,82,0,.34);
  box-shadow:0 0 42px rgba(242,82,0,.14);
}

.ring-2{
  width:220px;
  height:220px;
  border-color:rgba(255,255,255,.08);
}

.ring-3{
  width:310px;
  height:310px;
  border-color:rgba(31,56,99,.58);
}

.orbit-core{
  position:relative;
  z-index:3;
  width:92px;
  height:92px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:
    radial-gradient(circle, rgba(242,82,0,.28), rgba(31,56,99,.28));
  border:1px solid rgba(242,82,0,.5);
  box-shadow:
    0 0 55px rgba(242,82,0,.22),
    inset 0 0 28px rgba(255,255,255,.04);
}

.orbit-core span{
  color:var(--white);
  font-size:.72rem;
  font-weight:700;
  letter-spacing:2px;
}

.orbit-dot{
  position:absolute;
  width:12px;
  height:12px;
  border-radius:50%;
  background:var(--accent);
  box-shadow:0 0 22px rgba(242,82,0,.65);
}

.dot-1{
  top:50%;
  left:calc(50% + 105px);
}

.dot-2{
  top:calc(50% - 94px);
  left:50%;
}

.dot-3{
  top:calc(50% + 118px);
  left:calc(50% - 118px);
}

/* STATUS LIST */

.coming-status-list{
  position:relative;
  z-index:2;
  display:grid;
  gap:12px;
}

.coming-status-list div{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:16px 18px;
  border-radius:18px;
  background:rgba(255,255,255,.055);
  border:1px solid rgba(255,255,255,.08);
}

.coming-status-list span{
  color:var(--white);
  font-size:.94rem;
  font-weight:600;
}

.coming-status-list small{
  color:var(--accent);
  font-size:.72rem;
  font-weight:700;
  letter-spacing:2px;
  text-transform:uppercase;
}

/* WATERMARK */

.coming-watermark{
  position:absolute;
  left:0;
  right:0;
  bottom:34px;
  z-index:1;
  text-align:center;
  pointer-events:none;
  overflow:hidden;
  padding:0 24px;
}

.coming-watermark span{
  display:block;
  color:transparent;
  -webkit-text-stroke:1px rgba(255,255,255,.06);
  font-size:clamp(1.4rem,6vw,6.6rem);
  font-weight:700;
  letter-spacing:clamp(3px,.8vw,10px);
  line-height:1;
  white-space:nowrap;
}

/* =====================================================
   RESPONSIVE
===================================================== */

@media(max-width:1100px){

  .coming-container{
    grid-template-columns:1fr;
    gap:60px;
  }

  .coming-copy{
    max-width:820px;
  }

  .coming-status-card{
    max-width:720px;
  }
}

@media(max-width:700px){

  .coming-soon-hero{
    min-height:auto;
    padding:135px 0 80px;
  }

  .coming-copy h1{
    font-size:clamp(2.7rem,14vw,4.6rem);
    letter-spacing:-1px;
  }

  .coming-copy p{
    font-size:1rem;
  }

  .coming-status-card{
    min-height:auto;
    padding:30px 24px;
    border-radius:32px;
  }

  .coming-orbit{
    height:210px;
  }

  .ring-3{
    width:250px;
    height:250px;
  }

  .ring-2{
    width:185px;
    height:185px;
  }

  .dot-1,
  .dot-2,
  .dot-3{
    display:none;
  }

  .coming-status-list div{
    flex-direction:column;
    align-items:flex-start;
    gap:8px;
  }
}