/* ============================================================
   RESET + BASE
   ============================================================ */
*, *::before, *::after {
  box-sizing: border-box; margin: 0; padding: 0;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--f-body);
  font-size: 16px;
  line-height: 1.65;
  overflow-x: hidden;
}
img, video { display: block; max-width: 100%; }
button { font-family: var(--f-body); }
a { color: inherit; text-decoration: none; }

/* ============================================================
   TYPOGRAPHY
   ============================================================ */
h1 { font-family: var(--f-head); font-weight: 400; line-height: 1.1; letter-spacing: -0.01em; font-size: clamp(2.6rem, 6vw, 5.2rem); }
h2 { font-family: var(--f-head); font-weight: 400; line-height: 1.15; font-size: clamp(1.9rem, 4vw, 3.4rem); }
h3 { font-family: var(--f-head); font-weight: 400; line-height: 1.2;  font-size: clamp(1.2rem, 2.5vw, 2rem); }
h4 { font-family: var(--f-head); font-weight: 400; line-height: 1.25; font-size: clamp(1rem, 2vw, 1.4rem); }
p  { max-width: 66ch; text-wrap: pretty; }

/* ============================================================
   SCROLL REVEAL ANIMATIONS
   ============================================================ */
.reveal {
  opacity: 0.98; transform: translateY(20px);
  transition: opacity 500ms ease, transform 600ms cubic-bezier(0.4, 0, 0.2, 1);
}
.reveal.vis { opacity: 1; transform: translateY(0); }
.d1 { transition-delay: 80ms; }
.d2 { transition-delay: 160ms; }
.d3 { transition-delay: 240ms; }
.d4 { transition-delay: 320ms; }

/* ============================================================
   PAGE TRANSITION
   ============================================================ */
.page-enter { animation: pageIn 320ms ease-out; }
@keyframes pageIn {
  from { transform: translateY(10px); }
  to   { transform: translateY(0); }
}

/* ============================================================
   DIVIDER
   ============================================================ */
.gold-divider {
  width: 44px; height: 1px;
  background: linear-gradient(90deg, var(--accent), transparent);
  margin: var(--sp-3) 0;
}
.gold-divider.center { margin: var(--sp-3) auto; }

/* ============================================================
   INCLUDED LIST
   ============================================================ */
.included-list { display: flex; flex-direction: column; gap: 12px; }
.included-item {
  display: flex; align-items: center; gap: var(--sp-2);
  font-size: 0.9375rem; color: var(--text-muted);
}
.included-item::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent); flex-shrink: 0;
}