html, body { background: var(--bg); }

body {
  font-family: var(--font-sans);
  background-color: var(--bg);
  color: var(--ink);
  min-height: 100dvh;
  position: relative;
  overflow-x: hidden;

  /* Ambient glow monokrom bertekstur — beberapa lapis radial putih/abu
     dengan opacity & ukuran berbeda supaya terasa "liquid glass", bukan flat */
  background-image:
    radial-gradient(circle at 18% 12%, rgba(255,255,255,0.10) 0%, transparent 42%),
    radial-gradient(circle at 84% 10%, rgba(255,255,255,0.07) 0%, transparent 40%),
    radial-gradient(circle at 22% 92%, rgba(255,255,255,0.09) 0%, transparent 45%),
    radial-gradient(circle at 92% 88%, rgba(255,255,255,0.05) 0%, transparent 40%),
    radial-gradient(circle at 50% 50%, rgba(255,255,255,0.03) 0%, transparent 60%),
    linear-gradient(180deg, #050506 0%, #0A0A0C 50%, #050506 100%);
  background-attachment: fixed;
}

/* Grain / noise tipis di atas semuanya supaya permukaan hitam-putih tidak
   terasa polos — tekstur khas liquid glass premium */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.035;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* Canvas 3D liquid mesh — fixed di belakang semua konten.
   pointer-events: none supaya form/tombol tetap bisa diklik;
   gerak mouse tetap terbaca lewat listener di window (liquid-mesh.js). */
#liquid-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

::selection {
  background: var(--accent);
  color: #fff;
}

:focus-visible {
  outline: 2px solid var(--accent-2);
  outline-offset: 2px;
}