/* ============ Base ============ */
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--ff-body);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  transition: background .3s ease, color .3s ease;
}
h1, h2, h3 { font-family: var(--ff-display); font-weight: 700; line-height: 1.2; }
::selection { background: var(--amber); color: var(--on-amber); }
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: var(--amber); }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--amber); outline-offset: 3px;
}

.container { max-width: var(--container); margin-inline: auto; padding-inline: clamp(20px, 5vw, 40px); }
section { position: relative; padding-block: clamp(60px, 9vw, 108px); }

.section-head { max-width: 620px; margin-bottom: 44px; }
.sheet-tag { display: flex; align-items: center; gap: 12px; font-family: var(--ff-mono); font-size: .78rem; color: var(--amber); text-transform: uppercase; letter-spacing: .08em; margin-bottom: 16px; }
.sheet-tag::after { content: ''; flex: 1; height: 1px; background: var(--line-strong); max-width: 120px; }
.section-title { font-size: clamp(1.6rem, 2.6vw, 2.15rem); margin-bottom: 12px; letter-spacing: -.01em; }
.section-sub { color: var(--text-dim); font-size: 1.02rem; }

[data-reveal] { opacity: 0; transform: translateY(24px) scale(.98); transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); }
[data-reveal].is-visible { opacity: 1; transform: translateY(0) scale(1); }

/* ============ Buttons ============ */
.btn { display: inline-flex; align-items: center; gap: 10px; padding: 14px 26px; border-radius: var(--radius-sm); font-weight: 600; font-size: .85rem; font-family: var(--ff-mono); text-transform: uppercase; letter-spacing: .05em; border: 1.5px solid transparent; transition: background var(--transition), color var(--transition), border-color var(--transition), transform var(--transition); }
.btn--primary { background: var(--amber); color: var(--on-amber); border-color: var(--amber); }
.btn--primary:hover { background: transparent; color: var(--amber); transform: translateY(-2px); }
.btn--ghost { border-color: var(--line-strong); color: var(--text); }
.btn--ghost:hover { border-color: var(--amber); color: var(--amber); transform: translateY(-2px); }