:root {
  --gold: #C9A84C;
  --gold-light: #E8C97A;
  --black: #0a0a0a;
  --white: #f9f8f6;
  --gray: #6b7280;
  --light-bg: #f4f2ee;
}

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

html { min-height: 100%; }

body {
  overflow-x: hidden;
  font-family: 'DM Sans', sans-serif;
  min-height: 100vh;
  background: #0a0a0a;
}

/* 5.txt: infinite grid background */
#grid-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
}

.grid-layer {
  position: absolute;
  inset: -40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cpath d='M 40 0 L 0 0 0 40' fill='none' stroke='%23C9A84C' stroke-width='1' stroke-opacity='0.12'/%3E%3C/svg%3E");
  background-size: 40px 40px;
}

.grid-static {
  animation: gridScroll 10s linear infinite;
}

.grid-reveal {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cpath d='M 40 0 L 0 0 0 40' fill='none' stroke='%23C9A84C' stroke-width='1' stroke-opacity='0.75'/%3E%3C/svg%3E");
  -webkit-mask-image: radial-gradient(300px circle at -9999px -9999px, black, transparent);
  mask-image: radial-gradient(300px circle at -9999px -9999px, black, transparent);
}

.grid-orb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

.orb-gold-1 {
  width: 45%;
  height: 55%;
  top: -20%;
  right: -8%;
  background: rgba(201, 168, 76, 0.22);
  filter: blur(120px);
}

.orb-gold-2 {
  width: 28%;
  height: 30%;
  top: -5%;
  right: 18%;
  background: rgba(232, 201, 122, 0.14);
  filter: blur(100px);
}

.orb-white {
  width: 38%;
  height: 40%;
  bottom: -15%;
  left: -8%;
  background: rgba(255, 255, 255, 0.03);
  filter: blur(120px);
}

/* ── Loader ── */
#loader-overlay {
  position: absolute;
  inset: 0;
  background: #000;
  z-index: 1;
  will-change: clip-path;
}

#loader-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.tagline-row {
  display: flex;
  flex-direction: row;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 18px;
  letter-spacing: 6px;
  color: var(--gold-light);
}

.tagline-char {
  display: inline-block;
  opacity: 0;
  transform: translateY(10px);
}