:root {
  --bg: #07030f; --bg2: #120826;
  --pink: #ff2fa8; --pink-soft: #ff8fd0; --blue: #3a7bff; --purple: #9b4dff;
  --gold: #ffd36b; --text: #fff4fb;
  --font-script: 'Yellowtail', 'Noto Sans JP', cursive;
  --font-head: 'Unbounded', 'Zen Kaku Gothic New', sans-serif;
  --font-body: 'Zen Kaku Gothic New', system-ui, sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 4rem; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font-family: var(--font-body); line-height: 1.7; overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }

.btn {
  display: inline-block; padding: .85em 1.8em; border-radius: 999px; text-decoration: none;
  font-weight: 900; color: #fff; background: linear-gradient(135deg, var(--pink), var(--purple));
  box-shadow: 0 0 20px rgba(255,47,168,.65); border: 0; cursor: pointer; font-size: 1rem; letter-spacing: .04em;
  transition: transform .2s, box-shadow .2s;
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 0 34px rgba(255,47,168,.95); }
.btn:focus-visible, a:focus-visible, button:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }

.neon-title, .soon-tag {
  font-family: var(--font-head); font-weight: 900; color: #fff; letter-spacing: .04em;
  text-shadow: 0 0 6px #fff, 0 0 16px var(--blue), 0 0 40px var(--blue), 0 0 80px var(--blue);
}
.soon-tag { font-size: 1.3rem; letter-spacing: .3em; text-shadow: 0 0 6px #fff, 0 0 16px var(--pink), 0 0 40px var(--pink); }

.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: .55rem 1rem; background: linear-gradient(180deg, rgba(7,3,15,.85), rgba(7,3,15,0));
}
.site-header .logo {
  font-family: var(--font-script); font-size: 2rem; line-height: 1; text-decoration: none; color: #fff;
  text-shadow: 0 0 4px #fff, 0 0 14px var(--pink), 0 0 30px var(--pink);
}
#menu-toggle {
  background: rgba(7,3,15,.5); border: 1px solid var(--pink); color: #fff; border-radius: 999px;
  padding: .4rem 1rem; font-family: var(--font-head); font-weight: 800; letter-spacing: .18em; font-size: .72rem; cursor: pointer;
}
#site-nav { display: none; position: absolute; top: 100%; left: 0; right: 0; background: rgba(7,3,15,.97); padding: .5rem 1rem 1rem; }
#site-nav.is-open { display: block; }
#site-nav a[aria-current] { color: var(--pink-soft); text-shadow: 0 0 12px var(--pink); }
#site-nav a { display: block; padding: .8rem 0; text-decoration: none; font-family: var(--font-head); font-weight: 800; font-size: 1rem; letter-spacing: .16em; border-bottom: 1px solid rgba(255,255,255,.1); }
@media (min-width: 768px) {
  .site-header { padding: .8rem 2rem; }
  #menu-toggle { display: none; }
  #site-nav { display: flex !important; position: static; background: none; padding: 0; gap: 2rem; }
  #site-nav a { border: 0; padding: 0; font-size: .85rem; opacity: .85; transition: opacity .2s, text-shadow .2s; }
  #site-nav a:hover { opacity: 1; text-shadow: 0 0 12px var(--pink); }
}

.site-footer { padding: 3rem 1rem 3.5rem; text-align: center; background: #040109; border-top: 1px solid rgba(255,47,168,.35); font-size: .9rem; }
.site-footer .logo { font-family: var(--font-script); font-size: 3rem; line-height: 1.2; text-shadow: 0 0 14px var(--pink), 0 0 34px var(--pink); }
.site-footer .warn { color: var(--gold); margin-top: 1rem; font-weight: 700; }
#sns[hidden] { display: none; }
#sns { display: flex; gap: 1rem; justify-content: center; margin-top: .8rem; }

.reveal { transition: opacity .9s, transform .9s cubic-bezier(.2, .7, .2, 1); }
.js .reveal { opacity: 0; transform: translateY(36px); }
.js .reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal, .js .reveal { transition: none; opacity: 1; transform: none; }
}