@import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,wght@0,400;0,600;0,700;1,400&family=Inter:wght@400;500;600&display=swap');
@import 'variables.css';

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

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

body {
  background: var(--bg-page);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  padding-bottom: 64px;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--text-primary);
}

a { color: var(--accent-teal); text-decoration: none; transition: color var(--transition-fast); }
a:hover { color: var(--text-primary); }

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

.container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 28px;
  border-radius: var(--radius-md);
  font-size: 14px;
  font-weight: 600;
  font-family: var(--font-body);
  cursor: pointer;
  border: none;
  transition: all var(--transition-normal);
  letter-spacing: 0.02em;
  text-decoration: none;
}

.btn-primary {
  background: var(--accent-red);
  color: #FFF5F2;
}
.btn-primary:hover {
  background: var(--accent-coral);
  color: #FFF5F2;
  transform: translateY(-2px);
}

.btn-outline {
  background: transparent;
  color: var(--text-primary);
  border: 1.5px solid var(--bg-border-hover);
}
.btn-outline:hover {
  border-color: var(--accent-teal);
  color: var(--accent-teal);
  transform: translateY(-2px);
}