/* Basic, responsive coming-soon page */
:root{
  --bg:#f6f7fb;
  --fg:#0e0f13;
  --muted:#6b7280;
  --accent:#0b3b7e;
}
@media (prefers-color-scheme: dark){
  :root{ --bg:#0e0f13; --fg:#e5e7eb; --muted:#9ca3af; --accent:#8ab4ff; }
}
*{ box-sizing:border-box }
html,body{ height:100% }
body{
  margin:0;
  font-family: system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif;
  line-height:1.6;
  background:var(--bg);
  color:var(--fg);
}
.wrap{
  min-height:100%;
  display:grid;
  grid-template-rows:auto 1fr auto;
  place-items:center;
  padding:2rem 1rem;
}
.brand h1{
  letter-spacing:0.1em;
  font-weight:800;
  margin:0 0 1rem;
  font-size:clamp(2rem, 4vw, 3rem);
}
.lumi{ color:var(--accent) }
.tip{ color:transparent; -webkit-text-stroke:1px var(--fg); text-stroke:1px var(--fg) }
.hero{
  margin:0;
  max-width: min(680px, 90vw);
}
.hero img{
  width:100%;
  height:auto;
  display:block;
  filter: drop-shadow(0 12px 30px rgba(0,0,0,.15));
  border-radius:12px;
  background:transparent;
}
.content{
  text-align:center;
  margin-top:1rem;
}
.content h2{ margin:.5rem 0 0; font-size:clamp(1.25rem,2.5vw,1.75rem) }
.content p{ color:var(--muted); margin:.5rem auto 1rem; max-width:50ch }
a{ color:var(--accent); text-decoration:none }
a:hover{ text-decoration:underline }
.btn{
  display:inline-block;
  padding:.75rem 1rem;
  border:1px solid var(--accent);
  border-radius:8px;
  text-decoration:none;
  font-weight:600;
}
.notify{
  display:flex;
  gap:.5rem;
  justify-content:center;
  margin-top:1rem;
}
.notify input{
  padding:.7rem .9rem;
  border-radius:8px;
  border:1px solid #d1d5db;
  min-width:260px;
  background:transparent;
  color:inherit;
}
.notify button{
  padding:.7rem 1rem;
  border-radius:8px;
  border:1px solid var(--accent);
  background:transparent;
  color:inherit;
  font-weight:600;
}
.foot{ margin-top:1.5rem; color:var(--muted) }