.hero {
  min-height: 90vh;
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
}

.hero-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 600px 400px at 10% 30%, rgba(0, 62, 199, 0.04) 0%, transparent 70%),
    radial-gradient(ellipse 500px 500px at 90% 70%, rgba(193, 241, 0, 0.03) 0%, transparent 70%);
  pointer-events: none;
}

.hero-content {
  position: relative;
  z-index: 1;
  max-width: 720px;
}

.hero h1 {
  margin-bottom: calc(var(--space-base) * 4);
}

.hero p {
  font-size: var(--body-lg);
  line-height: var(--body-lg-line);
  color: var(--on-surface-variant);
  margin-bottom: calc(var(--space-base) * 6);
  max-width: 560px;
}

.hero-actions {
  display: flex;
  gap: calc(var(--space-base) * 3);
  flex-wrap: wrap;
}

.section {
  padding: calc(var(--space-base) * 15) 0;
}

.maps-hero + .section {
  padding-top: 0;
}

.maps-hero {
  padding-bottom: 0;
}

.section-header {
  text-align: center;
  max-width: 600px;
  margin: 0 auto calc(var(--space-base) * 10);
}

.section-header h2 {
  margin-bottom: calc(var(--space-base) * 2);
}

.section-header p {
  color: var(--on-surface-variant);
  font-size: var(--body-lg);
}

.feature-card {
  padding: calc(var(--space-base) * 6);
  text-align: center;
}

.feature-icon {
  width: 56px;
  height: 56px;
  border-radius: var(--rounded-lg);
  background: var(--primary-fixed);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto calc(var(--space-base) * 4);
  font-size: 24px;
  color: var(--primary);
}

.feature-card h3 {
  font-size: var(--headline-md);
  margin-bottom: calc(var(--space-base) * 2);
}

.feature-card p {
  color: var(--on-surface-variant);
  font-size: var(--body-md);
}

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: rgba(250, 248, 255, 0.85);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}

.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
}

.site-logo {
  font-family: var(--font-heading);
  font-size: 22px;
  font-weight: 700;
  color: var(--primary);
  text-decoration: none;
  letter-spacing: -0.01em;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: calc(var(--space-base) * 4);
}

.site-nav a {
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 500;
  color: var(--on-surface-variant);
  text-decoration: none;
  transition: color 0.2s;
}

.site-nav a:hover {
  color: var(--primary);
}

.site-nav a.active {
  color: var(--primary);
}

.site-footer {
  background: var(--surface-container);
  padding: calc(var(--space-base) * 10) 0 calc(var(--space-base) * 6);
  margin-top: calc(var(--space-base) * 10);
}

.site-footer .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: calc(var(--space-base) * 3);
}

.site-footer p {
  color: var(--on-surface-variant);
  font-size: 14px;
}

@media (max-width: 768px) {
  .site-nav { display: none; }
  .hero { min-height: 70vh; }
  .section { padding: calc(var(--space-base) * 8) 0; }
}