:root {
  --void: #05010c;
  --midnight: #120326;
  --purple: #2a0755;
  --violet: #6f2cff;
  --hot-pink: #ff2bd6;
  --cyan: #23e8ff;
  --lavender: #d9c2ff;
  --cream: #fff6ff;
  --muted: #bba6d8;
  --line: rgba(217, 194, 255, 0.22);
}
* { box-sizing: border-box; }
html, body { min-height: 100%; }
body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  color: var(--cream);
  background:
    radial-gradient(circle at 50% -10%, rgba(255,43,214,0.32), transparent 28rem),
    radial-gradient(circle at 82% 18%, rgba(35,232,255,0.20), transparent 25rem),
    radial-gradient(circle at 12% 78%, rgba(111,44,255,0.34), transparent 28rem),
    linear-gradient(145deg, #05010c 0%, #130329 44%, #05010c 100%);
  overflow-x: hidden;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px);
  background-size: 54px 54px;
  transform: perspective(520px) rotateX(58deg) translateY(10vh) scale(1.7);
  transform-origin: center bottom;
  opacity: 0.36;
  mask-image: linear-gradient(to top, black 0%, transparent 72%);
}
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(255,255,255,0.035) 0 1px, transparent 1px 5px);
  mix-blend-mode: screen;
  opacity: 0.18;
}
.coming-soon {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 28px;
}
.panel {
  position: relative;
  width: min(840px, 100%);
  text-align: center;
  padding: clamp(30px, 6vw, 66px) clamp(22px, 5vw, 58px);
  border: 1px solid var(--line);
  border-radius: 34px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.035)),
    linear-gradient(145deg, rgba(42,7,85,0.82), rgba(8,2,22,0.88));
  box-shadow:
    0 0 0 1px rgba(255,43,214,0.14),
    0 0 45px rgba(255,43,214,0.18),
    0 0 80px rgba(35,232,255,0.10),
    0 30px 95px rgba(0,0,0,0.58),
    inset 0 1px 0 rgba(255,255,255,0.16);
  backdrop-filter: blur(18px);
  overflow: hidden;
}
.panel::before {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  padding: 2px;
  background: linear-gradient(135deg, var(--hot-pink), var(--cyan), var(--violet), var(--hot-pink));
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  opacity: 0.55;
  pointer-events: none;
}
.panel::after {
  content: "SEXCESS";
  position: absolute;
  left: 50%;
  bottom: -0.18em;
  transform: translateX(-50%);
  font: 900 clamp(4rem, 18vw, 11rem)/1 Impact, "Arial Black", Arial, sans-serif;
  letter-spacing: -0.06em;
  color: rgba(255,255,255,0.035);
  pointer-events: none;
}
.logo-shell {
  position: relative;
  width: min(560px, 92%);
  margin: 0 auto 10px;
  z-index: 1;
}
.logo-shell::before {
  content: "";
  position: absolute;
  inset: 14% 4% 8%;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(255,43,214,0.46), rgba(111,44,255,0.28) 42%, rgba(35,232,255,0.16) 58%, transparent 74%);
  filter: blur(26px);
}
.logo {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  filter:
    drop-shadow(0 0 12px rgba(255,43,214,0.42))
    drop-shadow(0 18px 26px rgba(0,0,0,0.58));
}
h1 {
  position: relative;
  z-index: 1;
  margin: 0;
  font-family: Impact, "Arial Black", Arial, sans-serif;
  font-size: clamp(3.3rem, 12vw, 7.8rem);
  line-height: 0.88;
  letter-spacing: -0.055em;
  text-transform: uppercase;
  color: var(--cream);
  text-shadow:
    3px 3px 0 #19003c,
    6px 6px 0 rgba(255,43,214,0.55),
    0 0 25px rgba(255,43,214,0.58),
    0 0 44px rgba(35,232,255,0.28);
}
@media (max-width: 560px) {
  .coming-soon { padding: 18px; }
  .panel { border-radius: 26px; }
  .logo-shell { width: min(430px, 100%); }
}