:root {
  --bg: #08070e;
  --pink: #ff2e88;
  --cyan: #22e4ff;
  --purple: #b14dff;
  --yellow: #ffe83d;
  --text: #ffffff;
  --muted: #c9c2e8;
  --glass: rgba(20, 14, 32, 0.72);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Heebo", "Segoe UI", Arial, sans-serif;
  line-height: 1.7;
  overflow-x: hidden;
}
a { color: var(--cyan); }

/* dark brick wall with coloured neon haze, like the booth screen */
.wall {
  position: fixed; inset: 0; z-index: -1;
  background:
    radial-gradient(60vmax 50vmax at 90% 5%, rgba(255, 46, 136, .20), transparent 60%),
    radial-gradient(60vmax 50vmax at 5% 95%, rgba(0, 180, 255, .18), transparent 60%),
    radial-gradient(40vmax 40vmax at 5% 5%, rgba(124, 58, 237, .18), transparent 60%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.035) 0 2px, transparent 2px 44px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.03) 0 2px, transparent 2px 132px),
    var(--bg);
}

.hero {
  min-height: 92vh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 48px 16px 32px;
}
.logo {
  width: min(640px, 88vw); height: auto;
  filter: drop-shadow(0 0 18px rgba(255, 46, 136, .55)) drop-shadow(0 0 42px rgba(34, 228, 255, .35));
  animation: flicker 9s infinite;
}
@keyframes flicker {
  0%, 18%, 22%, 62%, 64%, 100% { opacity: 1; }
  20%, 63% { opacity: .55; }
}
.eyebrow { color: var(--cyan); font-weight: 600; letter-spacing: .06em; margin: 18px 0 4px; }
.neon-title {
  font-size: clamp(2rem, 6vw, 3.6rem); line-height: 1.2; font-weight: 800; margin: 8px 0 16px;
  color: #fff;
  text-shadow: 0 0 6px #fff, 0 0 16px var(--pink), 0 0 32px var(--pink), 0 0 56px var(--purple);
}
.lead { max-width: 640px; color: var(--muted); font-size: 1.12rem; margin: 0 auto 28px; }
.cta { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }
.btn {
  display: inline-block; padding: 14px 30px; border-radius: 999px; text-decoration: none;
  font-weight: 600; color: #fff; background: rgba(12, 8, 20, .75);
  transition: transform .15s ease, box-shadow .2s ease;
}
.btn.primary {
  border: 3px solid var(--pink);
  box-shadow: 0 0 10px var(--pink), 0 0 24px rgba(255, 46, 136, .55), inset 0 0 12px rgba(255, 46, 136, .35);
}
.btn.ghost {
  border: 2px solid var(--cyan);
  box-shadow: 0 0 8px var(--cyan), inset 0 0 10px rgba(34, 228, 255, .25);
}
.btn:hover { transform: translateY(-2px); }
.area { margin-top: 18px; color: var(--muted); }

main { max-width: 1040px; margin: 0 auto; padding: 0 16px; }

.features {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; margin: 20px 0 72px;
}
.card {
  background: var(--glass); border-radius: 22px; padding: 22px 22px 18px;
  border: 2px solid var(--c); box-shadow: 0 0 10px var(--c), inset 0 0 14px color-mix(in srgb, var(--c) 30%, transparent);
}
.card h3 { margin: 0 0 6px; font-size: 1.3rem; color: #fff; text-shadow: 0 0 10px var(--c); }
.card p { margin: 0; color: var(--muted); }
.card.pink { --c: var(--pink); }
.card.cyan { --c: var(--cyan); }
.card.purple { --c: var(--purple); }
.card.yellow { --c: var(--yellow); }

.neon-sub {
  text-align: center; font-size: clamp(1.6rem, 4vw, 2.3rem); font-weight: 800; margin: 0 0 18px;
  text-shadow: 0 0 6px #fff, 0 0 18px var(--cyan), 0 0 36px var(--cyan);
}
.steps ol { list-style: none; padding: 0; max-width: 640px; margin: 0 auto 72px; }
.steps li {
  display: flex; align-items: center; gap: 16px; margin: 14px 0; padding: 14px 18px;
  background: var(--glass); border-radius: 16px; color: var(--muted);
}
.steps li span {
  flex: 0 0 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  font-weight: 800; color: #fff; border: 2px solid var(--pink); box-shadow: 0 0 10px var(--pink);
}

.contact { text-align: center; margin-bottom: 64px; }
.contact p { color: var(--muted); }
.contact-list { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.contact-list a {
  display: inline-block; padding: 10px 20px; border-radius: 999px; text-decoration: none; color: #fff;
  border: 2px solid var(--purple); box-shadow: 0 0 8px var(--purple); background: rgba(12, 8, 20, .7);
}

footer { text-align: center; padding: 28px 16px 40px; color: var(--muted); font-size: .95rem; }
footer a { color: var(--muted); }

/* privacy page */
.doc { max-width: 820px; margin: 0 auto; padding: 40px 16px 24px; }
.doc header { text-align: center; margin-bottom: 28px; }
.doc header img { width: min(320px, 70vw); height: auto; filter: drop-shadow(0 0 14px rgba(255, 46, 136, .5)); }
.doc h1 { text-shadow: 0 0 14px var(--pink); }
.doc h2 { color: var(--cyan); margin-top: 32px; font-size: 1.25rem; }
.doc p, .doc li { color: var(--muted); }
.doc .box { background: var(--glass); border-radius: 18px; padding: 8px 24px 20px; margin-bottom: 28px; }
.doc [dir="ltr"] { text-align: left; }

@media (prefers-reduced-motion: reduce) { .logo { animation: none; } html { scroll-behavior: auto; } }