/* ─── BASE / RESET / TYPOGRAPHY ─── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box }
html { scroll-behavior: smooth }
body {
  font-family: var(--font-main);
  color: var(--ink); background: var(--bg);
  line-height: 1.6; -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; transition: color 0.2s }
img { max-width: 100%; display: block }
h1, h2, h3 { font-family: var(--font-display); font-weight: 600; line-height: 1.2 }
h1 { font-size: 2.2rem }
h2 { font-size: 1.7rem }
h3 { font-size: 1.15rem }
p { color: var(--ink-soft); line-height: 1.7 }

.container { max-width: 1200px; margin: 0 auto; padding: 0 24px }
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 24px; border-radius: var(--radius-sm);
  font-size: 0.88rem; font-weight: 600;
  border: none; cursor: pointer; transition: all 0.3s;
  font-family: inherit; text-decoration: none;
}
.btn-accent {
  background: var(--accent); color: var(--bg-dark);
  background-size: 200% 100%; background-position: 0% 0%;
  background-image: linear-gradient(90deg, var(--accent) 0%, #f5e6a3 50%, var(--accent) 100%);
}
.btn-accent:hover { background-position: 100% 0%; transform: translateY(-1px) }
.btn-accent:active { background-position: 100% 0%; transform: translateY(0) }
.btn-outline {
  background: transparent; color: var(--ink); border: 1.5px solid var(--line);
  background-size: 200% 100%; background-position: 0% 0%;
  background-image: linear-gradient(90deg, transparent 0%, var(--bg) 50%, transparent 100%);
}
.btn-outline:hover { border-color: var(--ink); background-position: 100% 0%; }
.btn-outline:active { background-position: 100% 0%; }
.btn-dark {
  background: var(--bg-dark); color: #fff;
  background-size: 200% 100%; background-position: 0% 0%;
  background-image: linear-gradient(90deg, var(--bg-dark) 0%, #444 50%, var(--bg-dark) 100%);
}
.btn-dark:hover { background-position: 100% 0%; transform: translateY(-1px) }
.btn-dark:active { background-position: 100% 0%; transform: translateY(0) }
.btn-sm { padding: 8px 14px; font-size: 0.82rem }

section { padding: 70px 0 }
.section-head { margin-bottom: 32px }
.section-head p { margin-top: 8px; max-width: 560px }
.section-head.center { text-align: center; max-width: 640px; margin: 0 auto 32px }
.section-head.center p { margin: 8px auto 0 }
.label {
  display: inline-block; font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 10px;
}