/* ── Header / Nav ── */
.site-header {
  position: fixed; top: 0; right: 0; left: 0;
  z-index: 100; transition: background 0.3s ease;
  border-bottom: 1px solid transparent;
}
.site-header.scrolled {
  background: rgba(255,255,255,0.85);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-bottom-color: var(--color-muted);
}
.header-inner {
  display: flex; align-items: center;
  justify-content: space-between; height: 4rem;
}
.brand { text-decoration: none; }
.brand-logo {
  font-family: var(--font-heading); font-size: 1.5rem;
  font-weight: 700; color: var(--color-accent);
}
.main-nav { display: flex; align-items: center; }
.main-nav .nav-list { display: flex; gap: 2rem; align-items: center; }
.main-nav .nav-list a {
  color: var(--color-body); font-size: 0.9375rem;
  font-weight: 500; transition: color 0.2s;
}
.main-nav .nav-list a:hover { color: var(--color-accent); }
.nav-cta { margin-right: 1.5rem; }
.menu-toggle { display: none; color: var(--color-ink); }

@media (max-width: 767px) {
  .main-nav {
    position: fixed; top: 4rem; right: 0; left: 0; bottom: 0;
    background: var(--color-surface); border-top: var(--border);
    flex-direction: column; padding: 2rem 1.5rem;
    transform: translateX(100%); transition: transform 0.3s ease;
  }
  .main-nav.open { transform: translateX(0); }
  .main-nav .nav-list { flex-direction: column; gap: 0; }
  .main-nav .nav-list li { border-bottom: var(--border); }
  .main-nav .nav-list a { display: block; padding: 1rem 0; font-size: 1.125rem; }
  .nav-cta { margin: 1.5rem 0 0; text-align: center; }
  .menu-toggle { display: block; }
}

/* ── Hero ── */
.hero-section {
  position: relative; padding: 8rem 0 4rem;
  text-align: center; overflow: hidden; background: var(--color-surface);
}
.hero-decoration {
  position: absolute; top: -120px; left: 50%; transform: translateX(-50%);
  width: 500px; height: 500px; border-radius: 50%;
  background: radial-gradient(circle, var(--color-accent-subtle) 0%, transparent 70%);
  opacity: 0.6; pointer-events: none;
}
.hero-title {
  font-size: 2rem; margin-bottom: 1.25rem;
  max-width: 720px; margin-inline: auto;
}
.hero-subtitle {
  font-size: 1.125rem; color: var(--color-body);
  max-width: 600px; margin: 0 auto 2rem;
}
.hero-actions {
  display: flex; gap: 1rem; justify-content: center;
  flex-wrap: wrap; margin-bottom: 2rem;
}
.hero-trust { font-size: 0.875rem; color: var(--color-body); opacity: 0.7; }

@media (min-width: 768px) {
  .hero-section { padding: 10rem 0 5rem; }
  .hero-title { font-size: 3rem; }
  .hero-subtitle { font-size: 1.25rem; }
}

/* ── Features ── */
.features-section { background: var(--color-canvas); }
.features-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
.feature-card {
  background: var(--color-surface); border: var(--border);
  border-radius: var(--radius); padding: 2rem 1.5rem; text-align: center;
}
.feature-icon { margin-bottom: 1rem; display: flex; justify-content: center; }
.feature-card h3 { font-size: 1.125rem; margin-bottom: 0.5rem; }
.feature-card p { font-size: 0.9375rem; color: var(--color-body); }

@media (min-width: 600px) { .features-grid { grid-template-columns: repeat(2,1fr); } }
@media (min-width: 992px) { .features-grid { grid-template-columns: repeat(3,1fr); } }

/* ── How It Works ── */
.how-section { background: var(--color-surface); }
.steps-grid { display: grid; grid-template-columns: 1fr; gap: 2rem; }
.step-card { text-align: center; }
.step-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 3rem; height: 3rem; border-radius: 50%;
  background: var(--color-accent); color: #FFF;
  font-family: var(--font-heading); font-weight: 700;
  font-size: 1.25rem; margin-bottom: 1rem;
}
.step-card h3 { font-size: 1.0625rem; margin-bottom: 0.5rem; }
.step-card p {
  font-size: 0.9375rem; color: var(--color-body);
  max-width: 280px; margin: 0 auto;
}

@media (min-width: 600px) { .steps-grid { grid-template-columns: repeat(2,1fr); } }
@media (min-width: 992px) { .steps-grid { grid-template-columns: repeat(4,1fr); } }