:root {
  --color-surface: #1a0610;
  --color-surface-deep: #0d0818;
  --color-velvet: #3a0f22;
  --color-text: #f4ede0;
  --color-text-muted: #e8c9a8;
  --color-gold: #e0c070;
  --color-gold-highlight: #f0dd9a;
  --color-surface-end: #140810;
  --color-tanzanite: #6b3fa0;
  --color-ruby: #7a2044;
  --color-whatsapp: #25d366;
  --color-whatsapp-text: #111b21;
  --color-whatsapp-hover: #1ebe5d;
  --font-display: "Cormorant Garamond", Palatino, "Palatino Linotype", "Book Antiqua", Georgia, serif;
  --font-body: "Source Sans 3", "Source Sans Pro", system-ui, -apple-system, "Segoe UI", sans-serif;
  --space-2: 0.5rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2rem;
  --space-6: 3rem;
  --radius-cta: 999px;
  --focus-ring-width: 2px;
  --focus-ring-offset: 4px;
  --content-max: 38rem;
  --cta-max: 22rem;
  --page-pad-x: 1.5rem;
  --page-pad-y: 2rem;
  --mark-size: 5.5rem;
}

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

html {
  color-scheme: dark;
}

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

body {
  min-height: 100dvh;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.6;
  color: var(--color-text);
  background-color: var(--color-surface-deep);
  background-image:
    radial-gradient(ellipse 90% 55% at 50% 0%, rgba(122, 32, 68, 0.55), transparent 58%),
    radial-gradient(ellipse 60% 45% at 100% 100%, rgba(61, 31, 107, 0.45), transparent 50%),
    radial-gradient(ellipse 50% 40% at 0% 80%, rgba(201, 162, 39, 0.12), transparent 45%),
    linear-gradient(180deg, var(--color-surface) 0%, var(--color-surface-deep) 55%, var(--color-surface-end) 100%);
}

.skip-link {
  position: absolute;
  left: var(--space-3);
  top: var(--space-3);
  z-index: 20;
  padding: var(--space-2) var(--space-3);
  background: var(--color-whatsapp);
  color: var(--color-whatsapp-text);
  font-weight: 600;
  text-decoration: none;
  border-radius: var(--radius-cta);
  clip-path: inset(100%);
  clip: rect(0 0 0 0);
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.skip-link:focus-visible {
  clip-path: none;
  clip: auto;
  width: auto;
  height: auto;
  overflow: visible;
}

.gem-yard {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.facet {
  position: absolute;
  width: var(--w, 2.75rem);
  height: calc(var(--w, 2.75rem) * 1.35);
  background: linear-gradient(145deg,
      var(--color-gold) 0%,
      var(--color-ruby) 42%,
      var(--color-tanzanite) 100%);
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  opacity: 0.28;
  filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.35));
  animation: assemble 11s ease-in-out infinite;
  animation-delay: var(--delay, 0s);
  left: var(--x);
  top: var(--y);
}

.facet:nth-child(odd) {
  background: linear-gradient(160deg,
      var(--color-gold-highlight) 0%,
      var(--color-gold-deep) 38%,
      var(--color-velvet) 100%);
}

.page {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100dvh;
  padding: var(--page-pad-y) var(--page-pad-x);
}

.jewel-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: var(--content-max);
  padding: var(--space-6) var(--space-4);
  text-align: center;
  background: linear-gradient(180deg,
      rgba(42, 10, 22, 0.72) 0%,
      rgba(13, 8, 24, 0.78) 100%);
  border: 1px solid rgba(224, 192, 112, 0.45);
  border-radius: 1.5rem;
  box-shadow:
    0 0 0 6px rgba(26, 6, 16, 0.55),
    0 0 0 7px rgba(224, 192, 112, 0.28),
    0 24px 64px rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(10px);
}

.mark {
  width: var(--mark-size);
  height: var(--mark-size);
  margin-bottom: var(--space-4);
}

.brand {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--color-gold);
}

.rule {
  width: 5.5rem;
  height: 1px;
  margin: var(--space-4) 0 var(--space-5);
  border: 0;
  background: linear-gradient(90deg,
      transparent,
      var(--color-gold),
      transparent);
}

.headline {
  margin: 0 0 var(--space-4);
  font-family: var(--font-display);
  font-size: clamp(2.35rem, 8vw, 3.65rem);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--color-text);
}

.lede {
  margin: 0 0 var(--space-5);
  max-width: 30rem;
  font-size: clamp(1.125rem, 2.4vw, 1.3rem);
  color: var(--color-text-muted);
}

.contact {
  margin: 0 0 var(--space-4);
  max-width: 28rem;
  color: var(--color-text);
}

.cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  min-height: 3.15rem;
  width: 100%;
  max-width: var(--cta-max);
  padding: 0.8rem 1.6rem;
  font-family: var(--font-body);
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.01em;
  text-decoration: none;
  color: var(--color-whatsapp-text);
  background: var(--color-whatsapp);
  border-radius: var(--radius-cta);
  box-shadow: 0 8px 24px rgba(37, 211, 102, 0.28);
}

.cta-icon {
  width: 1.45rem;
  height: 1.45rem;
  flex-shrink: 0;
}

.cta:hover,
.cta:focus-visible {
  background: var(--color-whatsapp-hover);
  color: var(--color-whatsapp-text);
}

.cta:focus-visible,
.skip-link:focus-visible {
  outline: var(--focus-ring-width) solid var(--color-gold);
  outline-offset: var(--focus-ring-offset);
}

.cta:active {
  transform: translateY(1px);
}

@keyframes assemble {

  0%,
  100% {
    transform: translate3d(0, 18px, 0) rotate(0deg) scale(0.86);
    opacity: 0.12;
  }

  40% {
    transform: translate3d(0, 0, 0) rotate(8deg) scale(1);
    opacity: 0.38;
  }

  70% {
    transform: translate3d(4px, -10px, 0) rotate(-4deg) scale(1.05);
    opacity: 0.3;
  }
}

@media (min-width: 768px) {
  :root {
    --page-pad-x: 2rem;
    --page-pad-y: 3rem;
    --mark-size: 6.5rem;
  }

  .jewel-card {
    padding: 3.5rem 3rem;
  }

  .cta {
    width: auto;
    min-width: 17rem;
  }
}

@media (min-width: 1024px) {
  :root {
    --page-pad-x: 3rem;
    --page-pad-y: 4rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .facet {
    animation: none;
    opacity: 0.22;
    transform: none;
  }

  .cta:active {
    transform: none;
  }
}