:root {
  --black: #0a0a0a;
  --black-soft: #161412;
  --gold: #d4af37;
  --gold-light: #f5e7a8;
  --gold-dark: #8a6a1c;
  --cream: #f8f3e7;
  --maroon: #3a1418;
}

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

html, body {
  min-height: 100%;
}

body {
  font-family: 'Poppins', sans-serif;
  background: var(--black);
  color: var(--cream);
  position: relative;
  overflow-x: hidden;
}

/* ---------- Layered background ---------- */

.collage-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(4, 1fr);
  gap: 3px;
}

.tile {
  background-size: 200% 200%;
}

.tile:nth-child(1)  { background: radial-gradient(circle at 30% 30%, #3a2e12, #0a0a0a 70%); }
.tile:nth-child(2)  { background: linear-gradient(135deg, #2a1d08, #0a0a0a); }
.tile:nth-child(3)  { background: radial-gradient(circle at 70% 40%, #4a2a14, #0a0a0a 70%); }
.tile:nth-child(4)  { background: linear-gradient(225deg, var(--maroon), #0a0a0a); }
.tile:nth-child(5)  { background: radial-gradient(circle at 50% 60%, #5c4112, #0a0a0a 75%); }
.tile:nth-child(6)  { background: linear-gradient(45deg, #221a0c, #0a0a0a); }
.tile:nth-child(7)  { background: radial-gradient(circle at 40% 50%, #3a1418, #0a0a0a 70%); }
.tile:nth-child(8)  { background: linear-gradient(160deg, #2e2208, #0a0a0a); }
.tile:nth-child(9)  { background: radial-gradient(circle at 60% 30%, #4a3410, #0a0a0a 70%); }
.tile:nth-child(10) { background: linear-gradient(300deg, var(--maroon), #0a0a0a); }
.tile:nth-child(11) { background: radial-gradient(circle at 35% 65%, #3a2e12, #0a0a0a 70%); }
.tile:nth-child(12) { background: linear-gradient(110deg, #221a0c, #0a0a0a); }
.tile:nth-child(13) { background: radial-gradient(circle at 55% 45%, #5c4112, #0a0a0a 75%); }
.tile:nth-child(14) { background: linear-gradient(250deg, #2a1d08, #0a0a0a); }
.tile:nth-child(15) { background: radial-gradient(circle at 45% 55%, #4a2a14, #0a0a0a 70%); }
.tile:nth-child(16) { background: linear-gradient(200deg, var(--maroon), #0a0a0a); }
.tile:nth-child(17) { background: radial-gradient(circle at 65% 35%, #3a2e12, #0a0a0a 70%); }
.tile:nth-child(18) { background: linear-gradient(70deg, #221a0c, #0a0a0a); }
.tile:nth-child(19) { background: radial-gradient(circle at 50% 50%, #5c4112, #0a0a0a 75%); }
.tile:nth-child(20) { background: linear-gradient(320deg, #2e2208, #0a0a0a); }
.tile:nth-child(21) { background: radial-gradient(circle at 30% 70%, #4a3410, #0a0a0a 70%); }
.tile:nth-child(22) { background: linear-gradient(140deg, var(--maroon), #0a0a0a); }
.tile:nth-child(23) { background: radial-gradient(circle at 60% 40%, #3a2e12, #0a0a0a 70%); }
.tile:nth-child(24) { background: linear-gradient(20deg, #2a1d08, #0a0a0a); }

.braid-pattern {
  position: fixed;
  inset: 0;
  z-index: 1;
  background-image: url('pattern.svg');
  background-repeat: repeat;
  background-size: 240px 120px;
  mix-blend-mode: soft-light;
  opacity: 0.8;
}

.overlay {
  position: fixed;
  inset: 0;
  z-index: 2;
  background: radial-gradient(circle at 50% 40%, rgba(10,10,10,0.55), rgba(8,8,8,0.88) 75%);
}

/* ---------- Floating butterflies ---------- */

.butterfly {
  position: fixed;
  z-index: 3;
  width: 22px;
  opacity: 0.55;
  filter: drop-shadow(0 0 6px rgba(212,175,55,0.5));
  animation: drift 16s ease-in-out infinite;
}

.butterfly.b1 { top: 70%; left: 12%; animation-delay: 0s; }
.butterfly.b2 { top: 20%; left: 85%; animation-delay: 3s; width: 16px; }
.butterfly.b3 { top: 80%; left: 80%; animation-delay: 6s; width: 18px; }

@keyframes drift {
  0%   { transform: translate(0, 0) rotate(0deg); }
  50%  { transform: translate(-20px, -40px) rotate(8deg); }
  100% { transform: translate(0, 0) rotate(0deg); }
}

/* ---------- Hero content ---------- */

.hero {
  position: relative;
  z-index: 4;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 6vh 1.5rem 8vh;
  animation: fadeUp 1.1s ease-out;
}

.logo-wrap {
  width: clamp(150px, 26vw, 230px);
  aspect-ratio: 1;
  margin-bottom: 1.75rem;
}

.logo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  filter: drop-shadow(0 0 35px rgba(212,175,55,0.35));
}

.eyebrow {
  font-family: 'Cormorant Garamond', serif;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  font-size: 0.85rem;
  color: var(--gold-light);
  margin-bottom: 0.6rem;
}

h1 {
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  font-size: clamp(2.2rem, 6vw, 3.6rem);
  background: linear-gradient(90deg, var(--gold-dark), var(--gold-light), var(--gold));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin-bottom: 0.6rem;
}

.tagline {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: clamp(1.05rem, 2.4vw, 1.4rem);
  color: var(--cream);
  margin-bottom: 1.6rem;
}

.message {
  max-width: 560px;
  font-weight: 300;
  font-size: clamp(0.95rem, 1.6vw, 1.05rem);
  line-height: 1.7;
  color: rgba(248, 243, 231, 0.82);
  margin-bottom: 2.25rem;
}

.cta {
  display: inline-block;
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  font-size: 0.95rem;
  color: var(--black);
  background: linear-gradient(135deg, var(--gold-light), var(--gold) 60%, var(--gold-dark));
  padding: 1rem 2.6rem;
  border-radius: 50px;
  box-shadow: 0 8px 24px rgba(212, 175, 55, 0.25);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.cta:hover,
.cta:focus-visible {
  transform: translateY(-3px);
  box-shadow: 0 12px 30px rgba(212, 175, 55, 0.4);
}

.cta-note {
  margin-top: 0.9rem;
  font-size: 0.8rem;
  color: rgba(248, 243, 231, 0.55);
  letter-spacing: 0.03em;
}

.site-footer {
  position: relative;
  z-index: 4;
  text-align: center;
  padding: 1.5rem 1rem 2rem;
  font-size: 0.78rem;
  color: rgba(248, 243, 231, 0.45);
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .hero { animation: none; }
  .butterfly { animation: none; }
}

@media (max-width: 480px) {
  .collage-bg { grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(6, 1fr); }
  .hero { padding: 5vh 1.25rem 6vh; }
  .cta {
    padding: 0.85rem 1.6rem;
    font-size: 0.82rem;
    letter-spacing: 0.04em;
    white-space: nowrap;
  }
}

@media (max-width: 340px) {
  .cta { padding: 0.8rem 1.1rem; font-size: 0.74rem; }
}