body {
  font-family: var(--font);
  font-size: var(--fs-base);
  color: var(--dark);
  background: var(--white);
}

h1 { font-size: var(--fs-5xl); font-weight: 800; letter-spacing: -0.02em; }
h2 { font-size: var(--fs-4xl); font-weight: 700; letter-spacing: -0.01em; }
h3 { font-size: var(--fs-2xl); font-weight: 600; }
h4 { font-size: var(--fs-xl); font-weight: 600; }
h5 { font-size: var(--fs-lg); font-weight: 600; }
h6 { font-size: var(--fs-base); font-weight: 600; }

p { color: var(--muted); line-height: 1.7; }

.section { padding: var(--sp-20) 0; }
.section-dark { background: var(--dark); color: var(--white); }
.section-dark p { color: rgba(255,255,255,0.7); }
.section-light { background: var(--light); }

.section-header { text-align: center; max-width: 40rem; margin: 0 auto var(--sp-12); }
.section-header h2 { margin-bottom: var(--sp-4); }
.section-header p { font-size: var(--fs-lg); }

.gradient-text {
  background: linear-gradient(135deg, var(--blue), var(--green), var(--yellow));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.text-blue { color: var(--blue); }
.text-green { color: var(--green); }
.text-yellow { color: var(--yellow); }
.text-muted { color: var(--muted); }
.text-danger { color: var(--danger); }
.text-success { color: var(--success); }

strong { font-weight: 600; }
small { font-size: var(--fs-sm); }

hr { border: none; border-top: 1px solid var(--border); margin: var(--sp-8) 0; }

@media (max-width: 768px) {
  h1 { font-size: var(--fs-4xl); }
  h2 { font-size: var(--fs-3xl); }
  .section { padding: var(--sp-12) 0; }
}