*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

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

body {
  font-family: var(--font-body);
  color: var(--color-text);
  background: var(--color-bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--color-primary); text-decoration: none; }
a:hover { opacity: .85; }

/* ── Section wrappers with alternating backgrounds ─────── */
.ts-section-wrap {
  width: 100%;
  display: block;
}
.ts-section-wrap--even {
  background: var(--color-bg);
}
.ts-section-wrap--odd {
  background: var(--color-surface);
}
/* Override any background set in section CSS */
.ts-section-wrap > .ts-section,
.ts-section-wrap > [data-section] {
  background: transparent !important;
}

/* ── Container ─────────────────────────────────────────── */
.ts-container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-pad);
}

/* ── Section spacing ───────────────────────────────────── */
.ts-section { padding: 80px 0; }

/* ── Buttons ───────────────────────────────────────────── */
.ts-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 28px;
  border-radius: var(--radius-md);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: .95rem;
  cursor: pointer;
  transition: opacity .2s, transform .15s;
  border: none;
  text-decoration: none;
}
.ts-btn:hover { opacity: .9; transform: translateY(-1px); }
.ts-btn--primary   { background: var(--color-primary);   color: #fff; }
.ts-btn--secondary { background: var(--color-secondary); color: #fff; }
.ts-btn--outline   { background: transparent; color: var(--color-primary); border: 2px solid var(--color-primary); }
.ts-btn--accent    { background: var(--color-accent);    color: #fff; }

/* ── Typography ────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); line-height: 1.2; font-weight: 700; }
h1 { font-size: clamp(2rem, 5vw, 3.5rem); }
h2 { font-size: clamp(1.6rem, 4vw, 2.5rem); }
h3 { font-size: clamp(1.2rem, 3vw, 1.75rem); }
p  { max-width: 65ch; }

/* ── Scroll animation ──────────────────────────────────── */
[data-animate] { opacity: 0; transform: translateY(24px); transition: opacity .5s, transform .5s; }
[data-animate].ts-visible { opacity: 1; transform: none; }

@media (max-width: 768px) {
  .ts-section { padding: 56px 0; }
}