/* styles.css - Selli LLC (Logo only, larger, responsive) */
:root{
  --bg:#0b1020;
  --accent:#ffffff;
  --logo-size:320px; /* increased logo size */
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:'Poppins', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  background: radial-gradient(ellipse at 20% 10%, rgba(255,255,255,0.02), transparent 10%),
              linear-gradient(180deg, #071021 0%, var(--bg) 100%);
  color:#fff;
  overflow:hidden;
}

.stage{
  min-height:100vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  position:relative;
  text-align:center;
  padding:1.5rem;
}

/* Coming Soon text */
.coming-soon{
  font-size:clamp(1.8rem, 5vw, 3rem);
  font-weight:600;
  color:white;
  margin-bottom:2rem;
  text-shadow:0 0 20px rgba(255,255,255,0.6);
  animation: fadeGlow 4s ease-in-out infinite;
}

@keyframes fadeGlow{
  0%,100%{opacity:0.8; text-shadow:0 0 8px rgba(255,255,255,0.3);}
  50%{opacity:1; text-shadow:0 0 22px rgba(255,255,255,0.9);}
}

/* Logo - removed background circle */
.logo-wrap{
  width:clamp(200px, 50vw, var(--logo-size));
  height:auto;
  display:grid;
  place-items:center;
  z-index:2;
}

.logo{
  width:100%;
  height:auto;
  object-fit:contain;
}

/* Stars */
.stars{
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
}

.star{
  position:absolute;
  width:6px;
  height:6px;
  background:var(--accent);
  border-radius:50%;
  box-shadow:0 0 14px rgba(255,255,255,0.9);
  opacity:0.9;
  animation:twinkle 3s linear infinite;
}

.s1{left:50%;top:6%;animation-delay:0s}
.s2{left:82%;top:18%;animation-delay:.6s}
.s3{left:90%;top:50%;animation-delay:1.3s}
.s4{left:78%;top:78%;animation-delay:.2s}
.s5{left:50%;top:92%;animation-delay:1s}
.s6{left:22%;top:78%;animation-delay:.9s}
.s7{left:10%;top:50%;animation-delay:.3s}
.s8{left:18%;top:18%;animation-delay:1.6s}
.s9{left:62%;top:38%;animation-delay:0.4s}
.s10{left:38%;top:38%;animation-delay:1.1s}

@keyframes twinkle{
  0%{opacity:0;transform:scale(0.2)}
  40%{opacity:1;transform:scale(1.05)}
  100%{opacity:0.25;transform:scale(0.6)}
}

.stars{animation:orbit 22s linear infinite}
@keyframes orbit{
  0%{transform:rotate(0deg)}
  100%{transform:rotate(360deg)}
}

.sr-only{
  position:absolute !important;
  height:1px;width:1px;
  overflow:hidden;
  clip:rect(1px,1px,1px,1px);
  white-space:nowrap;
  border:0;padding:0;margin:-1px;
}

/* Responsive tweaks */
@media (max-width:600px){
  body{overflow:auto;}
  .stage{padding:3rem 1rem;}
  .logo-wrap{width:70vw;}
}