/* RastyleXO — Coming Soon UI (Frontend Shell) */

:root{
  --rxo-bg: #0b0f14;
  --rxo-card: #0f151c;
  --rxo-ink: #e6f1ff;
  --rxo-muted: #9bb1c7;
  --rxo-accent: #50e3a4;
  --rxo-accent-2: #1db954; /* nod to Spotify green */
  --rxo-line: rgba(255,255,255,.08);
}

html,body{height:100%}
body.rxo-theme{
  background: radial-gradient(1200px 600px at 70% -10%, rgba(29,185,84,.12), transparent 60%),
              radial-gradient(1000px 500px at 10% 110%, rgba(80,227,164,.10), transparent 60%),
              var(--rxo-bg);
  color: var(--rxo-ink);
  font: 16px/1.6 system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
  margin:0;
}

.rxo-hero{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  overflow:hidden;
}

.rxo-hero__overlay{
  position:absolute; inset:0;
  background:
    radial-gradient(800px 400px at 80% 10%, rgba(255,255,255,.05), transparent 60%),
    linear-gradient(to bottom, rgba(0,0,0,.25), transparent 30%, transparent 70%, rgba(0,0,0,.3));
  pointer-events:none;
}

.rxo-hero__content{
  position:relative;
  max-width:960px;
  width:100%;
  padding: clamp(1.25rem, 3vw, 2rem);
  text-align:center;
}

.rxo-badge{
  display:inline-block;
  padding:.35rem .6rem;
  font-size:.75rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  border:1px solid var(--rxo-line);
  border-radius:999px;
  color:var(--rxo-muted);
  margin-bottom:1rem;
  backdrop-filter: blur(4px);
}

.rxo-title{
  font-size: clamp(2.2rem, 6vw, 4rem);
  line-height: 1.05;
  margin:.25rem 0 .5rem;
}

.rxo-subtitle{
  max-width:720px;
  margin:0 auto 1.25rem;
  color:var(--rxo-muted);
  font-size: clamp(1rem, 2.1vw, 1.125rem);
}

.rxo-cta{
  margin-top:1.25rem;
  display:flex;
  gap:.75rem;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
}

.rxo-btn{
  appearance:none;
  border:1px solid var(--rxo-line);
  background: rgba(255,255,255,.03);
  color: var(--rxo-ink);
  padding:.75rem 1rem;
  border-radius:12px;
  font-weight:600;
  text-decoration:none;
  transition: transform .15s ease, background .2s ease, border-color .2s ease;
}
.rxo-btn:hover{
  transform: translateY(-1px);
  border-color: rgba(255,255,255,.15);
  background: rgba(255,255,255,.06);
}
.rxo-btn--primary{
  background: linear-gradient(135deg, var(--rxo-accent-2), var(--rxo-accent));
  color:#05130b;
  border-color: transparent;
}
.rxo-btn--primary:hover{ filter: brightness(1.05); }

.rxo-metrics{
  margin:1.5rem auto 0;
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap:.75rem;
}
@media (max-width:720px){ .rxo-metrics{ grid-template-columns:1fr; } }

.rxo-metric{
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.015));
  border:1px solid var(--rxo-line);
  border-radius:14px;
  padding: .9rem 1rem;
  text-align:center;
}
.rxo-metric__num{ font-weight:800; font-size:1.05rem; }
.rxo-metric__label{ color:var(--rxo-muted); font-size:.9rem; }

.rxo-footer{
  position:absolute;
  left:0; right:0; bottom:0;
  padding: .9rem 1.25rem;
  display:flex; gap:.5rem; align-items:center; justify-content:center;
  color:var(--rxo-muted);
  border-top:1px solid var(--rxo-line);
  background: linear-gradient(180deg, transparent, rgba(0,0,0,.15));
  backdrop-filter: blur(6px);
}
.rxo-dot{ opacity:.6; }