:root {
  --bg: #0a0a0f;
  --bg2: #0f0f1a;
  --panel: #13131f;
  --cyan: #00f0ff;
  --magenta: #ff2d78;
  --yellow: #ffe600;
  --white: #f0f0f8;
  --muted: #6a6a88;
  --border: rgba(0,240,255,.12);
}

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  background: var(--bg);
  color: var(--white);
  font-family: 'Rajdhani', sans-serif;
  font-size: 16px;
  line-height: 1.7;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

  /* ────────── SCANLINES OVERLAY ────────── */
  body::after {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 9998;
    background: repeating-linear-gradient( to bottom, transparent 0px, transparent 3px, rgba(0,0,0,.08) 3px, rgba(0,0,0,.08) 4px );
  }

/* ────────── HELPERS ────────── */
.ff-bebas {
  font-family: 'Bebas Neue', cursive;
}

.ff-jp {
  font-family: 'Noto Sans JP', sans-serif;
}

.text-cyan {
  color: var(--cyan);
}

.text-mag {
  color: var(--magenta);
}

.text-yel {
  color: var(--yellow);
}

/* ────────── FOOTER ────────── */
footer {
  background: #06060d;
  border-top: 1px solid var(--border);
  padding: 56px 0 28px;
}

.foot-logo {
  font-family: 'Bebas Neue', cursive;
  font-size: 1.5rem;
  letter-spacing: .08em;
  color: var(--white);
}

  .foot-logo span {
    color: var(--cyan);
  }

.foot-desc {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 300;
  font-size: .82rem;
  color: var(--muted);
  line-height: 1.8;
  max-width: 260px;
  margin-top: .6rem;
}

.foot-col h5 {
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 1rem;
}

.foot-col ul {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .55rem;
}

  .foot-col ul a {
    font-size: .84rem;
    color: var(--muted);
    text-decoration: none;
    transition: color .2s;
  }

    .foot-col ul a:hover {
      color: var(--cyan);
    }

.foot-bottom {
  border-top: 1px solid var(--border);
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: .68rem;
  letter-spacing: .08em;
  color: var(--muted);
  flex-wrap: wrap;
  gap: .5rem;
}

  .foot-bottom .heart {
    color: var(--magenta);
  }