html, body {
  margin: 0;
  padding: 0;
  background: #000;
  color: #fff;
  font-family: 'DM Sans', system-ui, -apple-system, sans-serif;
  overflow-x: hidden;
}

#bg-layers {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.bg-layer {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, var(--c1) 0%, var(--c2) 65%);
  -webkit-mask: radial-gradient(circle at center,
    black var(--p, 0%),
    transparent calc(var(--p, 0%) * 4.5));
  mask: radial-gradient(circle at center,
    black var(--p, 0%),
    transparent calc(var(--p, 0%) * 4.5));
  will-change: -webkit-mask, mask;
}

#hero {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

#hero canvas {
  display: block;
  mix-blend-mode: screen;
  pointer-events: none;
}

.scroll-cue {
  position: fixed;
  left: 50%;
  bottom: 4vh;
  width: clamp(40px, 4.5vw, 72px);
  height: clamp(40px, 4.5vw, 72px);
  color: #fff;
  opacity: 1.0;
  pointer-events: none;
  z-index: 5;
  mix-blend-mode: difference;
  animation: scroll-cue-bounce 1.8s ease-in-out infinite;
  transition: opacity 0.4s ease;
}

.scroll-cue.hidden {
  opacity: 0;
}

@keyframes scroll-cue-bounce {
  0%, 100% { transform: translate(-50%, 0); }
  50%     { transform: translate(-50%, 8px); }
}

.statement {
  position: relative;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6vh 8vw;
  z-index: 1;
}

.statement h2 {
  margin: 0;
  color: #fff;
  font-weight: 800;
  font-style: italic;
  font-size: clamp(2.25rem, 6.2vw, 6.5rem);
  line-height: 1.12;
  text-align: center;
  max-width: 22ch;
  letter-spacing: -0.01em;
}

.logo-mark {
  position: fixed;
  top: 3vh;
  left: 3vw;
  z-index: 10;
}

.logo-mark a {
  display: block;
  line-height: 0;
}

.logo-mark img {
  height: clamp(30px, 3.4vw, 56px);
  width: auto;
  display: block;
}

/* ── language visibility ── */
.lang-block { display: none; }
body.lang-en .lang-en,
body.lang-es .lang-es,
body.lang-fr .lang-fr,
body.lang-ja .lang-ja,
body.lang-ko .lang-ko { display: block; }

/* ── language toggle ── */
.lang-toggle {
  position: fixed;
  top: 3vh;
  right: 3vw;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: transparent;
  border: 1px solid #ffffff40;
  border-radius: 999px;
  padding: 0.35rem 0.9rem;
  z-index: 10;
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.lang-toggle span {
  opacity: 0.4;
  cursor: pointer;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  color: #fff;
  letter-spacing: 0.04em;
  transition: opacity 0.15s ease;
}

.lang-toggle span.active { opacity: 1; }
.lang-toggle span:hover { opacity: 0.75; }

.chrome-hidden {
  opacity: 0;
  transform: translateY(-10px);
  pointer-events: none;
}

/* ── manifesto (section 4) ── */
.manifesto {
  font-size: clamp(1.1rem, 2.8vw, 2.8rem);
  text-align: left;
  font-family: 'Montserrat', sans-serif;
  font-style: normal;
  font-weight: 700;
  max-width: 33ch;
  color: #fff;
}

.manifesto p { margin: 0 0 0.75em; }
.manifesto p:last-of-type { margin-bottom: 0; }

.manifesto .cta-link {
  display: inline-block;
  margin-top: 1em;
  color: #fff;
  font-size: inherit;
  text-decoration: underline wavy;
}

/* ── CJK overrides ── */
body.lang-ja .statement h2,
body.lang-ko .statement h2 {
  font-style: normal;
}

body.lang-ja .statement h2 { font-family: 'Noto Sans JP', sans-serif; }
body.lang-ko .statement h2 { font-family: 'Noto Sans KR', sans-serif; }
body.lang-ja .manifesto { font-family: 'Noto Sans JP', sans-serif; }
body.lang-ko .manifesto { font-family: 'Noto Sans KR', sans-serif; }