/* ── Design tokens ── */
:root {
  --gold:       #C9A84C;
  --gold-light: #E8C97A;
  --gold-pale:  #F5E9C8;
  --deep:       #0A0A0F;
  --dark:       #12121A;
  --mid:        #1E1E2E;
  --ocean:      #0D2B4E;
  --turq:       #1B8CA0;
  --turq-light: #4EC5D8;
  --white:      #FAF8F2;
  --muted:      #A09880;
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  background: var(--deep);
  color: var(--white);
  font-family: 'Cormorant Garamond', serif;
  overflow-x: hidden;
  min-height: 100vh;
}

.page { position: relative; z-index: 1; }

/* ── Background layers ── */
.bg-canvas {
  position: fixed; inset: 0; z-index: 0;
  background:
    radial-gradient(ellipse 80% 60% at 50% -10%, rgba(13,43,78,0.9) 0%, transparent 70%),
    radial-gradient(ellipse 60% 40% at 80% 110%, rgba(27,140,160,0.25) 0%, transparent 60%),
    radial-gradient(ellipse 50% 50% at 10% 90%, rgba(201,168,76,0.12) 0%, transparent 60%),
    var(--deep);
}

.wave-layer {
  position: fixed; bottom: 0; left: 0; right: 0;
  height: 45vh; opacity: 0.07; z-index: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320'%3E%3Cpath fill='%234EC5D8' d='M0,160L40,170.7C80,181,160,203,240,197.3C320,192,400,160,480,138.7C560,117,640,107,720,122.7C800,139,880,181,960,192C1040,203,1120,181,1200,160C1280,139,1360,117,1400,106.7L1440,96L1440,320L0,320Z'/%3E%3C/svg%3E") no-repeat bottom;
  background-size: cover;
  animation: waveShift 12s ease-in-out infinite alternate;
}

@keyframes waveShift {
  from { transform: translateX(0) scaleY(1); }
  to   { transform: translateX(-3%) scaleY(1.1); }
}

.stars {
  position: fixed; inset: 0; z-index: 0;
  background-image:
    radial-gradient(1px 1px at 15% 20%, rgba(201,168,76,0.6) 0%, transparent 100%),
    radial-gradient(1px 1px at 40% 10%, rgba(255,255,255,0.4) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 70% 30%, rgba(201,168,76,0.5) 0%, transparent 100%),
    radial-gradient(1px 1px at 85% 15%, rgba(255,255,255,0.3) 0%, transparent 100%),
    radial-gradient(1px 1px at 25% 60%, rgba(78,197,216,0.4) 0%, transparent 100%),
    radial-gradient(1px 1px at 55% 50%, rgba(255,255,255,0.3) 0%, transparent 100%),
    radial-gradient(1px 1px at 90% 70%, rgba(201,168,76,0.4) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 5% 80%, rgba(255,255,255,0.3) 0%, transparent 100%),
    radial-gradient(1px 1px at 60% 80%, rgba(78,197,216,0.3) 0%, transparent 100%);
}

/* ── Navigation ── */
nav {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.8rem 5vw;
  border-bottom: 1px solid rgba(201,168,76,0.15);
  backdrop-filter: blur(6px);
  background: rgba(10,10,15,0.4);
  position: sticky; top: 0; z-index: 100;
}

.nav-logo {
  font-family: 'Cinzel Decorative', serif;
  font-size: 1.1rem; font-weight: 700;
  letter-spacing: 0.08em; color: var(--gold);
  text-decoration: none;
}
.nav-logo span { color: var(--turq-light); }

.nav-back {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.62rem; font-weight: 600;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--muted); text-decoration: none;
  display: flex; align-items: center; gap: 0.4rem;
  transition: color 0.2s;
}
.nav-back:hover { color: var(--gold); }

/* ── Footer ── */
footer {
  border-top: 1px solid rgba(201,168,76,0.1);
  padding: 2rem 5vw;
  text-align: center;
}

/* ── Keyframes ── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ── Responsive ── */
@media (max-width: 600px) {
  nav { padding: 1.3rem 4vw; }
}