@layer domains {
  .home-hero { position: relative; overflow: hidden; padding-block: var(--space-section); background: radial-gradient(circle at 82% 20%, color-mix(in srgb, var(--color-accent) 25%, transparent), transparent 28%), linear-gradient(150deg, var(--color-surface-soft), var(--color-surface)); }
  .home-hero__content { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(17rem, .75fr); align-items: center; gap: clamp(2rem, 6vw, 5rem); }
  .home-lead { color: var(--color-text-muted); font-size: clamp(1.1rem, 2.2vw, 1.35rem); }
  .home-actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.8rem; }
  .home-symbol { justify-self: end; width: min(100%, 25rem); }
  .home-symbol img { width: 100%; border: 1px solid var(--color-border); border-radius: 2rem; box-shadow: var(--shadow-card); }
  .home-section { padding-block: var(--space-section); }
  .home-section--soft { background: var(--color-surface-soft); }
  .home-section__intro { max-width: var(--text-width); margin-bottom: 2rem; }
  .home-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
  .home-step { color: var(--color-accent); font-size: .85rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
  .home-boundary { margin-top: 2rem; }
  @media (max-width: 48rem) {
    .home-hero__content { grid-template-columns: 1fr; }
    .home-symbol { justify-self: center; width: min(100%, 20rem); }
    .home-grid { grid-template-columns: 1fr; }
  }
}