/* =============================================
   RESET & CSS VARIABLES
============================================= */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --black:     #000000;
  --white:     #ffffff;
  --gold:      #C9A96E;
  --gray-900:  #080808;
  --gray-800:  #101010;
  --gray-700:  #181818;
  --gray-600:  #242424;
  --gray-500:  #404040;
  --gray-400:  #606060;
  --gray-300:  #909090;
  --gray-200:  #c0c0c0;
  --serif:     'Cormorant Garamond', Georgia, serif;
  --sans:      'Inter', system-ui, -apple-system, sans-serif;
  --ease:      cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

html { scroll-behavior: smooth; font-size: 16px; overflow-x: hidden; }

body {
  background: var(--black);
  color: var(--white);
  font-family: var(--sans);
  font-weight: 300;
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; }
a   { text-decoration: none; color: inherit; }
button { cursor: pointer; }

/* =============================================
   TYPOGRAPHY SYSTEM
   H1 ≥ 3.5rem desktop / 2.5rem mobile
   H2 ≥ 2.5rem desktop / 2rem mobile
   H3 ≥ 1.5rem always
   p  ≥ 1.1rem, color #CCCCCC
============================================= */
h1, h2, h3 { font-family: var(--serif); }

h1 {
  font-size: clamp(2.5rem, 9vw, 8.5rem);
  font-weight: 300;
  line-height: 1.05;
  letter-spacing: -0.01em;
}
h2 {
  font-size: clamp(2rem, 5vw, 4rem);
  font-weight: 400;
  line-height: 1.08;
}
h3 {
  font-size: clamp(1.5rem, 2.5vw, 1.8rem);
  font-weight: 400;
  line-height: 1.25;
}
p {
  font-size: 1.1rem;
  color: #CCCCCC;
  line-height: 1.85;
}

@media (min-width: 1024px) {
  h1 { font-size: clamp(3.5rem, 9vw, 8.5rem); }
  h2 { font-size: clamp(2.5rem, 5vw, 4rem); }
}

/* =============================================
   BUTTONS
============================================= */
.btn {
  display: inline-block;
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  padding: 1.25rem 3.5rem;
  border: 1px solid;
  transition: background 0.35s, color 0.35s, border-color 0.35s, transform 0.3s;
  cursor: pointer;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); }

.btn-white {
  background: var(--white);
  color: var(--black);
  border-color: var(--white);
}
.btn-white:hover {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--black);
}

.btn-outline {
  background: transparent;
  color: var(--white);
  border-color: rgba(255,255,255,0.28);
}
.btn-outline:hover {
  border-color: var(--gold);
  color: var(--gold);
}

.btn-ghost {
  background: transparent;
  color: var(--gray-300);
  border-color: rgba(255,255,255,0.28);
}
.btn-ghost:hover {
  color: var(--gold);
  border-color: var(--gold);
}

.btn-wa {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  background: transparent;
  color: var(--white);
  border-color: rgba(255,255,255,0.2);
}
.btn-wa:hover {
  border-color: #25D366;
  color: #25D366;
}
.btn-wa svg { width: 1rem; height: 1rem; fill: currentColor; flex-shrink: 0; }

/* =============================================
   SECTION LAYOUT UTILS
============================================= */
.section { padding: 8rem 3rem; }
.container { max-width: 1240px; margin: 0 auto; }

.s-label {
  display: block;
  font-size: 0.9rem;
  font-weight: 400;
  letter-spacing: 0.45em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1.25rem;
}
.s-title {
  font-family: var(--serif);
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 400;
  line-height: 1.08;
  margin-bottom: 1.25rem;
}
.s-rule {
  width: 36px; height: 1px;
  background: var(--gold);
  margin-bottom: 2.5rem;
}

/* =============================================
   SHARED KEYFRAMES
============================================= */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes daggerFloat {
  0%   { opacity: 0.22; transform: translateY(0);    }
  45%  { opacity: 0.9;  transform: translateY(12px); }
  55%  { opacity: 0.9;  transform: translateY(12px); }
  100% { opacity: 0.22; transform: translateY(0);    }
}

/* =============================================
   SCROLL REVEAL
============================================= */
.reveal {
  opacity: 0;
  transform: translateY(44px);
  transition: opacity 1.9s cubic-bezier(0.22, 1, 0.36, 1),
              transform 1.9s cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal.show { opacity: 1; transform: translateY(0); }

.reveal-fade {
  opacity: 0;
  transition: opacity 1.9s cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal-fade.show { opacity: 1; }

.d1 { transition-delay: 0.15s !important; }
.d2 { transition-delay: 0.32s !important; }
.d3 { transition-delay: 0.49s !important; }
.d4 { transition-delay: 0.66s !important; }
.d5 { transition-delay: 0.83s !important; }
.d6 { transition-delay: 1.00s !important; }
.d7 { transition-delay: 1.17s !important; }
.d8 { transition-delay: 1.34s !important; }
.d9 { transition-delay: 1.51s !important; }

@media (max-width: 768px) {
  .section { padding: 5rem 1.5rem; }
}