:root {
  color-scheme: dark;
  --gold-rgb: 201, 169, 106;
  --cream-rgb: 243, 233, 210;
  --forest-rgb: 14, 20, 16;
  --ease-premium: cubic-bezier(.22, 1, .36, 1);
}

html {
  scroll-behavior: smooth;
}

body {
  background:
    radial-gradient(circle at top left, rgba(201, 169, 106, 0.10), transparent 28%),
    radial-gradient(circle at 85% 12%, rgba(201, 169, 106, 0.08), transparent 20%),
    linear-gradient(180deg, #08100b 0%, #0e1410 24%, #0e1410 100%);
  color: #e8dfc9;
  font-family: "Inter", system-ui, sans-serif;
}

body::before,
body::after {
  content: "";
  position: fixed;
  width: 30rem;
  height: 30rem;
  border-radius: 999px;
  pointer-events: none;
  filter: blur(80px);
  opacity: 0.16;
  z-index: 0;
}

body::before {
  top: -10rem;
  left: -8rem;
  background: radial-gradient(circle, rgba(201, 169, 106, 0.52), transparent 68%);
}

body::after {
  right: -10rem;
  bottom: 10rem;
  background: radial-gradient(circle, rgba(67, 98, 78, 0.55), transparent 68%);
}

#scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 100%;
  transform-origin: left center;
  transform: scaleX(0);
  background: linear-gradient(90deg, #fff1bf 0%, #e3c887 26%, #c9a96a 58%, #8f6f35 100%);
  box-shadow: 0 0 24px rgba(201, 169, 106, 0.85);
  z-index: 120;
}

.gold-text {
  background: linear-gradient(135deg, #e3c887 0%, #c9a96a 50%, #9b7e44 100%);
  background-size: 200% 200%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 8px 30px rgba(201, 169, 106, 0.18);
}

.glass {
  background: rgba(20, 28, 23, 0.55);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(201, 169, 106, 0.18);
  box-shadow:
    0 26px 90px -38px rgba(0, 0, 0, 0.82),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.frame-gold {
  border: 1px solid rgba(201, 169, 106, 0.35);
  background: rgba(201, 169, 106, 0.05);
}

.glass,
.frame-gold,
.premium-card,
.premium-button {
  position: relative;
  overflow: hidden;
}

.glass::before,
.frame-gold::before,
.premium-card::before,
.premium-button::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.glass::before,
.frame-gold::before,
.premium-card::before {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.10), transparent 24%, transparent 72%, rgba(201, 169, 106, 0.08)),
    radial-gradient(circle at top left, rgba(255, 255, 255, 0.12), transparent 38%);
}

.hover-lift,
.premium-card {
  transition:
    transform 0.8s var(--ease-premium),
    box-shadow 0.8s var(--ease-premium),
    border-color 0.6s var(--ease-premium),
    background 0.6s var(--ease-premium);
  will-change: transform;
}

.hover-lift:hover,
.premium-card:hover {
  transform: translateY(-10px) scale(1.01);
  box-shadow:
    0 32px 85px -34px rgba(0, 0, 0, 0.85),
    0 0 0 1px rgba(201, 169, 106, 0.20);
}

.premium-button {
  isolation: isolate;
  box-shadow:
    0 24px 55px -24px rgba(201, 169, 106, 0.52),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
  transition:
    transform 0.5s var(--ease-premium),
    box-shadow 0.5s var(--ease-premium),
    filter 0.5s var(--ease-premium);
}

.premium-button::before {
  inset: -1px;
  background: linear-gradient(115deg, transparent 20%, rgba(255, 255, 255, 0.35) 48%, transparent 72%);
  transform: translateX(-135%) skewX(-20deg);
  transition: transform 0.95s var(--ease-premium);
  z-index: -1;
}

.premium-button:hover {
  transform: translateY(-6px) scale(1.01);
  filter: saturate(1.08) brightness(1.05);
}

.premium-button:hover::before {
  transform: translateX(135%) skewX(-20deg);
}

.premium-input {
  transition:
    border-color 0.35s ease,
    box-shadow 0.35s ease,
    background 0.35s ease,
    transform 0.35s ease;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.premium-input:focus {
  background: rgba(255, 255, 255, 0.06);
  transform: translateY(-2px);
  box-shadow: 0 0 0 4px rgba(201, 169, 106, 0.08), 0 18px 40px -24px rgba(201, 169, 106, 0.45);
}

.nav-link {
  position: relative;
}

.nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -0.45rem;
  height: 1px;
  width: 100%;
  transform: scaleX(0);
  transform-origin: right center;
  background: linear-gradient(90deg, transparent, rgba(201, 169, 106, 0.9), transparent);
  transition: none;
}

.nav-link:hover::after {
  transform: scaleX(0);
}

.nav-link.active::after {
  transform: scaleX(1);
  transform-origin: left center;
}

.section-shell {
  position: relative;
  isolation: isolate;
}

.section-shell::before {
  content: "";
  position: absolute;
  inset: auto 8% 0 8%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(201, 169, 106, 0.14), transparent);
  pointer-events: none;
}

.section-pad {
  padding-top: 7rem;
  padding-bottom: 7rem;
}

.wood-texture {
  background-image:
    radial-gradient(ellipse at top, rgba(201, 169, 106, 0.08), transparent 60%),
    linear-gradient(180deg, #0e1410, #141c17);
}

.page-hero {
  min-height: 100vh;
  min-height: 100dvh;
  overflow: hidden;
}

.page-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0.20) 35%, rgba(0, 0, 0, 0.55) 100%),
    radial-gradient(circle at center, transparent 48%, rgba(0, 0, 0, 0.40) 100%);
}

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

.page-hero-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(1.05) contrast(1.08) brightness(0.74);
}

.reveal {
  opacity: 0;
  transform: translate3d(0, 42px, 0) scale(0.98);
  transition:
    opacity 0.95s ease,
    transform 1.05s var(--ease-premium),
    filter 1s ease;
  filter: blur(8px);
}

.reveal.visible {
  opacity: 1;
  filter: blur(0);
  transform: none;
}

.progressive-image {
  opacity: 0;
  filter: blur(8px);
  transition: opacity 0.65s ease, filter 0.65s ease;
}

.progressive-image.image-ready {
  opacity: 1;
  filter: blur(0);
}

header,
section,
footer {
  position: relative;
  z-index: 1;
}

.footer-link {
  color: rgba(243, 233, 210, 0.65);
  transition: color 0.25s ease;
}

.footer-link:hover {
  color: #c9a96a;
}

@media (max-width: 767px) {
  .section-pad {
    padding-top: 5rem;
    padding-bottom: 5rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }

  .reveal {
    opacity: 1;
    filter: none;
    transform: none;
  }
}