.hero { padding: 5rem 0; }
.hero h1 { font-size: 3rem; font-weight: 700; letter-spacing: -0.025em; margin-bottom: 1.5rem; line-height: 1.2; color: var(--text-main); }
.hero p { font-size: 1.25rem; color: var(--text-muted); max-width: 640px; margin: 0 auto 2.5rem; }
.hero-actions { display: flex; gap: 1rem; justify-content: center; }

.features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; padding-bottom: 5rem; max-width: 1000px; margin: 0 auto; }
.feature { text-align: left; padding: 1.5rem; height: 100%; }
.feature-icon {
  width: 48px; height: 48px;
  background: rgba(11,198,234,0.10);
  border: 1px solid rgba(11,198,234,0.20);
  border-radius: 0.5rem;
  display: flex; align-items: center; justify-content: center; margin-bottom: 1rem;
}
.feature-icon svg { width: 24px; height: 24px; stroke: var(--brand-cyan); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.feature h3 { font-weight: 600; margin-bottom: 0.5rem; font-size: 1.1rem; color: var(--text-main); }
.feature p { font-size: 0.875rem; color: var(--text-muted); line-height: 1.6; }